【分享】一种暗色模式的方案

分享 MoyF • 查看182

现在看的很多网页都是暗底色的,浮动工具栏白色的一条看起来会很突兀。

所以想办法自己先实现了一个比较临时的暗色方案,效果还挺不错的:

具体的方法:

  1. 安装 Stylus 浏览器拓展
  2. 新建一个全局的样式
  3. 填入下面的代码:
.wcSidebarHighlightsWrap,
.wucaiSiderBarPC,
.wc-more-tools-wrap,
.wc-sidebar-circular-icon {
    background: #191919;
    border-color: #000000;
}

保存之后就生效了。

得益于原本的配色就不错,所以只需要修改背景色和边框颜色就基本OK。


这个原理是通过修改 css 来改变浮动窗口的颜色。

如果觉得太黑了或者想要其他颜色,直接修改两个 # 开头的颜色代码就可以。 这个是16位的 HEX 色值,用取色器可以看到,如果不明白的话也可以用 rgb(25, 100, 105) 这样的 RGB 色值。

共收到3条回复
【分享】一种暗色模式的方案 肥肥猫xyz
肥肥猫xyz ⚡⚡ #1 回复
厉害了~~ 赞
【分享】一种暗色模式的方案 MoyF
MoyF #2 回复
更新了一下,之前的会导致页面笔记看不清。

最新版本:
```css
.wc-dashboard_pn .wc-dashboard_pn_wrapper .wc-dashboard_pn_textarea {
color: #FFF !important;
font-weight: 500;
}

.wc-dashboard_pn .wc-dashboard_pn_wrapper {
background-color: #45484A !important;
border-color: black;
}

.wcSidebarHighlightsWrap,
.wucaiSiderBarPC,
.wc-more-tools-wrap,
.wc-sidebar-circular-icon {
background: #191919;
border-color: #000000;
}
```
【分享】一种暗色模式的方案 肥肥猫xyz
肥肥猫xyz ⚡⚡ #3 回复
厉害!!
登录后即可参与回复