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

[jkjoke]

LESS IS MORE

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

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

Code

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

• 自适应 http/https

How to use

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

What's change

Qustions

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

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

现在暗色调版也有咯！

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

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

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

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

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

[dingdangnao]

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

[Mrun]

不错的样子

[goodryb]

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

[LxRuzx]

头像是不是太小了一些

[DXpro]

舒服了....

[SharkIng]

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

[jkjoke]

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

[jkjoke]

@SharkIng 嗯 是的

[U2Fsd]

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

[chaodada]

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

[jkjoke]

@U2Fsd 好的 我看一下

[chaodada]

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

[gaobh]

能不能灰一点，刺眼

[kindjeff]

挺好看的

[kindjeff]

:doge:

[jkjoke]

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

[o00o]

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

支持！

[liuxey]

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

[jkjoke]

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

[ceoimon]

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

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

[jkjoke]

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

[lunatic5]

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

[7654]

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

头像非常重要

[jkjoke]

@kslr #25 稍微调大一点

[Kakarrot]

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

[newbieRenew]

用 stylebot 解决吧

[o00o]

@jkjoke 可以

[Steps]

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

[chinafeng]

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

[jkjoke]

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

[iqav]

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

[Stlin]

赞

[jkjoke]

@iqav #33 VSCode 的 Atom One Dark 主题

[9simpsons]

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

[jkjoke]

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

[chaodada]

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

[sh1t0nu]

可以可以！

[ifreego]

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

[jkjoke]

@ifreego #40 这个倒没发现

[stepfensl]

支持一下。。

[ucmp0001]

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

[27149]

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

[jkjoke]

@ucmp0001 #43 没有喔 抱歉

[indexq]

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

[27149]

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

[Mark24]

很好看啊

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

[unidentifiedme]

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

[unidentifiedme]

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

[Love4Taylor]

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

[jkjoke]

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

[jkjoke]

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

[vincentxue]

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

[zts1993]

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

[SingeeKing]

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

[Tumblr]

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

[jkjoke]

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

[mytsing520]

@Livid 进来看看如何

[phoenixlzx]

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

[JayaOcean]

好看(♥∀♥)

[kslr]

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

[mortal]

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

[shingoxray]

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

[austinChan]

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

[UnPace]

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

[jkjoke]

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

[chenset]

可惜了, 加载会闪

[xiaoluoboding]

确实加载会闪

[xiaonec]

:doge: 看起来还不错。

[killerv]

很不错，已经用了

[jkjoke]

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

[TypeNANA]

用起来很舒服 感谢楼主！

[TypeNANA]

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

手机什么时候能支持？

[unidentifiedme]

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

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

[fakeJas0n]

黑色版不错！

[cencents]

黑色很舒服啊~ 感谢啦~

[HanSonJ]

V2 PLUS 的楼主回复背景色没了

[jkjoke]

@unidentifiedme #76 Stylish 好像玩法挺多的，回去研究下
@HanSonJ #79 插件加样式的方式比较生硬，没法单独调整背景色，所以只能统一了

[mfu]

黑色主题相当棒。只不过右侧的滚动条不太显眼，一时可能找不到。

[jkjoke]

@TypeNANA #74 应该可以了

[CSGO]

自己修改了一些。适合自己。

@import url("//wangyifang.com/share/v2ex-dark/v2ex-dark.css");

[jkjoke]

@mfu #81 感谢建议，修改了

[aino]

全部都用了一遍很不错 不过我还是选择用原生的

[CSGO]

在 1080p 的 Macos 系统上，还是加粗加亮看的清楚。

https://imgurl.org/temp/1811/ad655d7121610948.png

[jkjoke]

@CSGO #86 想把地址栏也调黑了

[Mark24]

@jkjoke 用了插件，感觉发现了新大陆

[jkjoke]

@Mark24 #88 彻底舒服了

[dingdangnao]

自定义 customize 了一下，
顶部 Top 栏借鉴了另外一个 Material 风格主题的，fix 在页面上面。
@import url("://cdn.dingdangnao.com/css/v2exCustom.css");

[RealGM]

非常喜欢 谢谢哈！

[maroon5]

用了 Stylish，暗色的很舒服不闪了

[clearCode0915]

真香

[jinzhe]

https://www.v2ex.com/t/417761#reply19

[lada05]

支持一下！真的好看！

[lada04]

用户主页的回复列表，现在标题和内容，都是同一种背景色，很难看清楚谁是谁，能不能优化一下，例如用两种灰度区分下，至少？
https://www.v2ex.com/member/jkjoke

[ddup]

好看多了 我去。

[jkjoke]

@lada04 #96 感谢反馈，自定义 css 和插件主题都更新了

[djyde]

可以放 Github 吗

[jkjoke]

@djyde #99 刚创建了一个，不过不是很懂用这个
https://github.com/simonlinplus/V2EX-Flat