V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
viewweiwu
V2EX  ›  分享创造

我搞了一个 V2EX 类某乎的主题,支持亮色与暗色🌙☀️

  viewweiwu · 57 天前 · 7645 次点击
这是一个创建于 57 天前的主题,其中的信息可能已经有所发展或是发生改变。

调整了间距 & 更改颜色。

使用方式

设置 > 自定义 CSS

@import "https://sunflower-assets.oss-cn-hangzhou.aliyuncs.com/css/v2ex.css";

效果预览

第 1 条附言  ·  56 天前

2021-12-03 17:28:00

更新了版本优化了样式。

感谢大家的喜欢。

此 CSS 目前是放在我个人 CDN 的,我会持续优化下去。

如果担心 CDN 哪天没钱失效了,可以直接 CSS 的内容就好了。

更新新版本

如果是直接使用 CSS 链接的小伙伴,直接刷新就可以了。

如果是主动复制 CSS 或者使用自己 CDN 的小伙伴需要重新复制 CSS 到自己的 CDN。

更新内容

  1. 边框颜色调整
  2. 主题颜色切换开关大小调整
  3. 正文字体大小调整
  4. Tab 区域大小切换修复
  5. 搜索框边框颜色调整
  6. 右侧部分内容内边距调整
  7. 修复暗色下的部分边框颜色
  8. 切换主题时的消息提示边距调整
第 2 条附言  ·  56 天前

2021-12-03 19:00:00

优化暗色主题下的样式

更新内容

  1. 暗色模式下图片亮度降低 10%
  2. 暗色模式下列表标题颜色变成淡蓝色
  3. 暗色模式下统一标题下面信息的文字颜色
第 3 条附言  ·  54 天前

兄弟们,流量扛不住了。😭 钱不够用了,换成公共 cdn 吧。 原本的 cdn 我下掉了。

更新内容

@import "https://cdn.jsdelivr.net/gh/viewweiwu/v2ex-zhihu-theme/v2ex.css"
第 4 条附言  ·  50 天前
优化暗色主题下的体验~

1. feat: 主题按钮样式改为蓝色
2. feat: 优化记事本、时间轴页面的间距
3. feat: 优化暗色主题下的边框颜色
4. feat: 加大分页按钮
5. feat: 稍微提升文本艰巨
6. feat: 修复暗色主题下的颜色
7. feat: 统一文本框边框颜色

### 更新内容

```css
@import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";
```
第 5 条附言  ·  49 天前
  1. 修复暗色主题下的马赛克

更新内容

@import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";
第 6 条附言  ·  44 天前
开了新帖子,新版本跟新请看: https://hk.v2ex.com/t/822425
93 条回复    2021-12-14 22:32:40 +08:00
Kimen
    1
Kimen  
   57 天前
不错不错,UI 瞬间感觉明亮了许多
googlehub
    2
googlehub  
   57 天前
使用了,但是字体变化后有点糊了。
badmarillo
    3
badmarillo  
   57 天前
好看,用上了,感谢楼主
laincat
    4
laincat  
   57 天前 via iPhone
这就去试试
a1274598858
    5
a1274598858  
   57 天前
用上了,感谢楼主
viewweiwu
    6
viewweiwu  
OP
   57 天前
@googlehub 那可能是字体设置的原因了,我取的跟知乎一样的字体。
AnnaXia
    7
AnnaXia  
   57 天前
试用上了,感谢楼主
Heroy
    8
Heroy  
   57 天前
可以根据系统 /浏览器的设置自动变色吗~
viewweiwu
    9
viewweiwu  
OP
   57 天前
@Heroy 暂时不可以,只能到页面上自己按开关切换
shuxhan
    10
shuxhan  
   57 天前
优化了 ui ,雀食不错
lostberryzz
    11
lostberryzz  
   57 天前
建议传到 gist 上,虽然需要 fq ,但是 V2EX 本身也需要 fq ,oss 哪天不续费就没了
Heroy
    12
Heroy  
   57 天前
@viewweiwu 好的,谢谢楼主,已经用上了~~~
rm0gang0rf
    13
rm0gang0rf  
   57 天前
暗色在哪。。
mozhizhu
    14
mozhizhu  
   57 天前
新页面打开链接,复制,粘贴,给你省点流量……[doge]
shuxhan
    15
shuxhan  
   57 天前
@mozhizhu 我已经放在自己服务器了 也是给楼主省点流量
viewweiwu
    16
viewweiwu  
OP
   57 天前
@shuxhan 😄,大家赶紧学学,让我省点流量
yuhangch
    17
yuhangch  
   57 天前
等一个 github 主题,强势摸鱼🐶
kev1nzh
    18
kev1nzh  
   57 天前
舒服起来了
yuzo555
    19
yuzo555  
   57 天前   ❤️ 1
省流助手

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}:root{--box-border-radius:2px;--box-border-color:#f0f2f7;--link-color:#8590a6;--link-hover-color:#294a8e;--box-border-color:#f0f2f7}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}.ago,.gray,.no{font-family:Bender}#Top{height:52px;border-bottom:none;background-color:unset;box-shadow:0 1px 3px rgba(18,18,18,.1)}#Top>.content{height:100%;display:flex;align-items:center}#Rightbar .fade{color:#333}#Tabs{padding:12px 0;border-top-left-radius:0;border-top-right-radius: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}.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:400}.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:#06f;font-weight:500;background-color:unset}a.tab:hover{color:var(--link-hover-color);background-color:unset}#SecondaryTabs,.inner{padding:10px 24px}#SecondaryTabs a{color:#999}#SecondaryTabs a:hover{color:#06f}a.top:link,a.top:visited{font-weight:unset;color:var(--link-color)}.site-nav{padding-top:0}.site-nav .tools *{margin-left:24px}.topic_content{line-height:1.6}.topic_content p{font-size:15px;margin:1.4em 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}.normal.button{color:#000;font-weight:unset!important;background-color:unset;background-image:unset!important;background:unset!important;box-shadow:unset!important;border:1px solid #ccc!important}.normal.button:hover{color:#ccc}.super.button{border-radius:var(--box-border-radius)}.mll{border:1px solid #ccc!important}.mll:focus{border:1px solid #8590a6!important}#Bottom{border-top:none}#Rightbar td{border-left:none!important;border-right:none!important}.ml,.sl{border-radius:var(--box-border-radius)}#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:none}body #Wrapper.Night{background-color:#000}.Night a.topic-link:active,.Night a.topic-link:link{color:#a5a5a5}.Night a.topic-link:visited{color:#606060}.Night #Rightbar .fade{color:#ccc}.Night .normal.button{color:#d1d5d9;background-color:#18222d}.header{padding:16px 24px}h1{margin:0 0 16px}#Main .cell{padding:16px 24px}
Psily1017
    20
Psily1017  
   57 天前
https://raw.githubusercontent.com/psily/psily/main/v2ex.css 感谢楼主,我把他放 github 上了! 已注明转载,并标注对应主贴。
Psily1017
    21
Psily1017  
   57 天前
但是我发现无法生效 😄😄😄
yuzo555
    22
yuzo555  
   57 天前
@Psily1017 github 这个 raw 服务有限制的,你可以改成 jsdelivr 的 CDN
edinina
    23
edinina  
   57 天前
用上了,挺舒服的
edinina
    24
edinina  
   57 天前
有个意见,字体都稍大了很舒服,但是帖子正文的没调?还是很小很窄,不协调
Lemeng
    25
Lemeng  
   57 天前
感谢不错,收藏
Psily1017
    26
Psily1017  
   57 天前
@yuzo555 哈哈哈 还真不知道有这个限制,转了一下: https://cdn.jsdelivr.net/gh/psily/[email protected]/v2ex.css
viewweiwu
    27
viewweiwu  
OP
   57 天前
@edinina 确实。
现在正文也是 16px 了,你可以刷新一下看看。
cweijan
    29
cweijan  
   57 天前
很酷, 但能不能减少一下宽度和长度, 现在 div 很大导致一页能看到的信息减少了.
viewweiwu
    30
viewweiwu  
OP
   57 天前
@cweijan 可以复制我的 css 然后自己改。
因为现在大家的屏幕都大了,所以故意加大了间距,看起来舒服些。
timfei
    31
timfei  
   56 天前
用上了 thx
hewelzei
    32
hewelzei  
   56 天前
FontAwesome 字体被覆盖了导致部分图标不显示
viewweiwu
    33
viewweiwu  
OP
   56 天前
@hewelzei 请告诉在哪里出现问题,比如某个页面的某个地方,我好调试更改
mzmzzZ
    34
mzmzzZ  
   56 天前
多谢 已经使用
pluvet
    35
pluvet  
   56 天前
比官方好看!
1sm23
    36
1sm23  
   56 天前
我想要 github 主题的
xz410236056
    37
xz410236056  
   56 天前
好看。
Winter1sComing
    38
Winter1sComing  
   56 天前
很喜欢 感谢 lz
另外 CSS 是有监听系统黑暗模式的功能的 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme 可以参考一下
gbw1992
    39
gbw1992  
   56 天前
感觉不错 谢谢分享
viewweiwu
    40
viewweiwu  
OP
   56 天前
@Winter1sComing V2EX 已经有了切换暗色开关,这里不多搞了,担心出冲突以及 bug
hewelzei
    41
hewelzei  
   56 天前
hewelzei
    42
hewelzei  
   56 天前
@viewweiwu
选择全部分类后,我要提问旁边的箭头
https://i.loli.net/2021/12/03/NLsFMmaZhcUzjBX.png
viewweiwu
    43
viewweiwu  
OP
   56 天前
@hewelzei 已经修复
heytap
    44
heytap  
   56 天前
用上了 挺不错的
CSGO
    45
CSGO  
   56 天前 via Android
支持手机吗
daimubai
    46
daimubai  
   56 天前
多谢
cmdOptionKana
    47
cmdOptionKana  
   56 天前
好用啊,建议 V2EX 官方采用!
lbuzhi
    48
lbuzhi  
   56 天前
在用,棒
f0rger
    49
f0rger  
   56 天前
用上了,不错,宽屏下看起来显示区域很窄,这个感觉可以搞一下
pandaaa
    50
pandaaa  
   56 天前
强啊楼主,( doge
ooops
    51
ooops  
   56 天前
话说 v2 有根据系统设置自动切明暗的功能么,只看到了一个按钮。我之前都是用的 Dark Reader 自动适应。
Steps
    52
Steps  
   56 天前
可以了解下 jsdelivr.net
不要浪费自己钱
MemoryCorner
    53
MemoryCorner  
   56 天前
棒啊
mitx
    54
mitx  
   56 天前
不错,用上了
EvilDevilJin
    55
EvilDevilJin  
   56 天前
用上了,非常好用,感谢。
puyo
    56
puyo  
   56 天前
背景纯黑有点不太舒服,可以考虑换个颜色或者图片。
gbqqaybc
    57
gbqqaybc  
   56 天前
感谢楼主,界面很清爽[变态滑稽]
lopssh
    59
lopssh  
   56 天前
虽然我用手机客户端...不过谢谢楼主。
eason1874
    60
eason1874  
   56 天前
很难不支持

用了感觉像换了一个网站,清爽多了
WilsonGGG
    61
WilsonGGG  
   56 天前
哇,好看很多哎,感恩
rm0gang0rf
    62
rm0gang0rf  
   56 天前
@viewweiwu 请问暗色开关在哪。。我的怎么没有
veotax
    63
veotax  
   56 天前
@viewweiwu 这个太赞了,有办法直接集成到这个开源论坛程序么( Casnode )? https://github.com/casbin/casnode 直接提 PR 到代码仓库里,做一个深度集成,以后源码也放在里面维护
Torpedo
    64
Torpedo  
   56 天前
66666
FunamiYui
    65
FunamiYui  
   56 天前
用上了,感觉不错,谢谢楼主
mortal
    66
mortal  
   56 天前
好看,谢谢 LZ !
Spoience
    67
Spoience  
   56 天前 via Android
挺好看的
liuser666
    68
liuser666  
   54 天前
改了改背景颜色
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:#FFF8E7}:root{--box-border-radius:2px;--box-border-color:#f0f2f7;--link-color:#8590a6;--link-hover-color:#294a8e;--box-border-color:#f0f2f7}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}.ago,.gray,.no{font-family:Bender}#Top{height:52px;border-bottom:none;background-color:unset;box-shadow:0 1px 3px rgba(18,18,18,.1)}#Top>.content{height:100%;display:flex;align-items:center}#Rightbar .fade{color:#333}#Tabs{padding:12px 0;border-top-left-radius:0;border-top-right-radius: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}.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:400}.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:#06f;font-weight:500;background-color:unset}a.tab:hover{color:var(--link-hover-color);background-color:unset}#SecondaryTabs,.inner{padding:10px 24px}#SecondaryTabs a{color:#999}#SecondaryTabs a:hover{color:#06f}a.top:link,a.top:visited{font-weight:unset;color:var(--link-color)}.site-nav{padding-top:0}.site-nav .tools *{margin-left:24px}.topic_content{line-height:1.6}.topic_content p{font-size:15px;margin:1.4em 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}.normal.button{color:#000;font-weight:unset!important;background-color:unset;background-image:unset!important;background:unset!important;box-shadow:unset!important;border:1px solid #ccc!important}.normal.button:hover{color:#ccc}.super.button{border-radius:var(--box-border-radius)}.mll{border:1px solid #ccc!important}.mll:focus{border:1px solid #8590a6!important}#Bottom{border-top:none}#Rightbar td{border-left:none!important;border-right:none!important}.ml,.sl{border-radius:var(--box-border-radius)}#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:none}body #Wrapper.Night{background-color:#6b7785}.Night a.topic-link:active,.Night a.topic-link:link{color:#a5a5a5}.Night a.topic-link:visited{color:#606060}.Night #Rightbar .fade{color:#ccc}.Night .normal.button{color:#d1d5d9;background-color:#18222d}.header{padding:16px 24px}h1{margin:0 0 16px}#Main .cell{padding:16px 24px}.Night .box{background-color:#272e3b}
viewweiwu
    69
viewweiwu  
OP
   54 天前
@Steps 谢谢,确实我的钱快没了,我还以为没什么流量呢,我这就去搞
viewweiwu
    70
viewweiwu  
OP
   54 天前
换成 CDN 了,兄弟们,可以把地址换成这个。
@import "https://cdn.jsdelivr.net/gh/viewweiwu/v2ex-zhihu-theme/v2ex.css"
viewweiwu
    71
viewweiwu  
OP
   54 天前
详情内容回到 [顶部按钮] 固定在右下角

@import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";
banyungong
    72
banyungong  
   54 天前
给大佬递茶🍵
superfatboy
    73
superfatboy  
   53 天前
不错,看起来舒服多了
qq73666
    74
qq73666  
   53 天前
[二哈][doge]
janda
    75
janda  
   51 天前
看起来是舒服多了哈,只不过我看这个帖子的时候、两边还是马赛克样的白色、这是这个主题下的背景不能改嘛?
已经是黑夜模式了
viewweiwu
    76
viewweiwu  
OP
   50 天前
@janda 马赛克应该被我覆盖了呀,你那边还有的吗
viewweiwu
    77
viewweiwu  
OP
   50 天前
viewweiwu
    79
viewweiwu  
OP
   50 天前
@janda 请复制这一堆样式。


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

body #Wrapper.Night {
background: none !important;
background-image: none !important;
background-color:#141414 !important;
}
janda
    80
janda  
   50 天前
@viewweiwu 可以了、多谢大佬哈!字体和配色眼睛看着很舒服
puyo
    81
puyo  
   50 天前
可以考虑给特殊背景的节点背景加一个蒙层。
brucmao
    82
brucmao  
   49 天前
@viewweiwu 奇怪我用了这个,两边还是马赛克
WeitingChen
    83
WeitingChen  
   49 天前
哪位大佬告诉下,怎么用???
viewweiwu
    85
viewweiwu  
OP
   49 天前
@WeitingChen 右上角设置,自定义 CSS
chaodada
    86
chaodada  
   49 天前
用上了 真好看 哈哈哈哈哈
debuginn
    87
debuginn  
   48 天前
不错。支持一下
WeitingChen
    88
WeitingChen  
   47 天前
@viewweiwu 找到了,感谢大佬
kasusa
    89
kasusa  
   46 天前
可以放到 stylus 上面嘛。这个不会装耶……
viewweiwu
    90
viewweiwu  
OP
   46 天前
@kasusa 不需要安装,网页版 V2EX 自带的
viewweiwu
    92
viewweiwu  
OP
   46 天前
@brucmao 加我好友吧,我看看具体是因为什么,vx:dmlld3dlaXd1DQo=
betterblue
    93
betterblue  
   45 天前
牛批
关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2540 人在线   最高记录 5497   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 94ms · UTC 08:00 · PVG 16:00 · LAX 00:00 · JFK 03:00
Developed with CodeLauncher
♥ Do have faith in what you're doing.