v2ex 主题样式版本更新，支持亮色与暗色🌙☀️，支持自定义背景。
viewweiwu · viewweiwu · 2021-12-15 17:53:38 +08:00 · 6430 次点击这是一个创建于 1072 天前的主题，其中的信息可能已经有所发展或是发生改变。
参考了《知乎》、《 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-03-18 15:41:43 +08:00
更新 1.6
2022-03-18
- 兼容 v2ex-plus 样式
- 解决图片超出最大宽度
@import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";
第 2 条附言 · 2022-06-02 10:54:24 +08:00
第 3 条附言 · 2022-07-06 16:52:17 +08:00
 |
1
Pipecraft 2021-12-15 18:04:10 +08:00
感谢分享
|
 |
2
vacnt7 2021-12-15 18:33:28 +08:00
用上了，感谢分享
|
 |
3
0xfan 2021-12-15 19:17:32 +08:00
用上了，很好
|
 |
4
ttxhxz 2021-12-15 19:36:05 +08:00
用上了，感谢分享
|
 |
5
eason1874 2021-12-15 19:38:11 +08:00
用上了。直接复制粘贴保存失败，提示不能超过 8K ，格式净化后可以
|
 |
6
Hack3rHan 2021-12-16 09:24:31 +08:00
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}.Night .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)} |
|
7
Hack3rHan 2021-12-16 09:24:55 +08:00
自定义不能超过 8K ，压缩好了👆
|
 |
8
minamike 2021-12-16 09:30:20 +08:00
请问能不能根据系统的主题颜色自动切换亮色和暗色模式
|
 |
10
vruzo 2021-12-16 10:56:12 +08:00  1
@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() })(); ``` |
|
12
vruzo 2021-12-16 10:59:06 +08:00
另外感谢楼主分享
|
 |
14
ResidualBlood 2021-12-16 11:42:19 +08:00
感谢分享～
用上了，真香 |
 |
15
janda 2021-12-17 09:32:44 +08:00
用上了，感谢分享 、挺好用的、眼睛很舒服哈哈
|
 |
16
hellodigua 2021-12-30 13:37:51 +08:00
真香，谢谢老板~
|
 |
17
Natsume233 2021-12-30 16:32:02 +08:00
感谢分享
|
 |
18
sunls 2022-03-21 09:47:44 +08:00
1.6 版本打开报错：Failed to fetch viewweiwu/[email protected] from GitHub.
|
 |
19
viewweiwu OP |
 |
21
wanglz111 2022-05-03 20:13:48 +08:00
课设准备 ssm+手写 css3 搓一个 v2 偷去用了感谢
|
Select Language