logo NodeSeekbeta

【论坛扩展】分享一下自制的美化,深/浅两套配色,多图预警。

按照个人喜好提升了一些可读性,挑了自己个喜欢的配色,大部分常用界面已适配。
由于论坛限制css字符数量,两套配色不能写在一起,也就不能支持自动切换了。
都是在默认亮色下覆盖的样式,喜欢哪套直接应用即可。xhj014

深色

主页
image
帖子内容页,适配了代码块的配色。
image
编辑器
image
个人中心
image
image
聊天&通知
image
image

浅色模式(适配和深色差不多,就不一一截图了)

主页&手机端
image
image
image

感谢16图床!

12
  • 浅色模式CSS

    字符数量限制,压缩了,鼠标连点3下可以选中全部。 ac01

    header .site-title img{display:none}.site-title .title-text{color:#44507b!important}header .beta-icon{color:#6272a1!important}#nsk-head .nav-menu a{color:#6272a1!important}.pure-form input[type=color],.pure-form input[type=date],.pure-form input[type=datetime-local],.pure-form input[type=datetime],.pure-form input[type=email],.pure-form input[type=month],.pure-form input[type=number],.pure-form input[type=password],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=text],.pure-form input[type=time],.pure-form input[type=url],.pure-form input[type=week],.pure-form select,.pure-form textarea{border:1px solid rgb(224 230 255);box-shadow:none}.avatar{border:3px solid #e9ecfe!important}.avatar+.icon{display:none!important}.avatar-normal,.btn,.sorter{box-shadow:1px 1px 3px #000!important}.avatar-normal{width:48px;height:48px;border-radius:8px;box-shadow:none!important}#nsk-body{border-radius:8px}#nsk-body-left .sorter{background-color:none;border:none!important;border-radius:5px}#nsk-body-left .sorter a:hover{color:none!important}.avatar-normal,.btn,.sorter{box-shadow:none!important}#nsk-body-left .sorter>a.selected{background-color:#3b3eff!important;padding:2px 10px}#nsk-body-left .sorter>a{background-color:#e9ecfe;color:#9498cd;padding:2px 10px}.nsk-pager .pager-next,.nsk-pager .pager-pos,.nsk-pager .pager-prev{color:#6272a1!important}.triangle-left,.triangle-right{border-color:transparent transparent #6272a1}.nsk-pager .pager-pos.pager-cur{background-color:#e9ecfe!important;box-shadow:none}#nsk-body-left{padding:15px}#nsk-body-left .post-list .post-list-item .post-list-content{display:grid;align-content:space-around}#nsk-body-left .post-list .post-list-item .post-title{font-weight:600!important}.nsk-badge.read-only{color:#ff5252!important}#nsk-body-left .post-list .post-list-item .post-title a{color:#44507b!important}#nsk-body-left .post-list .post-list-item{border-bottom:1px solid rgb(235 239 255)!important}#nsk-body-left .post-list .post-list-item .post-category,.content-category a{background-color:#e9ecfe;color:#9498cd;box-shadow:none!important}#nsk-body-left .post-list .post-list-item .post-info,#nsk-body-left .post-list .post-list-item .post-info a{color:#6272a1!important}#nsk-right-panel-container{padding:15px;background:#f6f7ff}.stat-block,stat-block a{color:#6272a1!important}.user-head .menu .Username{color:#44507b!important}.user-head .menu .iconpark-icon{color:#6272a1!important}.user-card .user-stat{background:#e9ecfe!important;box-shadow:none!important}#nsk-right-panel-container .nsk-panel h4{color:#6272a1!important;padding-bottom:10px}#nsk-right-panel-container .nsk-panel ul li{height:30px;line-height:30px;padding-left:0!important;border-bottom:1px solid #e5e7ff!important}#nsk-right-panel-container .nsk-panel ul li a{color:#6272a1!important}#nsk-right-panel-container .nsk-panel{box-shadow:none}#nsk-right-panel-container .nsk-panel,.nsk-new-member-board .new-member-item{color:#6272a1!important}.btn{background-color:#3b3eff}.btn:hover{background-color:#3b3eff}body{background:linear-gradient(117deg,#f3efff,#e7f1ff)}.bg1{background:linear-gradient(117deg,#f3efff,#e7f1ff)}#nsk-body{padding:0!important;box-shadow:0 7px 20px 1px #d7ceff30}.role-tag.role-admin{background-color:#3b3eff;border:1px solid #3b3eff}.post-content h2{color:#3b3eff;border-bottom:1px solid #e5e7ff!important;padding-bottom:5px}.post-content h2:before{content:"#";color:#3539ff;margin-right:3px}.post-content a{color:#3b3eff!important}.content-category a{padding:3px 5px;border-radius:3px}.nsk-content-meta-info .content-info{color:#6272a1!important;padding:5px 0}.nsk-post-wrapper .floor-link-wrapper a{color:#6272a1!important}.post-content pre{color:#abb2bf;background:#282c34;border-radius:5px;border:none!important}.post-content code{background:0 0!important;padding:10px 10px}.signature{border-top:1px dashed #e5e7ff!important;color:#6272a1!important}.signature a{color:#3539ff!important}.nsk-post-wrapper .content-item{border-bottom:1px solid rgb(235 239 255)!important}.comment-menu .menu-item{color:#6272a1!important}.hover-user-card{padding:10px}.user-card .user-stat{border-radius:5px!important;margin:5px 0!important}.head-container,.selector{background-color:#fff!important;box-shadow:0 7px 20px 1px #d7ceff30!important}.block-list{background-color:#f1f3ff!important;border-radius:8px}.card-item{background-color:#44507b!important}.selector .selected{color:#3b3eff!important}.discussion-wrapper{background-color:#44507b!important}.discussion-wrapper .discussion-item:nth-child(n+2){border-top:1px dashed #e5e7ff!important}::-webkit-scrollbar-thumb{background-color:#3b3eff;height:50px;outline-offset:-2px;outline:2px solid #fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track-piece{-webkit-border-radius:0}@media screen and (max-width:500px){.nav-menu .meta-button{background-color:#3b3eff}}@media only screen and (min-width:500px){.bg1,.bg2,.bg3{background:linear-gradient(117deg,#f3efff,#e7f1ff)!important}}@media screen and (max-width:500px){.nav-menu .iconpark-icon{color:#44507b}}#left-slide-panel .user-card-container{padding:12px 10px 0}#left-slide-panel{background-color:#573ef2!important}#nsk-head .nav-menu a img{display:none}.mobile-nav .current-category a{color:#44507b!important}.mobile-nav li a{color:#6272a1!important}.bg1,.bg2{background:#0a0c19!important}.btn{background-color:#3b3eff}.btn:hover{background-color:#3b3eff}header{background-color:#111324!important}header .site-title img{display:none}.site-title .title-text{color:#dedede!important}header .beta-icon{color:#6272a1!important}#nsk-head .nav-menu a{color:#dedede!important}.pure-form input[type=color],.pure-form input[type=date],.pure-form input[type=datetime-local],.pure-form input[type=datetime],.pure-form input[type=email],.pure-form input[type=month],.pure-form input[type=number],.pure-form input[type=password],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=text],.pure-form input[type=time],.pure-form input[type=url],.pure-form input[type=week],.pure-form select,.pure-form textarea{border:1px solid rgb(224 230 255);box-shadow:none}.avatar{border:3px solid #e9ecfe!important}.avatar+.icon{display:none!important}.avatar-normal,.btn,.sorter{box-shadow:1px 1px 3px #000!important}.avatar-normal{width:48px;height:48px;border-radius:8px;box-shadow:none!important}#nsk-body{background-color:#161829!important}#nsk-body-left .sorter{background-color:none;border:none!important;border-radius:5px}#nsk-body-left .sorter a:hover{color:none!important}.avatar-normal,.btn,.sorter{box-shadow:none!important}#nsk-body-left .sorter>a.selected{background-color:#3b3eff!important;color:#dedede!important;padding:2px 10px}#nsk-body-left .sorter>a{background-color:#292c45;color:#5b5f80!important;padding:2px 10px}.nsk-pager .pager-next,.nsk-pager .pager-pos,.nsk-pager .pager-prev{color:#6272a1!important}.triangle-left,.triangle-right{border-color:transparent transparent #6272a1}.nsk-pager .pager-pos.pager-cur{background-color:#292c45!important;box-shadow:none}#nsk-body-left{padding:15px}#nsk-body-left .post-list .post-list-item .post-list-content{display:grid;align-content:space-around}#nsk-body-left .post-list .post-list-item .post-title{font-weight:600!important}.nsk-badge.read-only{color:#ff5252!important}#nsk-body-left .post-list .post-list-item .post-title a{color:#dedede!important}#nsk-body-left .post-list .post-list-item{border-bottom:1px solid #1e2036!important}#nsk-body-left .post-list .post-list-item .post-category,.content-category a{background-color:#292c45!important;color:#9498cd;box-shadow:none!important}#nsk-body-left .post-list .post-list-item .post-info,#nsk-body-left .post-list .post-list-item .post-info a{color:#a5a9c3!important}#nsk-right-panel-container{padding:15px;background:#f6f7ff}.stat-block,stat-block a{color:#6272a1!important}.user-head .menu .Username{color:#44507b!important}.user-head .menu .iconpark-icon{color:#6272a1!important}.user-card .user-stat{background:#e9ecfe!important;box-shadow:none!important}#nsk-right-panel-container .nsk-panel h4{color:#6272a1!important;padding-bottom:10px}#nsk-right-panel-container .nsk-panel ul li{height:30px;line-height:30px;padding-left:0!important;border-bottom:1px solid #e5e7ff!important}#nsk-right-panel-container .nsk-panel ul li a{color:#6272a1!important}#nsk-right-panel-container .nsk-panel{box-shadow:none}#nsk-right-panel-container .nsk-panel,.nsk-new-member-board .new-member-item{color:#6272a1!important}#nsk-body{padding:0!important;box-shadow:0 7px 20px 1px #d7ceff30}.role-tag.role-admin{background-color:#3b3eff;border:1px solid #3b3eff}.post-content h2{color:#3b3eff;border-bottom:1px solid #e5e7ff!important;padding-bottom:5px}.post-content h2:before{content:"#";color:#3539ff;margin-right:3px}.post-content a{color:#3b3eff!important}.content-category a{padding:3px 5px;border-radius:3px}.nsk-content-meta-info .content-info{color:#6272a1!important;padding:5px 0}.nsk-post-wrapper .floor-link-wrapper a{color:#6272a1!important}.post-content pre{color:#abb2bf;background:#282c34;border-radius:5px;border:none!important}.post-content code{background:0 0!important;padding:10px 10px}.signature{border-top:1px dashed #e5e7ff!important;color:#6272a1!important}.signature a{color:#3539ff!important}.nsk-post-wrapper .content-item{border-bottom:1px solid rgb(235 239 255)!important}.comment-menu .menu-item{color:#6272a1!important}.hover-user-card{padding:10px}.user-card .user-stat{border-radius:5px!important;margin:5px 0!important}.head-container,.selector{background-color:#fff!important;box-shadow:0 7px 20px 1px #d7ceff30!important}.block-list{background-color:#f1f3ff!important;border-radius:8px}.card-item{background-color:#44507b!important}.selector .selected{color:#3b3eff!important}.discussion-wrapper{background-color:#44507b!important}.discussion-wrapper .discussion-item:nth-child(n+2){border-top:1px dashed #e5e7ff!important}::-webkit-scrollbar-thumb{background-color:#3b3eff;height:50px;outline-offset:-2px;outline:2px solid #fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track-piece{-webkit-border-radius:0}@media screen and (max-width:500px){.nav-menu .meta-button{background-color:#3b3eff}}@media only screen and (min-width:500px){.bg1,.bg2,.bg3{background:linear-gradient(117deg,#f3efff,#e7f1ff)!important}}@media screen and (max-width:500px){.nav-menu .iconpark-icon{color:#44507b}}#left-slide-panel .user-card-container{padding:12px 10px 0}#left-slide-panel{background-color:#573ef2!important}#nsk-head .nav-menu a img{display:none}.mobile-nav .current-category a{color:#44507b!important}.mobile-nav li a{color:#6272a1!important}
    
  • BD

  • 黑化模式还是有点问题 xhj014 xhj016

  • @accmio #3
    还没做呢,新鲜热乎的lv2 xhj014

  • 666,这颜色像中毒 xhj024

  • 看不了白色主题了 光太强 xhj007

  • 深色模式CSS

    字符数量限制,压缩了,鼠标连点3下可以选中全部。 xhj014

    :root{--main-color: #0a0c19!important;--sub-color: #0a0c19!important;}.bg1,.bg2,.bg3{background:#0a0c19!important}.btn{background-color:#3b3eff}.btn:hover{background-color:#3b3eff}header{background-color:#111324!important}header .site-title img{display:none}.site-title .title-text{color:#dedede!important}header .beta-icon{color:#6272a1!important}#nsk-head{background-color:#111324}#nsk-head .nav-menu a{color:#dedede!important}.pure-form input[type=color],.pure-form input[type=date],.pure-form input[type=datetime-local],.pure-form input[type=datetime],.pure-form input[type=email],.pure-form input[type=month],.pure-form input[type=number],.pure-form input[type=password],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=text],.pure-form input[type=time],.pure-form input[type=url],.pure-form input[type=week],.pure-form select,.pure-form textarea{border:1px solid #5b5f80;box-shadow:none;background:#1e2036;color:#a5a9c3}header .search-box input[type=text]:focus{border-color:#2b48ff}header .search-box .search-hint{background-color:#1e2036;box-shadow:none}header .search-box .search-hint .selected-search-hint,header .search-box .search-hint a:hover{color:#7786e7}header .search-box .search-hint .selected-search-hint,header .search-box .search-hint a{color:#a5a9c3}.avatar{border:3px solid #e9ecfe!important}.avatar+.icon{display:none!important}.avatar-normal,.btn,.sorter{box-shadow:1px 1px 3px #000!important}.avatar-normal{width:48px;height:48px;border-radius:8px;box-shadow:none!important}#nsk-body,.mobile-nav{background-color:#161829!important}#nsk-body-left .sorter{background-color:none;border:none!important;border-radius:5px}#nsk-body-left .sorter a:hover{color:none!important}.avatar-normal,.btn,.sorter{box-shadow:none!important}#nsk-body-left .sorter>a.selected{background-color:#3b3eff!important;color:#dedede!important;padding:2px 10px}#nsk-body-left .sorter>a{background-color:#292c45;color:#5b5f80!important;padding:2px 10px}.nsk-pager .pager-next,.nsk-pager .pager-pos,.nsk-pager .pager-prev{color:#6272a1!important}.triangle-left,.triangle-right{border-color:transparent transparent #6272a1}.nsk-pager .pager-pos.pager-cur{background-color:#292c45!important;box-shadow:none}#nsk-body-left{padding:15px}#nsk-body-left .post-list .post-list-item .post-list-content{display:grid;align-content:space-around}#nsk-body-left .post-list .post-list-item .post-title{font-weight:600!important}.nsk-badge.read-only{color:#ff5252!important}#nsk-body-left .post-list .post-list-item .post-title a{color:#dedede!important}#nsk-body-left .post-list .post-list-item{border-bottom:1px solid #1e2036!important}#nsk-body-left .post-list .post-list-item .post-category,.content-category a{background-color:#292c45!important;color:#9498cd;box-shadow:none!important}#nsk-body-left .post-list .post-list-item .post-info,#nsk-body-left .post-list .post-list-item .post-info a{color:#a5a9c3!important}#nsk-right-panel-container{padding:15px;background:#111324}.stat-block,stat-block a{color:#6272a1!important}.user-head .menu .Username{color:#a5a9c3!important}.user-head .menu .iconpark-icon{color:#6272a1!important}.user-card .user-stat{background:#292c45!important;box-shadow:none!important}.user-card .user-stat a{color:#a5a9c3!important}#nsk-right-panel-container .nsk-panel h4{color:#6272a1!important;padding-bottom:10px}#nsk-right-panel-container .nsk-panel ul li{height:30px;line-height:30px;padding-left:0!important;border-bottom:1px solid #1e2036!important}#nsk-right-panel-container .nsk-panel ul li a{color:#6272a1!important}#nsk-right-panel-container .nsk-panel{box-shadow:none}#nsk-right-panel-container .nsk-panel,.nsk-new-member-board .new-member-item{color:#6272a1!important}#nsk-body{padding:0!important}.role-tag.role-admin{background-color:#3b3eff;border:1px solid #3b3eff}.pined{padding:2px;background-color:#2b48ff;margin-top:-3px}.post-content h2{color:#7786e7;border-bottom:1px solid #1e2036!important;padding-bottom:5px}.post-content h2:before{content:"#";color:#7786e7;margin-right:3px}.post-content h3,.post-content h4,.post-content h5,.post-content h6{color:#7786e7}.post-content{color:#a5a9c3!important}.nsk-post .post-title-link,.nsk-post .post-title-link:hover{color:#dedede!important}.nsk-content-meta-info .author-name,.nsk-content-meta-info .author-name:hover{color:#dedede!important}.role-tag.role-creater{background-color:#ff5252;border:1px solid #ff5252}.post-content a{color:#7786e7!important}.content-category a{padding:3px 5px;border-radius:3px}.nsk-content-meta-info .content-info{color:#6272a1!important;padding:5px 0}.nsk-post-wrapper .floor-link-wrapper a{color:#6272a1!important}.post-content pre{color:#abb2bf;background:#282c34;border-radius:5px;border:none!important}.post-content code{background:0 0!important;padding:10px 10px}.signature{border-top:1px dashed #292c45!important;color:#6272a1!important}.signature a{color:#3539ff!important}.nsk-post-wrapper .content-item{border-bottom:1px solid #292c45!important}.comment-menu .menu-item{color:#6272a1!important}.hover-user-card{padding:10px;background-color:#111324!important;border:1px solid #292c45}.user-card .user-stat{border-radius:5px!important;margin:5px 0!important}#editor-body,.CodeMirror,.cm-s-nsk .CodeMirror-gutters,.expression,.md-editor,.mde-toolbar,.message-wrapper,.tab-select,.title-input input{background-color:#292c45!important;color:#a5a9c3!important}.CodeMirror-wrap pre.CodeMirror-line,.editor-top-button a,.mde-toolbar .toolbar-item,.tab-select a,.topic-select .iconpark-icon{color:#a5a9c3!important}.message-item .content-column .content.markdown-content{width:auto!important}.message-item .content-column .content{background-color:#111324!important}.app-switch,.talk-list{background-color:#111324!important}.app-switch .app-title.router-link-active{background-color:#3b3eff!important}.app-switch .app-title{background-color:#111324!important}.container,.message-input,.message-input textarea{border:1px solid #292c45!important;background-color:#161829!important;color:#a5a9c3!important}.app-switch,.reply-item{border-bottom:1px solid #292c45!important}.reply-item,.reply-item a,.talk-item a,.talk-item a:hover,.talk-list .talk-item .middle{color:#a5a9c3!important}.message-input .input-area .cm-wrapper{border-top:1px solid rgba(0,0,0,.1)!important}.head-container,.selector,footer{background-color:#161829!important;box-shadow:none!important}.head-container .word,.selector .select-item,.selector-right-side{color:#a5a9c3!important}.block-list{background-color:#f1f3ff!important;border-radius:8px}.card-item{background-color:#44507b!important}.selector .selected{color:#3b3eff!important}.discussion-wrapper{background-color:#44507b!important}.discussion-wrapper .discussion-item:nth-child(n+2){border-top:1px dashed #e5e7ff!important}.nav-item-btn{background-color:#161829!important;border:1px solid #2b3249}::-webkit-scrollbar-thumb{background-color:#3b3eff;height:50px;outline-offset:-2px;outline:2px solid #fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track-piece{-webkit-border-radius:0}@media screen and (min-width:500px){.message-wrapper{margin:0!important}}@media screen and (max-width:500px){header{background-color:#0a0c18!important}.nav-menu .meta-button{background-color:#3b3eff}.nav-menu .iconpark-icon{color:#a5a9c3}.nav-menu .right-button-group{border-left:1px solid #a5a9c3}}#left-slide-panel .user-card-container{padding:12px 10px 0;background-color:#161829!important}#left-slide-panel{background-color:#161829!important}#nsk-head .nav-menu a img{display:none}.mobile-nav .current-category a{color:#44507b!important}.mobile-nav li a{color:#6272a1!important}.post-content code, .post-content pre{border: none !important;}
    
  • 牛逼

  • 大佬牛b

12

你好啊,陌生人!

我的朋友,看起来你是新来的,如果想参与到讨论中,点击下面的按钮!

📈用户数目📈

目前论坛共有72280位seeker

🎉欢迎新用户🎉