关于右上角的视图按钮

疑问解答
1

image

编辑视图下显示的view按钮，阅读模式下显示edit按钮。有时候搞的我很混乱，有大佬知道怎么把两个图标换一下吗

2

之前有写过一个css，应该能搜到，晚点我翻一下

1 个赞
3

没翻到，用GPT简单改了个，楼主按照自己的主题微调下颜色尺寸什么的：

效果如图（左编辑右阅读）：

image
image1131×257 14.8 KB

/* 隐藏原 SVG 图标 */
.view-action[aria-label *= "视图"] .svg-icon {
  display: none; /* 关键：隐藏按钮内的原生 SVG */
}

/* 按钮基础样式（确保伪元素定位正确） */
.view-action[aria-label *= "视图"] {
  width: 24px;        /* 与 SVG 尺寸一致 */
  height: 24px;
}

/* 伪元素统一样式：居中显示 SVG */
.view-action[aria-label *= "视图"]::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain; /* 适配按钮尺寸 */
  background-repeat: no-repeat;
  background-position: center; /* 居中对齐 */
}

/* 互换后：原“编辑视图”按钮 → 显示“阅读视图”SVG（lucide-book-open） */
.view-action[aria-label*="编辑视图中"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 21h8"></path><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path></svg>');
}

/* 互换后：原“阅读视图”按钮 → 显示“编辑视图”SVG（lucide-edit-3） */
.view-action[aria-label*="阅读视图中"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg>');
}

如何使用css脚本？详见站内教程→【新手向教程】OB样式调整基础课：CSS入门科普

2 个赞
5

谢谢:penguin:企鹅大佬！！！!!

6

谢谢GPT

另外论坛回复上一楼是不显示的，实际上是回复到了