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

爱意满满的作品展示区。

This topic created in 2913 days ago, the information mentioned may be changed or developed.

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

Supplement 1 · Nov 13, 2018

谢谢大家的留言，感觉暗色调版本的需求也挺多的，等完善了再提供给诸位

Supplement 2 · Nov 13, 2018

现在暗色调版也有咯！

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

dark

Supplement 3 · Nov 14, 2018

吼吼吼，找到闪一下的解决办法了
不过需要装一个 Stylish 插件：）

样式地址：
https://userstyles.org/styles/165971/v2ex
https://userstyles.org/styles/165969/v2ex

Supplement 4 · Jun 7, 2019

现在域名改了可以用这个，不过还是建议用插件：）

https://wuyu.design/css/v2ex-dark.css

123 replies • 2020-03-18 10:41:01 +08:00

1 2

❮

❯

dingdangnao

Nov 13, 2018

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

LeoWA

Nov 13, 2018

不错的样子

goodryb

Nov 13, 2018

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

LxRuzx

Nov 13, 2018

头像是不是太小了一些

DXpro

Nov 13, 2018

舒服了....

SharkIng

Nov 13, 2018

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

jkjoke

Nov 13, 2018

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

jkjoke

Nov 13, 2018

@SharkIng 嗯是的

U2Fsd

Nov 13, 2018

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

chaodada

Nov 13, 2018

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

jkjoke

Nov 13, 2018

@U2Fsd 好的我看一下

chaodada

Nov 13, 2018

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

Solix

Nov 13, 2018

能不能灰一点，刺眼

kindjeff

Nov 13, 2018

挺好看的

kindjeff

Nov 13, 2018

:doge:

jkjoke

Nov 13, 2018

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

o00o

Nov 13, 2018

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

Nov 13, 2018

支持！

auin

Nov 13, 2018

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

jkjoke

Nov 13, 2018

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

ceoimon

Nov 13, 2018

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

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

jkjoke

Nov 13, 2018

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

marvin520

Nov 13, 2018

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

7654

Nov 13, 2018

以前一位 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

Nov 13, 2018

头像非常重要

jkjoke

Nov 13, 2018

@kslr #25 稍微调大一点

Kakarrot

Nov 13, 2018

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

newbieRenew

Nov 13, 2018

用 stylebot 解决吧

o00o

Nov 13, 2018

@jkjoke 可以

Steps

Nov 13, 2018

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

akafeng

Nov 13, 2018

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

jkjoke

Nov 13, 2018

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

iqav

Nov 13, 2018

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

Stlin

Nov 13, 2018

jkjoke

Nov 13, 2018

@iqav #33 VSCode 的 Atom One Dark 主题

9simpsons

Nov 13, 2018

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

jkjoke

Nov 13, 2018

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

chaodada

Nov 13, 2018 via iPhone

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

sh1t0nu

Nov 13, 2018

可以可以！

ifreego

Nov 13, 2018

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

jkjoke

Nov 13, 2018

@ifreego #40 这个倒没发现

stepfensl

Nov 13, 2018

支持一下。。

ZhouAI

Nov 13, 2018

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

27149

Nov 13, 2018

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

jkjoke

Nov 13, 2018

@ucmp0001 #43 没有喔抱歉

indexq

Nov 13, 2018

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

27149

Nov 13, 2018

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

Mark24

Nov 13, 2018

很好看啊

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

unidentifiedme

Nov 13, 2018

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

unidentifiedme

Nov 13, 2018

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

love4taylor

Nov 13, 2018

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

jkjoke

Nov 13, 2018

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

jkjoke

Nov 13, 2018

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

vincentxue

Nov 13, 2018

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

zts1993

Nov 13, 2018

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

SingeeKing

Nov 13, 2018

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

Tumblr

Nov 14, 2018

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

jkjoke

Nov 14, 2018

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

mytsing520

PRO

Nov 14, 2018

@Livid 进来看看如何

phoenixlzx

Nov 14, 2018

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

JayaOcean

Nov 14, 2018

好看(♥∀♥)

kslr

Nov 14, 2018

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

mortal

Nov 14, 2018

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

shingoxray

Nov 14, 2018

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

austinChan

Nov 14, 2018

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

UnPace

Nov 14, 2018

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

jkjoke

Nov 14, 2018

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

chenset

Nov 14, 2018

可惜了, 加载会闪

xiaoluoboding

Nov 14, 2018

确实加载会闪

xiaonec

Nov 14, 2018

:doge: 看起来还不错。

killerv

Nov 14, 2018

很不错，已经用了

jkjoke

Nov 14, 2018

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

TypeNANA

Nov 14, 2018

用起来很舒服感谢楼主！

TypeNANA

Nov 14, 2018

顺带一提和 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

Nov 14, 2018 via iPhone

手机什么时候能支持？

unidentifiedme

Nov 14, 2018

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

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