v2ex 主题样式版本更新，支持亮色与暗色，支持自定义背景。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1591 天前的主题，其中的信息可能已经有所发展或是发生改变。

参考了《知乎》、《 antd 》、《掘金》的配色和布局，在保证显示内容完整的前提下，美化了整站的样式。

代码

当前版本：1.4

github： https://github.com/viewweiwu/v2ex-zhihu-theme

特性

调整所有页面的间距、字体大小、边框颜色、字体颜色
调整主题色调为蓝色
调整输入框、按钮、选择框，的大小、背景色、边框颜色、圆角
去除马赛克背景，可自由选择背景图片添加
详情页面将回到顶部放在右下角
在使用了 v2ex-pro（油猴扩展脚本）的前提下，优化楼中楼显示。

v2ex-pro 楼中楼优化

预览

设置方法

设置 > 自定义 CSS > 粘贴下面这段代码

@import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";

自定义背景图片（可选）

可自行替换 url 为你喜欢的壁纸图片。这里挑选了两张

需要自定义背景的请使用下面这段代码

@import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css"; body #Wrapper { background-image: url( https://p.sda1.dev/3/4fb95462b95b2b4afc32087b2a878dfa/bg-4k-light.png) !important; background-attachment: fixed !important; background-size: cover !important; } body #Wrapper.Night { background-image: url( https://p.sda1.dev/3/4c32f34a08ac944236ed7546211c8330/bg-4k.png) !important; background-attachment: fixed !important; background-size: cover !important; }

最后

[之前的帖子]( https://v2ex.com/t/819780) append 太多了，于是单独开了个新帖子。 今后的更新请关注此帖子。 感谢大家的喜欢。

第 1 条附言 2022 年 3 月 18 日

更新 1.6

2022-03-18

兼容 v2ex-plus 样式
解决图片超出最大宽度

@import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";

第 2 条附言 2022 年 6 月 2 日

更新 1.6.2

修复评论换行问题

@import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";

第 3 条附言 2022 年 7 月 6 日

兄弟们，新发布了一个绿色的主题样式，有兴趣可以换换～

https://v2ex.com/t/864473#reply0

21 条回复 2022-05-03 20:13:48 +08:00

Pipecraft

2021 年 12 月 15 日

感谢分享

vacnt7

2021 年 12 月 15 日

用上了，感谢分享

0xfan

2021 年 12 月 15 日

用上了，很好

ttxhxz

2021 年 12 月 15 日

用上了，感谢分享

eason1874

2021 年 12 月 15 日

用上了。直接复制粘贴保存失败，提示不能超过 8K ，格式净化后可以

Hack3rHan

2021 年 12 月 16 日

body{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif}body #Wrapper{background-image:unset!important;background-color:#f5f5f5}select{padding:5px;border-radius:var(--box-border-radius);border:1px solid var(--box-border-color)}:root{--box-border-radius:2px;--box-border-color:#f0f2f7;--link-color:#8590a6;--link-hover-color:#294a8e;--box-border-color:#f0f2f7;--primary-color:#1890ff;--primary-color-hover:#40a9ff}a:active,a:link,a:visited{color:var(--link-color)}a.topic-link:active,a.topic-link:link{color:#333;font-size:18px}a.topic-link:hover{color:var(--link-hover-color)}.cell{padding:12px}#Top{height:52px;border-bottom:0;background-color:unset;box-shadow:0 1px 3px rgba(18,18,18,0.1)}#Top>.content{height:100%;display:flex;align-items:center}#Rightbar .fade{color:#333}#Tabs{padding:12px 0!important;border-top-left-radius:0;border-top-right-radius:0}body .box{border-bottom:0}#Main .box{box-shadow:0 1px 3px rgb(18 18 18 / 10%)}#Main .item a:hover{text-decoration:none!important}#Main .cell.item{padding:16px 24px}#Main .cell.item td:nth-child(3){padding-left:8px}#Main .cell td:nth-child(2){line-height:unset!important}#Main .cell .cell{padding-right:0;padding-left:0;padding-bottom:0}.count_livid{padding:0!important;margin-right:0!important;color:#999!important;font-family:'Bender'!important;background-color:unset!important}.topic_info{margin-top:4px;display:inline-block}.topic_info a{color:var(--color-fade);font-weight:normal}.topic_info a:hover{color:var(--link-hover-color)}a.tab:active,a.tab:link,a.tab:visited{min-width:4.8em;padding:12px 6px 12px 24px;margin-right:0!important;font-size:16px;font-weight:500}.a.tab_current:active,a.tab_current:link,a.tab_current:visited{min-width:4.8em;padding:12px 6px 12px 24px;margin-right:0!important;font-size:16px;color:var(--primary-color);font-weight:500;background-color:unset}a.tab:hover{color:var(--link-hover-color);background-color:unset}h1{margin:0 0 16px}a.top:link,a.top:visited{font-weight:unset;color:var(--link-color)}.cell .cell .cell{margin-left:-58px;width:auto;display:block}.cell .cell{border-bottom:0}#Main .no{min-width:2em;background-color:unset}#Main .cell,.header,.subtle,.message,.note_item,.outdated{padding:16px 24px}#Main .page_current,#Main .page_normal{padding:5px 10px}.cell.alt,.status,.inner.alt{padding:16px 24px!important}.light-toggle img{height:16px}#reply-box .flex-one-row a:nth-child(1){white-space:nowrap;margin-right:-1em}#reply-box a:nth-child(2){bottom:16px;right:16px;width:3.6em;height:3.6em;line-height:1.3;padding:0 .8em;outline:1px solid var(--box-border-color);border-radius:var(--box-border-radius);box-shadow:0 1px 3px rgb(18 18 18 / 10%);background-color:var(--box-background-color);position:fixed;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-decoration:unset!important}#reply-box a:nth-child(2):hover{filter:brightness(1.2)}#SecondaryTabs,.inner{padding:10px 24px}#Rightbar .inner{padding:10px}#SecondaryTabs a{color:#999}#SecondaryTabs a:hover{color:#06f}.site-nav{padding-top:0}.site-nav .tools *{margin-left:24px}.topic_content{line-height:1.8}.topic_content,.topic_content{font-size:16px}.topic_content p{margin:1.8em 0}.topic_buttons{background:unset;padding:12px}.topic_buttons>*:nth-child(2)::before{content:'';margin-right:.5em}.topic_buttons>*:nth-child(3)::before{content:'';margin-right:.5em}.topic_buttons>*:nth-child(4)::before{content:'';margin-right:.5em}.topic_buttons #topic_thank a::before{content:'';margin-right:.5em}.reply_content{font-size:16px;line-height:1.8}body .normal.button,body .super.button{cursor:pointer;color:#fff!important;font-weight:unset!important;background:unset!important;background-color:var(--primary-color)!important;background-image:unset!important;text-shadow:unset!important;box-shadow:unset!important;border:1px solid var(--primary-color)!important}body .normal.button:hover,body .super.button{color:#fff!important;background-color:var(--primary-color-hover)!important;border:1px solid var(--primary-color-hover)!important}body td.normal.button.disable_now,body td.super.button.disable_now{color:#00000040!important;border-color:#d9d9d9!important;background:#f5f5f5!important}form .button{border-radius:var(--box-border-radius)!important}#Bottom{border-top:0}#Rightbar td{border-left:none!important;border-right:none!important}select,.sl,.ml,.select2-container--default .select2-selection--single{border-color:#ccc;border-radius:var(--box-border-radius)!important}#search-container::before{width:47px;top:unset}#search-container{height:34px;border-radius:17px}#search-container #search{height:34px;padding-left:12px}.select2-container--default .select2-selection--single{border-radius:var(--box-border-radius)}.wwads-cn{border-bottom:0}.onoffswitch label{border-radius:var(--box-border-radius)}
body #Wrapper.Night{background:none!important;background-image:none!important;background-color:#141414!important;--box-border-color:#2e445b}.Night a.topic-link:active,.Night a.topic-link:link{color:#a3b4c1}.Night a.topic-link:visited{color:#606060}.Night #Rightbar .fade{color:#ccc}.Night .box{border:0}.Night .normal.button,.Night .super.button{color:#fff!important;border-color:var(--primary-color)!important;background-color:var(--primary-color)!important}.Night td.normal.button.disable_now,.Night td.super.button.disable_now{color:rgba(255,255,255,0.3)!important;border-color:#434343!important;background:rgba(255,255,255,0.08)!important}.Night .normal.button:hover,.Night .super.button{color:#fff;border-color:var(--primary-color-hover)!important;background-color:var(--primary-color-hover)!important}.Night .normal.button:hover:enabled,.Night .super.button{background-color:var(--primary-color-hover)!important;background:var(--primary-color-hover)!important}.Night .outdated{color:#5d9bad}.Night img{filter:brightness(0.9)}.Night .topic_info a{color:#738292}.Night select{color:#d1d5d9;background:transparent}.ight .select2-container--default .select2-selection--single{border-color:var(--box-border-color);background-color:#18222d}.Night .select2-container--default .select2-selection--single .select2-selection__rendered{color:#d1d5d9}.Night .box form .cell{background-color:transparent!important}.Night .selectboxit-default-arrow{border-top:4px solid #fff}.Night select,.Night .sl,.Night .ml,.Night .select2-container--default .select2-selection--single{border-color:var(--box-border-color)}

Hack3rHan

2021 年 12 月 16 日

自定义不能超过 8K ，压缩好了

minamike

2021 年 12 月 16 日

请问能不能根据系统的主题颜色自动切换亮色和暗色模式

viewweiwu

2021 年 12 月 16 日

@minamike 暂时不能，需要自己点右上角开关切换

vruzo

2021 年 12 月 16 日

@minamike 迫于自己需要，在 V2EX Pro 的油猴脚本里加了个自动切换方法
```Javascript
//自动切换夜间模式
(function (){
const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
const toggleDom = document.querySelector("#Rightbar > div:nth-child(2) > div:nth-child(1) > table:nth-child(1) > tbody > tr > td:nth-child(3) > div > a > img")
const currentMode = toggleDom && toggleDom.attributes.alt.nodeValue || null
const isClick = (isDark && currentMode === 'Light') || (!isDark && currentMode === 'Dark')
if(isClick) toggleDom.click()
})();
```

viewweiwu

2021 年 12 月 16 日

@vruzo

vruzo

2021 年 12 月 16 日

另外感谢楼主分享

viewweiwu

2021 年 12 月 16 日

@vruzo 配合 v2ex-pro 的楼中楼，显示舒服多了