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

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

深色

主页

帖子内容页,适配了代码块的配色。

编辑器

个人中心


聊天&通知

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

主页&手机端


感谢16图床!

点赞
  1. iceking说道:

    浅色模式CSS

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

    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}
    
  2. dilidili说道:

    BD

  3. accmio说道:

    黑化模式还是有点问题

发表回复

电子邮件地址不会被公开。必填项已用 * 标注

×
订阅图标按钮