给WordPress的twenty fifteen主题添加暗黑模式
2021年7月7日
约 366 字
代码如下:
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”中,再“发布”即可。