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

V2EX = way to explore

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

现在注册

已注册用户请登录

爱意满满的作品展示区。

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

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

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

第 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

2018-11-13 11:23:31 +08:00

用自定义 css 的时候总会闪一下。。

Mrun

2018-11-13 11:23:52 +08:00

不错的样子

goodryb

2018-11-13 11:24:33 +08:00

白色有点刺眼，或者是错觉？

LxRuzx

2018-11-13 11:24:50 +08:00

头像是不是太小了一些

DXpro

2018-11-13 11:25:08 +08:00

舒服了....

SharkIng

2018-11-13 11:26:38 +08:00

最后回复部分没有了，不知道是故意取掉的还是？

jkjoke

2018-11-13 11:26:44 +08:00

@LxRuzx 上一个版本用的是大头像，这次想做点改变，让头像主要起一个点缀的作用，稍微降低了视觉重心

jkjoke

2018-11-13 11:26:58 +08:00

@SharkIng 嗯是的

U2Fsd

2018-11-13 11:27:50 +08:00

配合 V2EX Plus 这款 Chrome 插件使用时样式会出现问题。希望能修复下谢谢～

chaodada

2018-11-13 11:28:36 +08:00

超级喜欢，不错，太白了。。。有点刺眼。。。

jkjoke

2018-11-13 11:29:11 +08:00

@U2Fsd 好的我看一下

chaodada

2018-11-13 11:29:27 +08:00

9 楼的大佬问题我也遇到了

gaobh

2018-11-13 11:31:44 +08:00

能不能灰一点，刺眼

kindjeff

2018-11-13 11:33:21 +08:00

挺好看的

kindjeff

2018-11-13 11:33:32 +08:00

:doge:

jkjoke

2018-11-13 11:39:23 +08:00

@U2Fsd #9
@chaodada #10 头像的问题修复了，Ctrl+F5 刷新下缓存，稍微调暗了背景色

o00o

2018-11-13 11:40:36 +08:00

目前的就挺好，只是之前纠结右侧进度条改了一点
#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

2018-11-13 11:58:52 +08:00

支持！

liuxey

2018-11-13 12:03:38 +08:00

试了下挺好看，不过还是习惯了原版

jkjoke

2018-11-13 12:20:50 +08:00

@o00o #17 我觉得进度条那里是可以优化下的，介意使用你的部分样式吗？

ceoimon

2018-11-13 12:29:13 +08:00

其实大部分的分割线都是不必要的，不妨试试：

#Main .box .cell,
#Rightbar .box .cell {
border-bottom: 0;
}

jkjoke

2018-11-13 12:33:04 +08:00

@ceoimon #21 右边舒服了，感谢建议，主题列表的话有分割线比较一点

lunatic5

2018-11-13 13:39:33 +08:00

https://i.loli.net/2018/11/13/5bea63816a56a.png 看着确实挺舒服的

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

2018-11-13 14:11:18 +08:00

头像非常重要

jkjoke

2018-11-13 14:16:47 +08:00

@kslr #25 稍微调大一点

Kakarrot

2018-11-13 14:18:08 +08:00

列表头像大点行间距离小点

newbieRenew

2018-11-13 14:21:58 +08:00

用 stylebot 解决吧

o00o

2018-11-13 14:32:15 +08:00

@jkjoke 可以

Steps

2018-11-13 14:40:02 +08:00

就算是复制 css 到框里，也是要闪一下！

chinafeng

2018-11-13 14:45:41 +08:00

更喜欢以下这两个主题，虽然我没感觉出什么太大的区别
https://github.com/zdhxiong/v2ex-material-theme
https://github.com/zdhxiong/v2ex-material-theme2

jkjoke

2018-11-13 14:53:35 +08:00

@Steps #30 自定义样式这里的加载顺序靠后，所以网络稍慢的时候会感觉到页面有变化

iqav

2018-11-13 14:56:27 +08:00

我喜欢你下面配图 “在使用中有任何问题，欢迎反馈给我，可以在下面回复交流”那张图的色彩方案，暗暗的

Stlin

2018-11-13 15:00:25 +08:00

jkjoke

2018-11-13 15:06:39 +08:00

@iqav #33 VSCode 的 Atom One Dark 主题

9simpsons

2018-11-13 15:43:40 +08:00

挺好的主题，看起来简洁漂亮，有两个地方能不能改进一下啊，1. 底色有点白，看着晃眼 2. 列表的行距是不是有点大了？感觉浏览器来比较累。。。1366*768 的低分屏路过。。。

jkjoke

2018-11-13 15:55:23 +08:00

@9simpsons #36 谢谢建议，考虑不周了

chaodada

2018-11-13 16:06:34 +08:00 via iPhone

@jkjoke 3q，表示非常喜欢😘

sh1t0nu

2018-11-13 16:22:07 +08:00

可以可以！

ifreego

2018-11-13 16:30:33 +08:00

切换标签会闪烁估计和每次切换重新加载 css 有关

jkjoke

2018-11-13 16:49:40 +08:00

@ifreego #40 这个倒没发现

stepfensl

2018-11-13 17:07:13 +08:00

支持一下。。

ucmp0001

2018-11-13 17:20:02 +08:00

想问一下有没有深色模式的主题，太白了看久了眼睛痛
@jkjoke
@iqav

27149

2018-11-13 17:29:40 +08:00

同，做的很漂亮，就是有点累眼。。。

jkjoke

2018-11-13 17:30:10 +08:00

@ucmp0001 #43 没有喔抱歉

indexq

2018-11-13 17:30:21 +08:00

用了下感觉不错，感谢分享

27149

2018-11-13 18:12:59 +08:00

提个小意见，楼主的主题下多了几行空白。补充主题下面也是。

Mark24

2018-11-13 19:10:53 +08:00

很好看啊

但是很奇怪，为什么会闪下

unidentifiedme

2018-11-13 19:36:52 +08:00

挺不错的，就是看久了还是太亮了

unidentifiedme

2018-11-13 19:37:17 +08:00

@unidentifiedme 忘了补图
https://i.loli.net/2018/11/13/5beab7397526a.png

Love4Taylor

2018-11-13 20:37:27 +08:00

"目前尚无回复" 那里有问题

jkjoke

2018-11-13 22:17:55 +08:00

@ucmp0001 #43 暗色主题已经添加到主题上面啦
@Love4Taylor #51 已修复

jkjoke

2018-11-13 22:30:35 +08:00

@Mark24 #48 import 样式进来需要等页面加载完成才能生效，所以会有闪一下的感觉

vincentxue

2018-11-13 23:43:09 +08:00

感谢。夜间模式已经用上了。

zts1993

2018-11-13 23:49:50 +08:00

夜间模式会闪，不过好像是自定义 css 问题。挺不错的

SingeeKing

2018-11-13 23:49:57 +08:00

右侧 bar 的「图片库」有点违和

Tumblr

2018-11-14 00:00:17 +08:00

非常棒！感觉比原生主题舒服。
如果颜色可以再柔和一些，就更好了

jkjoke

2018-11-14 00:12:31 +08:00

@SingeeKing 可以截个图吗？可能是在某些节点才出现

mytsing520

2018-11-14 00:57:44 +08:00

@Livid 进来看看如何

phoenixlzx

2018-11-14 01:24:12 +08:00

好顶赞... 希望 @Livid 采纳。

JayaOcean

2018-11-14 03:06:43 +08:00

好看(♥∀♥)

kslr

2018-11-14 07:07:44 +08:00

建议不要改掉原来的数据显示，仅仅调整样式。

mortal

2018-11-14 08:21:27 +08:00

暗色调里，我收藏的节点还是浅色的~

shingoxray

2018-11-14 09:03:05 +08:00

总要闪一下挺恼人的。暗色首页「我收藏的节点」有问题。

austinChan

2018-11-14 09:19:59 +08:00

正文字体再大一点就更好了

UnPace

2018-11-14 09:22:11 +08:00

@Livid V 站的自定义 CSS 加载页面时会闪一下..

jkjoke

2018-11-14 09:32:21 +08:00

@mortal #63 @shingoxray #64 收藏节点 ok，Ctrl+F5 刷新下
@kslr #62 想显示隐藏的主题信息，在自定义 css 的 @import 下面加一行.topic_info {display: block;!important}

chenset

2018-11-14 10:01:55 +08:00

可惜了, 加载会闪

xiaoluoboding

2018-11-14 10:08:39 +08:00

确实加载会闪

xiaonec

2018-11-14 10:10:26 +08:00

:doge: 看起来还不错。

killerv

2018-11-14 10:50:37 +08:00

很不错，已经用了

jkjoke

2018-11-14 10:50:39 +08:00

@chenset #68 @xiaoluoboding #69 @zts1993 #55 @Mark24 #48 @dingdangnao #1
主题添加了闪一下的解决办法

TypeNANA

2018-11-14 11:00:44 +08:00

用起来很舒服感谢楼主！

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

2018-11-14 11:08:30 +08:00 via iPhone

手机什么时候能支持？

unidentifiedme

2018-11-14 11:09:02 +08:00

@jkjoke #72 好棒！
有一个小小的提议，Stylish 的 CSS 是可以自定义一些变量的，是否可以把这个 CSS 做成遵循 base16 这个结构的样子。也就是说，CSS 中不直接指定颜色，而是指定 base16 中的一个颜色变量，然后直接可以选择任何一款遵循 base16 的配色了。

http://chriskempson.com/projects/base16/