子比主题适配白天黑夜模式拟态风格—源自李初一大佬—二次修改版

蜡笔小桑

1个月前更新

5017

该帖子部分内容已隐藏

前言

之前用过李初一大佬分享的拟态风格的CSS,说实话很不错，对我来说也是刚需。但无奈他不喜欢暗黑模式，所以只写了白天的，感谢大佬。

修改

基于大佬的CSS进行了修改，适配了黑夜，黑夜的话会有边缘发光，代码有注释说明如果不喜欢可以去除或进行其他调整。小白分享，大佬勿喷。

黑夜如图

白天模式如图

此处内容已隐藏，请付费后查看

使用方法

将CSS代码粘贴至后台-自定义代码-自定义CSS处即可。

子比主题美化教程

3人已评分

只看作者

最新最热

陳平安0
不知道有没有大佬能重新修复一下黑暗模式
1个月前浙江回复

wangmiao


.posts-item:not(.card),
.author-header .avatar-img,
.full-widget-sm,
.header .sub-menu,
.modal-content,
.form-control,
.no_webshot.main-bg.theme-box.box-body.radius8.main-shadow,
.article,
.dropdown-menu,
.btn-score,
.float-right.round .float-btn,
.forum-posts.alone,
.zib-widget,
.posts-mini-lists,
.posts-item.card.style3 {
  background-color: var(--main-bg-color);
  box-shadow: 8px 8px 16px 0 rgba(136, 167, 225, 0.15), 
              -8px -8px 16px 0 rgba(255, 255, 255, 0.15),
              inset 1px 1px 2px 0 rgba(0, 0, 0, 0.05),
              inset -1px -1px 2px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease-in-out;
  color: var(--main-text-color);
  border-radius: 12px;
  overflow: visible; /* 确保内容可见 */
}

@media (min-resolution: 2dppx) {
  .posts-item:not(.card),
  .author-header .avatar-img,
  .full-widget-sm,
  .header .sub-menu,
  .modal-content,
  .form-control,
  .no_webshot.main-bg.theme-box.box-body.radius8.main-shadow,
  .article,
  .dropdown-menu,
  .btn-score,
  .float-right.round .float-btn,
  .forum-posts.alone,
  .zib-widget,
  .posts-mini-lists,
  .posts-item.card.style3 {
    box-shadow: 8px 8px 20px 2px rgba(136, 167, 225, 0.2), 
                -8px -8px 20px 2px rgba(255, 255, 255, 0.2),
                inset 1px 1px 3px 1px rgba(0, 0, 0, 0.1),
                inset -1px -1px 3px 1px rgba(255, 255, 255, 0.6);
  }
}

/* 确保三级菜单有足够的高度和适当的内边距 */
.header .sub-menu {
  min-height: 100px; /* 根据需要调整 */
  padding: 10px; /* 根据需要调整 */
  margin: 0; /* 确保没有额外的外边距 */
  font-size: 16px; /* 根据需要调整 */
  line-height: 1.5; /* 根据需要调整 */
}

24天前河北@陳平安