给WordPress的twenty fifteen主题添加暗黑模式
2021-07-07
代码如下：
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-description, .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-description, .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”中，再“发布”即可。