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

v2ex 主题样式版本更新,支持亮色与暗色🌙☀️,支持自定义背景。

  •  6
     
  •   viewweiwu ·
    viewweiwu · 2021-12-15 17:53:38 +08:00 · 5860 次点击
    这是一个创建于 834 天前的主题,其中的信息可能已经有所发展或是发生改变。

    参考了《知乎》、《 antd 》、《掘金》 的配色和布局,在保证显示内容完整的前提下,美化了整站的样式。

    代码

    当前版本:1.4

    github: https://github.com/viewweiwu/v2ex-zhihu-theme

    特性

    1. 调整所有页面的间距、字体大小、边框颜色、字体颜色
    2. 调整主题色调为蓝色
    3. 调整输入框、按钮、选择框,的大小、背景色、边框颜色、圆角
    4. 去除马赛克背景,可自由选择背景图片添加
    5. 详情页面将回到顶部放在右下角
    6. 在使用了 v2ex-pro(油猴扩展脚本) 的前提下,优化楼中楼显示。

    v2ex-pro 楼中楼优化

    预览

    设置方法

    设置 > 自定义 CSS > 粘贴下面这段代码

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

    自定义背景图片(可选)

    可自行替换 url 为你喜欢的壁纸图片。 这里挑选了两张

    亮色 暗色

    需要自定义背景的请使用下面这段代码

    @import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";
    
    body #Wrapper {
      background-image: url( https://p.sda1.dev/3/4fb95462b95b2b4afc32087b2a878dfa/bg-4k-light.png) !important;
      background-attachment: fixed !important;
      background-size: cover !important;
    }
    
    body #Wrapper.Night {
      background-image: url( https://p.sda1.dev/3/4c32f34a08ac944236ed7546211c8330/bg-4k.png) !important;
      background-attachment: fixed !important;
      background-size: cover !important;
    }
    
    
    

    最后

    [之前的帖子]( https://v2ex.com/t/819780) append 太多了,于是单独开了个新帖子。
    今后的更新请关注此帖子。
    感谢大家的喜欢。
    
    第 1 条附言  ·  2022-03-18 15:41:43 +08:00

    更新 1.6

    2022-03-18

    1. 兼容 v2ex-plus 样式
    2. 解决图片超出最大宽度

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

    第 2 条附言  ·  2022-06-02 10:54:24 +08:00

    更新 1.6.2

    1. 修复评论换行问题
    @import "https://cdn.jsdelivr.net/gh/viewweiwu/[email protected]/v2ex.css";
    
    第 3 条附言  ·  2022-07-06 16:52:17 +08:00
    兄弟们,新发布了一个绿色的主题样式,有兴趣可以换换~

    https://v2ex.com/t/864473#reply0
    21 条回复    2022-05-03 20:13:48 +08:00
    Pipecraft
        1
    Pipecraft  
       2021-12-15 18:04:10 +08:00
    感谢分享
    vacnt7
        2
    vacnt7  
       2021-12-15 18:33:28 +08:00
    用上了,感谢分享
    0xfan
        3
    0xfan  
       2021-12-15 19:17:32 +08:00
    用上了,很好
    ttxhxz
        4
    ttxhxz  
       2021-12-15 19:36:05 +08:00
    用上了,感谢分享
    eason1874
        5
    eason1874  
       2021-12-15 19:38:11 +08:00
    用上了。直接复制粘贴保存失败,提示不能超过 8K ,格式净化后可以
    Hack3rHan
        6
    Hack3rHan  
       2021-12-16 09:24:31 +08:00
    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}select{padding:5px;border-radius:var(--box-border-radius);border:1px solid var(--box-border-color)}:root{--box-border-radius:2px;--box-border-color:#f0f2f7;--link-color:#8590a6;--link-hover-color:#294a8e;--box-border-color:#f0f2f7;--primary-color:#1890ff;--primary-color-hover:#40a9ff}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}#Top{height:52px;border-bottom:0;background-color:unset;box-shadow:0 1px 3px rgba(18,18,18,0.1)}#Top>.content{height:100%;display:flex;align-items:center}#Rightbar .fade{color:#333}#Tabs{padding:12px 0!important;border-top-left-radius:0;border-top-right-radius:0}body .box{border-bottom: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}#Main .cell .cell{padding-right:0;padding-left:0;padding-bottom:0}.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:normal}.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:var(--primary-color);font-weight:500;background-color:unset}a.tab:hover{color:var(--link-hover-color);background-color:unset}h1{margin:0 0 16px}a.top:link,a.top:visited{font-weight:unset;color:var(--link-color)}.cell .cell .cell{margin-left:-58px;width:auto;display:block}.cell .cell{border-bottom:0}#Main .no{min-width:2em;background-color:unset}#Main .cell,.header,.subtle,.message,.note_item,.outdated{padding:16px 24px}#Main .page_current,#Main .page_normal{padding:5px 10px}.cell.alt,.status,.inner.alt{padding:16px 24px!important}.light-toggle img{height:16px}#reply-box .flex-one-row a:nth-child(1){white-space:nowrap;margin-right:-1em}#reply-box a:nth-child(2){bottom:16px;right:16px;width:3.6em;height:3.6em;line-height:1.3;padding:0 .8em;outline:1px solid var(--box-border-color);border-radius:var(--box-border-radius);box-shadow:0 1px 3px rgb(18 18 18 / 10%);background-color:var(--box-background-color);position:fixed;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-decoration:unset!important}#reply-box a:nth-child(2):hover{filter:brightness(1.2)}#SecondaryTabs,.inner{padding:10px 24px}#Rightbar .inner{padding:10px}#SecondaryTabs a{color:#999}#SecondaryTabs a:hover{color:#06f}.site-nav{padding-top:0}.site-nav .tools *{margin-left:24px}.topic_content{line-height:1.8}.topic_content,.topic_content{font-size:16px}.topic_content p{margin:1.8em 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;line-height:1.8}body .normal.button,body .super.button{cursor:pointer;color:#fff!important;font-weight:unset!important;background:unset!important;background-color:var(--primary-color)!important;background-image:unset!important;text-shadow:unset!important;box-shadow:unset!important;border:1px solid var(--primary-color)!important}body .normal.button:hover,body .super.button{color:#fff!important;background-color:var(--primary-color-hover)!important;border:1px solid var(--primary-color-hover)!important}body td.normal.button.disable_now,body td.super.button.disable_now{color:#00000040!important;border-color:#d9d9d9!important;background:#f5f5f5!important}form .button{border-radius:var(--box-border-radius)!important}#Bottom{border-top:0}#Rightbar td{border-left:none!important;border-right:none!important}select,.sl,.ml,.select2-container--default .select2-selection--single{border-color:#ccc;border-radius:var(--box-border-radius)!important}#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:0}.onoffswitch label{border-radius:var(--box-border-radius)}
    body #Wrapper.Night{background:none!important;background-image:none!important;background-color:#141414!important;--box-border-color:#2e445b}.Night a.topic-link:active,.Night a.topic-link:link{color:#a3b4c1}.Night a.topic-link:visited{color:#606060}.Night #Rightbar .fade{color:#ccc}.Night .box{border:0}.Night .normal.button,.Night .super.button{color:#fff!important;border-color:var(--primary-color)!important;background-color:var(--primary-color)!important}.Night td.normal.button.disable_now,.Night td.super.button.disable_now{color:rgba(255,255,255,0.3)!important;border-color:#434343!important;background:rgba(255,255,255,0.08)!important}.Night .normal.button:hover,.Night .super.button{color:#fff;border-color:var(--primary-color-hover)!important;background-color:var(--primary-color-hover)!important}.Night .normal.button:hover:enabled,.Night .super.button{background-color:var(--primary-color-hover)!important;background:var(--primary-color-hover)!important}.Night .outdated{color:#5d9bad}.Night img{filter:brightness(0.9)}.Night .topic_info a{color:#738292}.Night select{color:#d1d5d9;background:transparent}.Night .select2-container--default .select2-selection--single{border-color:var(--box-border-color);background-color:#18222d}.Night .select2-container--default .select2-selection--single .select2-selection__rendered{color:#d1d5d9}.Night .box form .cell{background-color:transparent!important}.Night .selectboxit-default-arrow{border-top:4px solid #fff}.Night select,.Night .sl,.Night .ml,.Night .select2-container--default .select2-selection--single{border-color:var(--box-border-color)}
    Hack3rHan
        7
    Hack3rHan  
       2021-12-16 09:24:55 +08:00
    自定义不能超过 8K ,压缩好了👆
    minamike
        8
    minamike  
       2021-12-16 09:30:20 +08:00
    请问能不能根据系统的主题颜色自动切换亮色和暗色模式
    viewweiwu
        9
    viewweiwu  
    OP
       2021-12-16 09:59:49 +08:00
    @minamike 暂时不能,需要自己点右上角开关切换
    vruzo
        10
    vruzo  
       2021-12-16 10:56:12 +08:00   ❤️ 1
    @minamike 迫于自己需要,在 V2EX Pro 的油猴脚本里加了个自动切换方法
    ```javascript
    //自动切换夜间模式
    (function (){
    const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    const toggleDom = document.querySelector("#Rightbar > div:nth-child(2) > div:nth-child(1) > table:nth-child(1) > tbody > tr > td:nth-child(3) > div > a > img")
    const currentMode = toggleDom && toggleDom.attributes.alt.nodeValue || null
    const isClick = (isDark && currentMode === 'Light') || (!isDark && currentMode === 'Dark')
    if(isClick) toggleDom.click()
    })();
    ```
    viewweiwu
        11
    viewweiwu  
    OP
       2021-12-16 10:58:56 +08:00
    @vruzo 👍
    vruzo
        12
    vruzo  
       2021-12-16 10:59:06 +08:00
    另外感谢楼主分享
    viewweiwu
        13
    viewweiwu  
    OP
       2021-12-16 11:03:53 +08:00
    @vruzo 😄 配合 v2ex-pro 的楼中楼,显示舒服多了
    ResidualBlood
        14
    ResidualBlood  
       2021-12-16 11:42:19 +08:00
    感谢分享~
    用上了,真香
    janda
        15
    janda  
       2021-12-17 09:32:44 +08:00
    用上了,感谢分享 、挺好用的、眼睛很舒服哈哈
    hellodigua
        16
    hellodigua  
       2021-12-30 13:37:51 +08:00
    真香,谢谢老板~
    Natsume233
        17
    Natsume233  
       2021-12-30 16:32:02 +08:00
    感谢分享
    sunls
        18
    sunls  
       2022-03-21 09:47:44 +08:00
    1.6 版本打开报错:Failed to fetch viewweiwu/[email protected] from GitHub.
    viewweiwu
        19
    viewweiwu  
    OP
       2022-03-21 10:01:05 +08:00
    sunls
        20
    sunls  
       2022-03-21 10:19:53 +08:00
    @viewweiwu 可用
    wanglz111
        21
    wanglz111  
       2022-05-03 20:13:48 +08:00
    课设准备 ssm+手写 css3 搓一个 v2 偷去用了感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3017 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 14:41 · PVG 22:41 · LAX 07:41 · JFK 10:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.