给WordPress的twenty fifteen主题添加暗黑模式

代码如下

代码如下:

media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
  }
  pre,
  abbr[title],
  table,
  th,
  td,
  input,
  textarea,
  .main-navigation ul,
  .main-navigation li,
  .post-navigation,
  .post-navigation div + div,
  .pagination,
  .comment-navigation,
  .widget li,
  .widget_categories .children,
  .widget_nav_menu .sub-menu,
  .widget_pages .children,
  .site-header,
  .site-footer,
  .hentry + .hentry,
  .author-info,
  .entry-content .page-links a,
  .page-links > span,
  .page-header,
  .comments-area,
  .comment-list + .comment-respond,
  .comment-list article,
  .comment-list .pingback,
  .comment-list .trackback,
  .comment-list .reply a,
  .no-comments {
    border-color: #333;
  }
  body:before,
  .site-header {
    background-color: #202020;
  }
  .site-header {
    background-color: #202020;
    border-bottom: 1px solid rgba(51, 51, 51, 0.1);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(51, 51, 51, 0.1);
  }
  body,
  blockquote cite,
  blockquote small,
  a,
  .dropdown-toggle:after,
  .image-navigation a:hover,
  .image-navigation a:focus,
  .comment-navigation a:hover,
  .comment-navigation a:focus,
  .widget-title,
  .entry-footer a:hover,
  .entry-footer a:focus,
  .comment-metadata a:hover,
  .comment-metadata a:focus,
  .pingback .edit-link a:hover,
  .pingback .edit-link a:focus,
  .comment-list .reply a:hover,
  .comment-list .reply a:focus,
  .site-info a:hover,
  .site-info a:focus {
    color: #bebebe;
  }
  .post-navigation,
  .pagination,
  .secondary,
  .site-footer,
  .hentry,
  .page-header,
  .page-content,
  .comments-area,
  .widecolumn {
    background-color: #202020;
  }
  button,
  input,
  select,
  textarea {
    background-color: #bebebe;
  }
  .secondary-toggle:before {
    color: #bebebe;
  }
  blockquote,
  a:hover,
  a:focus,
  .main-navigation .menu-item-summary,
  .post-navigation .meta-nav,
  .post-navigation a:hover .post-title,
  .post-navigation a:focus .post-title,
  .image-navigation,
  .image-navigation a,
  .comment-navigation,
  .comment-navigation a,
  .widget,
  .author-heading,
  .entry-footer,
  .entry-footer a,
  .taxonomy-summary,
  .page-links > .page-links-title,
  .entry-caption,
  .comment-author,
  .comment-metadata,
  .comment-metadata a,
  .pingback .edit-link,
  .pingback .edit-link a,
  .post-password-form label,
  .comment-form label,
  .comment-notes,
  .comment-awaiting-moderation,
  .logged-in-as,
  .form-allowed-tags,
  .no-comments,
  .site-info,
  .site-info a,
  .wp-caption-text,
  .gallery-caption,
  .comment-list .reply a,
  .widecolumn label,
  .widecolumn .mu_register label {
    color: rgba(190, 190, 190, 0.7);
  }
  .entry-footer {
    background-color: #1b1b1b;
  }
  .main-navigation ul,
  .main-navigation li,
  .widget input,
  .widget textarea,
  .widget table,
  .widget th,
  .widget td,
  .widget pre,
  .widget li,
  .widget_categories .children,
  .widget_nav_menu .sub-menu,
  .widget_pages .children,
  .widget abbr[title] {
    border-color: rgba(190, 190, 190, 0.1);
  }
  .secondary-toggle {
    border-color: rgba(190, 190, 190, 0.1);
  }
  .entry-content,
  .entry-summary {
    color: #bebebe;
  }
  code {
    color: #bebebe;
  }
  .comments-area,
  .comment-list + .comment-respond,
  .comment-list article,
  .comment-list .pingback,
  .comment-list .trackback,
  .comment-list .reply a,
  .no-comments {
    border-color: #555;
  }
  .author-info {
    border-color: #555;
  }
  nav.navigation.post-navigation {
    border-color: #202020;
  }
  footer#colophon.site-footer {
    border-color: #202020;
  }
  img {
    filter: brightness(0.8);
  }
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    color: #bebebe;
  }
}

将其添加到自定义中的“额外 css”中,再“发布”即可。


⚠️我意识到我的某些文章可能会引发争议。如果您有不同的观点或论据,请在评论区友好提出,或给我发邮件,或邀请我阅读您的辩驳文章。只有情绪输出而没有实质内容的评论,将会被删除。