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

doge 焕新颜, V2EX 扁平风自定义 CSS 主题

  jkjoke · 2018-11-13 11:20:39 +08:00 · 15014 次点击
这是一个创建于 2189 天前的主题,其中的信息可能已经有所发展或是发生改变。

LESS IS MORE

如果你追求更“轻”的体验,欢迎试用本主题

在之前的版本上做了一些修改(强迫症)

Code

  @import url("//jkjoke.b0.upaiyun.com/css/v2ex.css");
  • 自适应 http/https

How to use

  • 1、登录 V2EX 账号
  • 2、点击此处,或右上角“设置”
  • 3、找到“使用自定义 CSS ”并填入保存设置即可。

how

What's change

change

change

Qustions

在使用中有任何问题,欢迎反馈给我,可以在下面回复交流

update

第 1 条附言  ·  2018-11-13 18:31:43 +08:00
谢谢大家的留言,感觉暗色调版本的需求也挺多的,等完善了再提供给诸位
第 2 条附言  ·  2018-11-13 22:13:38 +08:00

现在暗色调版也有咯!

@import url("//jkjoke.b0.upaiyun.com/css/v2ex-dark.css");

dark

dark

第 3 条附言  ·  2018-11-14 10:48:59 +08:00
吼吼吼,找到闪一下的解决办法了
不过需要装一个 Stylish 插件 :)

样式地址:
https://userstyles.org/styles/165971/v2ex
https://userstyles.org/styles/165969/v2ex
第 4 条附言  ·  2019-06-07 02:40:04 +08:00
现在域名改了 可以用这个,不过还是建议用插件 :)

https://wuyu.design/css/v2ex-dark.css
123 条回复    2020-03-18 10:41:01 +08:00
1  2  
dingdangnao
    1
dingdangnao  
   2018-11-13 11:23:31 +08:00   ❤️ 2
用自定义 css 的时候总会闪一下。。
Mrun
    2
Mrun  
   2018-11-13 11:23:52 +08:00   ❤️ 1
不错的样子
goodryb
    3
goodryb  
   2018-11-13 11:24:33 +08:00   ❤️ 1
白色有点刺眼,或者是错觉?
LxRuzx
    4
LxRuzx  
   2018-11-13 11:24:50 +08:00

头像是不是太小了一些
DXpro
    5
DXpro  
   2018-11-13 11:25:08 +08:00   ❤️ 1
舒服了....
SharkIng
    6
SharkIng  
   2018-11-13 11:26:38 +08:00
最后回复部分没有了,不知道是故意取掉的还是?
jkjoke
    7
jkjoke  
OP
   2018-11-13 11:26:44 +08:00
@LxRuzx 上一个版本用的是大头像,这次想做点改变,让头像主要起一个点缀的作用,稍微降低了视觉重心
jkjoke
    8
jkjoke  
OP
   2018-11-13 11:26:58 +08:00   ❤️ 1
@SharkIng 嗯 是的
U2Fsd
    9
U2Fsd  
   2018-11-13 11:27:50 +08:00


配合 V2EX Plus 这款 Chrome 插件使用时 样式会出现问题。希望能修复下谢谢~
chaodada
    10
chaodada  
   2018-11-13 11:28:36 +08:00   ❤️ 1
超级喜欢,不错,太白了 。。。有点刺眼。。。
jkjoke
    11
jkjoke  
OP
   2018-11-13 11:29:11 +08:00
@U2Fsd 好的 我看一下
chaodada
    12
chaodada  
   2018-11-13 11:29:27 +08:00
9 楼的大佬问题我也遇到了
gaobh
    13
gaobh  
   2018-11-13 11:31:44 +08:00   ❤️ 1
能不能灰一点,刺眼
kindjeff
    14
kindjeff  
   2018-11-13 11:33:21 +08:00   ❤️ 1
挺好看的
kindjeff
    15
kindjeff  
   2018-11-13 11:33:32 +08:00
:doge:
jkjoke
    16
jkjoke  
OP
   2018-11-13 11:39:23 +08:00   ❤️ 1
@U2Fsd #9
@chaodada #10 头像的问题修复了,Ctrl+F5 刷新下缓存,稍微调暗了背景色
o00o
    17
o00o  
   2018-11-13 11:40:36 +08:00   ❤️ 2
目前的就挺好,只是之前纠结右侧进度条改了一点
#Wrapper {
background-color: #f2eee8;
background-image: none;
}

#Tabs {
padding: 0 !important;
}

#Tabs a.tab_current {
border-color: #80a8cc !important;
background-color: #f5f5f5 !important;
color: #000 !important;
line-height: 46px;
height: 46px;
}

#Tabs a.tab,#Tabs a.tab_current {
width: 50px;
text-align: center;
line-height: 46px !important;
display: inline-block;
margin-right: 0 !important;
padding: 0!important;
border-radius: 0 !important;
border-bottom: 2px solid transparent;
-webkit-transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
-moz-transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

#Tabs a.tab:hover {
border-color: #80a8cc;
}

#Top {
background-image: none;
background-color: rgba(255, 251, 245, 0.39);
border-bottom: 1px solid #e2e2e2;
}

.box {
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e2e2;
border-radius: 2px;
}

img.avatar {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

a.top {
line-height: 13px;
padding: 5px 3px;
border-radius: 3px;
color: #555;
}

a.top:hover {
line-height: 13px;
padding: 5px 3px;
border-radius: 3px;
color: #000;
}

.button {
background-image: none !important;
}

a.balance_area:link, a.balance_area:visited, .balance_area {
background: #eee !important;
}

td h2 {
border-bottom: none;
}

.mll:focus, .mle:focus, .sl:focus, .ml:focus, .sll:focus {
-webkit-box-shadow: 0 0 0 3px #f2eee8;
-moz-box-shadow: 0 0 0 3px #f2eee8;
box-shadow: 0 0 0 3px #f2eee8;
}

.topic_buttons {
background: #fff;
border-bottom: 1px solid #e2e2e2;
}

a.tb:hover {
background-color: #f0f0f0;
}

#Rightbar > div:nth-child(2) > div:nth-child(1),#Rightbar > div:nth-child(2) > div:nth-child(2)
{border-bottom: 0px; }
bolide2005
    18
bolide2005  
   2018-11-13 11:58:52 +08:00   ❤️ 1
支持!
liuxey
    19
liuxey  
   2018-11-13 12:03:38 +08:00   ❤️ 1
试了下挺好看 ,不过还是习惯了原版
jkjoke
    20
jkjoke  
OP
   2018-11-13 12:20:50 +08:00
@o00o #17 我觉得进度条那里是可以优化下的,介意使用你的部分样式吗?
ceoimon
    21
ceoimon  
   2018-11-13 12:29:13 +08:00   ❤️ 1
其实大部分的分割线都是不必要的,不妨试试:

#Main .box .cell,
#Rightbar .box .cell {
border-bottom: 0;
}
jkjoke
    22
jkjoke  
OP
   2018-11-13 12:33:04 +08:00
@ceoimon #21 右边舒服了,感谢建议,主题列表的话有分割线比较一点
lunatic5
    23
lunatic5  
   2018-11-13 13:39:33 +08:00   ❤️ 1
7654
    24
7654  
   2018-11-13 13:47:23 +08:00
以前一位 V 友发的,
* {
font-family:Arial;
}

#Top {
background-color: #47536B;
border-bottom:none;
}
#Bottom {
background-color: #2C3E50;
}
#Wrapper {
background-color: #e3ecfd;
padding-top: 20px;
background-image:none;
}
a.top:link, a.top:visited {
color: #E1E1E1;
font-size: 12px;
border-radius: 5px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
a.top:hover {
color:#FFF;
}
a.tab:hover {
background-color: rgba(0, 0, 0, 0.5);
color:#FFF;
-webkit-transition: all .1s;
-moz-transition: all .1s;
-o-transition: all .1s;
transition: all .1s;
}

.box {

border-radius: 4px;
min-height: 20px;
margin-bottom:20px;
box-shadow: none;
border-bottom: 1px solid rgba(255, 255, 255, 0);
}
.topic_buttons {
background: #DEDEDE;
}
a.item_node {
border: 1px solid #92B7DD;
color: #92B7DC;
padding: 5px 6px 3px 6px;
border-radius: 3px;
margin-left:3px;
margin-right:3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
a.item_node:hover {
border:1px solid #2C3E50;
color:#555;
}
img.avatar {
width: 50px;
height: 50px;
max-width: 50px !important;
max-height: 50px !important;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid transparent;
-webkit-transition: .4s;
-moz-transition: .4s;
transition: .4s;
opacity: 0.8;
}
img.avatar:hover {
opacity: 1;
}
.topic_content, .reply_content {

}
/*右侧头像*/
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(1) {
text-align:center;
}
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(2),
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(3) {
display:none;
}
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(1) img.avatar {
width: 80px;
height: 80px;
max-width: 80px !important;
max-height: 80px !important;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin-top: 15px;
margin-right: 10px;
}
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(3) {
padding-bottom: 15px;
padding-top: 15px;
}
#Rightbar .box div:nth-child(1) {
border-bottom:0px;
}
/**/
.normal.button {
background-color: transparent;
color: #47536B;
text-shadow:none;
box-shadow: none;
background-image: none;
border: 1px solid #47536B;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.normal.button:hover {
background-color: #47536B;
color: #fff;
text-shadow:none;
box-shadow: none;
background-image: none;
border: 1px solid #000;
}
#reply_content {
box-shadow:none;
max-width: 650px;
border-color: rgba(187, 187, 187, 0.5);
border-width: 2px;
border-radius: 5px;
}
.mll:focus {
border: 2px solid #31b0d5;
box-shadow: none;
outline: none;
}
/**Money**/
a.balance_area:link, a.balance_area:visited, .balance_area {
background: -webkit-linear-gradient(top, #E9E9E9 0%,#E2E2E2 100%);
}
kslr
    25
kslr  
   2018-11-13 14:11:18 +08:00   ❤️ 1
头像非常重要
jkjoke
    26
jkjoke  
OP
   2018-11-13 14:16:47 +08:00
@kslr #25 稍微调大一点
Kakarrot
    27
Kakarrot  
   2018-11-13 14:18:08 +08:00
列表头像大点 行间距离小点
newbieRenew
    28
newbieRenew  
   2018-11-13 14:21:58 +08:00
用 stylebot 解决吧
o00o
    29
o00o  
   2018-11-13 14:32:15 +08:00
@jkjoke 可以
Steps
    30
Steps  
   2018-11-13 14:40:02 +08:00
就算是复制 css 到框里,也是要闪一下!
chinafeng
    31
chinafeng  
   2018-11-13 14:45:41 +08:00
更喜欢以下这两个主题,虽然我没感觉出什么太大的区别
https://github.com/zdhxiong/v2ex-material-theme
https://github.com/zdhxiong/v2ex-material-theme2
jkjoke
    32
jkjoke  
OP
   2018-11-13 14:53:35 +08:00
@Steps #30 自定义样式这里的加载顺序靠后,所以网络稍慢的时候会感觉到页面有变化
iqav
    33
iqav  
   2018-11-13 14:56:27 +08:00
我喜欢你下面配图 “在使用中有任何问题,欢迎反馈给我,可以在下面回复交流”那张图的色彩方案,暗暗的
Stlin
    34
Stlin  
   2018-11-13 15:00:25 +08:00   ❤️ 1
jkjoke
    35
jkjoke  
OP
   2018-11-13 15:06:39 +08:00
@iqav #33 VSCode 的 Atom One Dark 主题
9simpsons
    36
9simpsons  
   2018-11-13 15:43:40 +08:00   ❤️ 1
挺好的主题,看起来简洁漂亮,有两个地方能不能改进一下啊,1. 底色有点白,看着晃眼 2. 列表的行距是不是有点大了?感觉浏览器来比较累。。。1366*768 的低分屏路过。。。
jkjoke
    37
jkjoke  
OP
   2018-11-13 15:55:23 +08:00
@9simpsons #36 谢谢建议,考虑不周了
chaodada
    38
chaodada  
   2018-11-13 16:06:34 +08:00 via iPhone   ❤️ 1
@jkjoke 3q,表示非常喜欢😘
sh1t0nu
    39
sh1t0nu  
   2018-11-13 16:22:07 +08:00   ❤️ 1
可以可以!
ifreego
    40
ifreego  
   2018-11-13 16:30:33 +08:00   ❤️ 1
切换标签会闪烁 估计和每次切换重新加载 css 有关
jkjoke
    41
jkjoke  
OP
   2018-11-13 16:49:40 +08:00
@ifreego #40 这个倒没发现
stepfensl
    42
stepfensl  
   2018-11-13 17:07:13 +08:00   ❤️ 1
支持一下。。
ucmp0001
    43
ucmp0001  
   2018-11-13 17:20:02 +08:00   ❤️ 1
想问一下有没有深色模式的主题,太白了看久了眼睛痛
@jkjoke
@iqav
27149
    44
27149  
   2018-11-13 17:29:40 +08:00   ❤️ 1
同,做的很漂亮,就是有点累眼。。。
jkjoke
    45
jkjoke  
OP
   2018-11-13 17:30:10 +08:00
@ucmp0001 #43 没有喔 抱歉
indexq
    46
indexq  
   2018-11-13 17:30:21 +08:00   ❤️ 1
用了下感觉不错,感谢分享
27149
    47
27149  
   2018-11-13 18:12:59 +08:00   ❤️ 1
提个小意见,楼主的主题下多了几行空白。补充主题下面也是。
Mark24
    48
Mark24  
   2018-11-13 19:10:53 +08:00   ❤️ 1
很好看啊

但是很奇怪,为什么会闪下
unidentifiedme
    49
unidentifiedme  
   2018-11-13 19:36:52 +08:00   ❤️ 1
挺不错的,就是看久了还是太亮了
unidentifiedme
    50
unidentifiedme  
   2018-11-13 19:37:17 +08:00
Love4Taylor
    51
Love4Taylor  
   2018-11-13 20:37:27 +08:00   ❤️ 1
"目前尚无回复" 那里有问题
jkjoke
    52
jkjoke  
OP
   2018-11-13 22:17:55 +08:00
@ucmp0001 #43 暗色主题已经添加到主题上面啦
@Love4Taylor #51 已修复
jkjoke
    53
jkjoke  
OP
   2018-11-13 22:30:35 +08:00
@Mark24 #48 import 样式进来需要等页面加载完成才能生效,所以会有闪一下的感觉
vincentxue
    54
vincentxue  
   2018-11-13 23:43:09 +08:00   ❤️ 1
感谢。夜间模式已经用上了。
zts1993
    55
zts1993  
   2018-11-13 23:49:50 +08:00   ❤️ 1
夜间模式会闪,不过好像是自定义 css 问题。挺不错的
SingeeKing
    56
SingeeKing  
   2018-11-13 23:49:57 +08:00   ❤️ 1
右侧 bar 的「图片库」有点违和
Tumblr
    57
Tumblr  
   2018-11-14 00:00:17 +08:00   ❤️ 1
非常棒!感觉比原生主题舒服。
如果颜色可以再柔和一些,就更好了
jkjoke
    58
jkjoke  
OP
   2018-11-14 00:12:31 +08:00
@SingeeKing 可以截个图吗?可能是在某些节点才出现
mytsing520
    59
mytsing520  
   2018-11-14 00:57:44 +08:00
@Livid 进来看看如何
phoenixlzx
    60
phoenixlzx  
   2018-11-14 01:24:12 +08:00   ❤️ 1
好顶赞... 希望 @Livid 采纳。
JayaOcean
    61
JayaOcean  
   2018-11-14 03:06:43 +08:00   ❤️ 1
好看(♥∀♥)
kslr
    62
kslr  
   2018-11-14 07:07:44 +08:00   ❤️ 1
建议不要改掉原来的数据显示,仅仅调整样式。
mortal
    63
mortal  
   2018-11-14 08:21:27 +08:00   ❤️ 1
暗色调里,我收藏的节点还是浅色的~
shingoxray
    64
shingoxray  
   2018-11-14 09:03:05 +08:00   ❤️ 1
总要闪一下挺恼人的。暗色首页「我收藏的节点」有问题。
austinChan
    65
austinChan  
   2018-11-14 09:19:59 +08:00   ❤️ 1
正文字体再大一点就更好了
UnPace
    66
UnPace  
   2018-11-14 09:22:11 +08:00   ❤️ 1
@Livid V 站的自定义 CSS 加载页面时会闪一下..
jkjoke
    67
jkjoke  
OP
   2018-11-14 09:32:21 +08:00   ❤️ 1
@mortal #63 @shingoxray #64 收藏节点 ok,Ctrl+F5 刷新下
@kslr #62 想显示隐藏的主题信息,在自定义 css 的 @import 下面加一行.topic_info {display: block;!important}
chenset
    68
chenset  
   2018-11-14 10:01:55 +08:00   ❤️ 1
可惜了, 加载会闪
xiaoluoboding
    69
xiaoluoboding  
   2018-11-14 10:08:39 +08:00   ❤️ 1
确实加载会闪
xiaonec
    70
xiaonec  
   2018-11-14 10:10:26 +08:00   ❤️ 1
:doge: 看起来还不错。
killerv
    71
killerv  
   2018-11-14 10:50:37 +08:00   ❤️ 1
很不错,已经用了
jkjoke
    72
jkjoke  
OP
   2018-11-14 10:50:39 +08:00   ❤️ 1
@chenset #68 @xiaoluoboding #69 @zts1993 #55 @Mark24 #48 @dingdangnao #1
主题添加了闪一下的解决办法
TypeNANA
    73
TypeNANA  
   2018-11-14 11:00:44 +08:00   ❤️ 1
用起来很舒服 感谢楼主!
TypeNANA
    74
TypeNANA  
   2018-11-14 11:04:02 +08:00
顺带一提和 V2EXcellent 的油猴脚本有点冲突,头像会盖掉后面的字_(:3 」∠)_
#Main .cell table tr td:nth-child(3),#Main .cell table tr td:nth-child(4){min-height:60px;padding-top:8px}
这里面面加上 padding-left:8px 就好了
erlking
    75
erlking  
   2018-11-14 11:08:30 +08:00 via iPhone   ❤️ 1
手机什么时候能支持?
unidentifiedme
    76
unidentifiedme  
   2018-11-14 11:09:02 +08:00
@jkjoke #72 好棒!
有一个小小的提议,Stylish 的 CSS 是可以自定义一些变量的,是否可以把这个 CSS 做成遵循 base16 这个结构的样子。也就是说,CSS 中不直接指定颜色,而是指定 base16 中的一个颜色变量,然后直接可以选择任何一款遵循 base16 的配色了。

http://chriskempson.com/projects/base16/
fakeJas0n
    77
fakeJas0n  
   2018-11-14 11:09:24 +08:00   ❤️ 1
黑色版不错!
cencents
    78
cencents  
   2018-11-14 11:09:37 +08:00   ❤️ 1
黑色很舒服啊~ 感谢啦~
HanSonJ
    79
HanSonJ  
   2018-11-14 11:11:29 +08:00   ❤️ 1
V2 PLUS 的楼主回复背景色没了
jkjoke
    80
jkjoke  
OP
   2018-11-14 11:16:06 +08:00
@unidentifiedme #76 Stylish 好像玩法挺多的,回去研究下
@HanSonJ #79 插件加样式的方式比较生硬,没法单独调整背景色,所以只能统一了
mfu
    81
mfu  
   2018-11-14 11:16:33 +08:00   ❤️ 1
黑色主题相当棒。只不过右侧的滚动条不太显眼,一时可能找不到。
jkjoke
    82
jkjoke  
OP
   2018-11-14 11:16:42 +08:00
@TypeNANA #74 应该可以了
CSGO
    83
CSGO  
   2018-11-14 11:17:23 +08:00   ❤️ 1
自己修改了一些。适合自己。

@import url("//wangyifang.com/share/v2ex-dark/v2ex-dark.css");
jkjoke
    84
jkjoke  
OP
   2018-11-14 11:20:24 +08:00
@mfu #81 感谢建议,修改了
aino
    85
aino  
   2018-11-14 11:43:12 +08:00
全部都用了一遍很不错 不过我还是选择用原生的
CSGO
    86
CSGO  
   2018-11-14 11:52:13 +08:00   ❤️ 1
在 1080p 的 Macos 系统上,还是加粗加亮看的清楚。

https://imgurl.org/temp/1811/ad655d7121610948.png
jkjoke
    87
jkjoke  
OP
   2018-11-14 11:53:37 +08:00
@CSGO #86 想把地址栏也调黑了
Mark24
    88
Mark24  
   2018-11-14 12:21:38 +08:00
@jkjoke 用了插件,感觉发现了新大陆
jkjoke
    89
jkjoke  
OP
   2018-11-14 12:23:01 +08:00
@Mark24 #88 彻底舒服了
dingdangnao
    90
dingdangnao  
   2018-11-14 13:56:03 +08:00   ❤️ 1
自定义 customize 了一下,
顶部 Top 栏借鉴了另外一个 Material 风格主题的,fix 在页面上面。
@import url("://cdn.dingdangnao.com/css/v2exCustom.css");
RealGM
    91
RealGM  
   2018-11-14 21:33:28 +08:00   ❤️ 1
非常喜欢 谢谢哈!
maroon5
    92
maroon5  
   2018-11-15 13:45:37 +08:00   ❤️ 1
用了 Stylish,暗色的很舒服不闪了
clearCode0915
    93
clearCode0915  
   2018-11-15 15:15:46 +08:00   ❤️ 1
真香
jinzhe
    94
jinzhe  
   2018-11-15 15:21:53 +08:00
lada05
    95
lada05  
   2018-11-16 01:08:24 +08:00   ❤️ 1
支持一下!真的好看!
lada04
    96
lada04  
   2018-11-16 03:11:33 +08:00   ❤️ 1
用户主页的回复列表,现在标题和内容,都是同一种背景色,很难看清楚谁是谁,能不能优化一下,例如用两种灰度区分下,至少?
https://www.v2ex.com/member/jkjoke
ddup
    97
ddup  
   2018-11-16 09:20:15 +08:00   ❤️ 1
好看多了 我去。
jkjoke
    98
jkjoke  
OP
   2018-11-16 09:21:40 +08:00
@lada04 #96 感谢反馈,自定义 css 和插件主题都更新了
djyde
    99
djyde  
   2018-11-16 17:40:15 +08:00
可以放 Github 吗
jkjoke
    100
jkjoke  
OP
   2018-11-16 18:08:57 +08:00
@djyde #99 刚创建了一个,不过不是很懂用这个
https://github.com/simonlinplus/V2EX-Flat
1  2  
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2690 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 30ms · UTC 08:19 · PVG 16:19 · LAX 00:19 · JFK 03:19
Developed with CodeLauncher
♥ Do have faith in what you're doing.