/* * Dark theme for visitors whose device is set to dark (prefers-color-scheme: dark). * Colours only: no layout, sizes or fonts change here. Loaded last by View\Layout * (after the inline Customizer CSS), with media="(prefers-color-scheme: dark)". * * Article content: the infographic boxes written with inline styles (style="background: ...") * stay light, like pictures; text inside them keeps the dark colour it has in light mode * (see "Light islands" below). Photos and SVGs are never filtered. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --mnd-bg: #151917; --mnd-surface: #1d221f; --mnd-surface-2: #262c28; --mnd-border: #3a433c; --mnd-text: #e4e7e4; --mnd-muted: #b4bbb5; --mnd-heading: #a3d98f; --mnd-link: #8fd47a; --mnd-link-hover: #b5e6a4; --mnd-brand: #1b6a04; /* button / bar green, white text on it = 6.9:1 */ } /* Page, header, panels */ html, body, #wrapper, #main, .page-wrapper, .blog-wrapper, .header-wrapper, .header-main, .header-bg-color, .header-top, html .header-top, .stuck .header-main, .mobile-sidebar, .off-canvas-left .mfp-content, .off-canvas-right .mfp-content, .mfp-content .sidebar-menu, .nav-dropdown, .nav .nav-dropdown, .nav-dropdown-default, .post-sidebar, #secondary, .comments-area, .page-title, .page-title-inner { background-color: var(--mnd-bg); } html .header-top { background-color: var(--mnd-surface) !important; } .nav .nav-dropdown { border-color: var(--mnd-border); } .nav-dropdown-has-arrow li.has-dropdown:before, .nav-dropdown-has-arrow li.has-dropdown:after { border-bottom-color: var(--mnd-bg); } body, p, li, td, th, dd, dt, label, figcaption, .entry-content, .widget, .from_the_blog_excerpt, .post-item, .copyright-footer { color: var(--mnd-text); } h1, h2, h3, h4, h5, h6, .heading-font, .entry-title, .entry-title a, .post-title, .post-title a, .page-title h1, .is-xlarge, .is-large { color: var(--mnd-heading); } /* Sidebar titles keep the green strip with white text (Customizer CSS) */ html span.widget-title { background-color: var(--mnd-brand); color: #fff; } .widget ._mi, .widget .dashicons, .nav ._mi { color: inherit; } a, .entry-content a, .widget a, .nav-pagination > li > a, .entry-category a { color: var(--mnd-link); } a:hover, .entry-content a:hover, .widget a:hover { color: var(--mnd-link-hover); } .is-divider, .entry-divider { background-color: var(--mnd-link); } /* Header: search, phone, top menu */ .header-main .nav > li > a, .header-top .nav > li > a, .header-main li.html, .header-main li.html a, .nav > li > a, .nav-dropdown > li > a, .nav-column li > a, .nav-dropdown .menu-item a, .mobile-sidebar .nav > li > a, .sidebar-menu .nav-sidebar > li > a, .nav-sidebar > li > ul li a { color: var(--mnd-muted); } html .nav li.active > a, html .nav-sidebar li.active > a, html .nav-vertical li li.active > a { color: var(--mnd-text); } .nav > li > a:hover, .nav > li.active > a, .nav-dropdown > li > a:hover, .nav-column li > a:hover { color: var(--mnd-text); } .nav-dropdown .nav-dropdown-col > a, .nav-dropdown li.nav-dropdown-col > a { color: var(--mnd-heading); } .nav-dropdown li, .nav-sidebar > li, .nav-vertical > li + li, .widget ul li, .widget_categories li, .recentcomments, .widget > ul > li + li, .widget li + li { border-color: var(--mnd-border); } .header-bottom, .header-bottom .nav > li > a { /* green bar keeps its colours */ } .header-bottom .nav > li > a { color: rgba(255, 255, 255, .85); } .header-bottom .nav > li > a:hover, .header-bottom .nav > li.active > a, .header-bottom .nav > li.current-menu-ancestor > a { color: #fff; } .header-bottom { background-color: var(--mnd-brand); } /* Forms: search, comment form */ input[type="email"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"], input[type="text"], input[type="password"], textarea, select, .searchform input, .search-field { background-color: var(--mnd-surface); color: var(--mnd-text); border-color: var(--mnd-border); box-shadow: none; } input::placeholder, textarea::placeholder { color: #9aa29b; opacity: 1; } input:focus, textarea:focus, select:focus { background-color: var(--mnd-surface-2); border-color: var(--mnd-link); } .searchform .button.icon, .search-form .button { color: var(--mnd-text); background-color: transparent; } .header-main .icon-search, .header-main .searchform .button i { color: var(--mnd-text); } /* Tables, quotes, code inside articles (not inside the inline-styled boxes) */ .entry-content table, .entry-content th, .entry-content td, .entry-content .wp-block-table td, .entry-content .wp-block-table th { border-color: var(--mnd-border); } .entry-content th:not([style*="background"] *):not([style*="background"]) { background-color: var(--mnd-surface-2); color: var(--mnd-text); } .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--mnd-surface); } blockquote, .entry-content blockquote, .wp-block-quote, .wp-block-pullquote { color: var(--mnd-text); border-color: var(--mnd-link); background-color: var(--mnd-surface); } blockquote cite, .wp-block-quote cite, .wp-block-pullquote cite { color: var(--mnd-muted); } code, kbd, pre, .wp-block-code, .wp-block-preformatted { background-color: var(--mnd-surface-2); color: #e9ece9; border-color: var(--mnd-border); } hr, .wp-block-separator { border-color: var(--mnd-border); background-color: var(--mnd-border); } .wp-caption, .wp-caption-text, figcaption, .wp-element-caption { color: var(--mnd-muted); background-color: transparent; } mark { background-color: #5b5216; color: #fff7d1; } /* Article: date badge, author box, share, tags, pagination */ .badge-inner, .badge.post-date .badge-inner { color: #fff; } .badge-outline .badge-inner, .badge.post-date .badge-outline .badge-inner { background-color: var(--mnd-surface); color: var(--mnd-text); } .entry-author, .entry-author .author-desc, .author-name { color: var(--mnd-text); border-color: var(--mnd-border); } .blog-share .button.is-outline, .button.is-outline, .social-icons a, .share-icons a { color: var(--mnd-muted); border-color: var(--mnd-border); } .blog-share .button.is-outline:hover, .social-icons a:hover { color: #fff; } .nav-pagination > li > a, .nav-pagination > li > span { border-color: var(--mnd-border); } .tagcloud a, .tag-cloud-link { color: var(--mnd-muted); border-color: var(--mnd-border); } .tagcloud a:hover, .tag-cloud-link:hover { color: #fff; background-color: var(--mnd-brand); border-color: var(--mnd-brand); } .post-item .box-text, .box-text, .box-blog-post .box-text, .col-inner { color: var(--mnd-text); } .box-text p, .box-blog-post .is-divider + p, .from_the_blog_comments { color: var(--mnd-muted); } .box-shadow-2, .box-shadow-1, .post-item .box { background-color: transparent; } .page-header-excerpt { color: var(--mnd-text); } .screen-reader-text:focus, .skip-link:focus { background-color: var(--mnd-surface); color: var(--mnd-text); } /* Buttons: same green, white text */ .button.primary:not(.is-outline), button[type="submit"], input[type="submit"]:not(.is-form), .button.submit-button { background-color: var(--mnd-brand); color: #fff; } .button.primary.is-outline { color: var(--mnd-link); border-color: var(--mnd-link); } /* Back to top */ #top-link, .back-to-top { color: var(--mnd-text); border-color: var(--mnd-border); background-color: var(--mnd-surface); } /* Table of contents (Easy TOC) */ #ez-toc-container, div#ez-toc-container, .ez-toc-v2_0_76, .ez-toc-container-direction { background-color: var(--mnd-surface); border-color: var(--mnd-border); box-shadow: none; } div#ez-toc-container .ez-toc-title, #ez-toc-container p.ez-toc-title { color: var(--mnd-text); } div#ez-toc-container ul li a, #ez-toc-container a, #ez-toc-container a:visited, .ez-toc-list a { color: var(--mnd-link); } #ez-toc-container a:hover { color: var(--mnd-link-hover); } .ez-toc-toggle, #ez-toc-container a.ez-toc-toggle, .ez-toc-btn-default { color: var(--mnd-text); background: var(--mnd-surface-2); border-color: var(--mnd-border); text-shadow: none; } .ez-toc-icon-toggle-span svg, .ez-toc-toggle svg { fill: var(--mnd-text); color: var(--mnd-text); } .ez-toc-widget-container ul.ez-toc-list li.active { background-color: var(--mnd-surface-2); } /* Ratings (stars, wpDiscuz article rating) */ .wpd-post-rating .wpd-rating-wrap .wpd-rating-title { color: var(--mnd-muted); } .wpd-post-rating .wpd-rating-wrap .wpd-rating-value { background-color: var(--mnd-surface); border-color: var(--mnd-muted); } .wpd-post-rating .wpd-rating-wrap .wpd-rating-value span { color: var(--mnd-text); } .post-ratings, .post-ratings-text, .post-ratings label span { color: var(--mnd-muted); } /* Comments (wpDiscuz markup) */ #wpdcom, #wpdcom .wpd-thread-head, #wpdcom .wpd-thread-info, #wpdcom .wpd-form-head, #wpdcom .wpd-comment-text, #wpdcom .wpd-thread-list, #comments, .comment-respond { background-color: transparent; color: var(--mnd-text); border-color: var(--mnd-border); } #wpdcom .wpd-thread-head, #wpdcom .wpd-form-head, #wpdcom .wpd-comment-footer, #wpdcom .wpd-comment-header, #wpdcom .wpd-blog-user, #wpdcom .wpd-thread-filter, #wpdcom .wpd-comment-wrap, #wpdcom .wpd-reply { border-color: var(--mnd-border); } #wpdcom .wpd-thread-info, #wpdcom .wpd-thread-info span, #wpdcom .wpd-thread-info .wpdtc, #wpdcom .wpd-comment-author, #wpdcom .wpd-comment-author a, #wpdcom .wpd-comment-text, #wpdcom .wpd-comment-text p, #wpdcom .wpd-comment-text li { color: var(--mnd-text); } #wpdcom .wpd-comment-date, #wpdcom .wpd-comment-date *, #wpdcom .wpd-comment-label, #wpdcom .wpd-comment-share, #wpdcom .wpd-vote, #wpdcom .wpd-vote *, #wpdcom .wpd-reply-button, #wpdcom .wpd-reply-button *, #wpdcom .wpd-toggle, #wpdcom .wpd-toggle *, #wpdcom .wpd-comment-footer, #wpdcom .wpd-comment-footer *, #wpdcom .wpd-sbs-toggle, #wpdcom .wpd-sbs-toggle *, #wpdcom .wpdiscuz-sort-button, #wpdcom .wpd-filter, #wpdcom .wpd-filter * , #wpdcom .wpd-comment-subheader, #wpdcom .wpd-reply-to, #wpdcom .wpd-reply-to * { color: var(--mnd-muted); } #wpdcom .wpdiscuz-sort-button-active, #wpdcom .wpd-comment-author a:hover { color: var(--mnd-link); } #wpdcom .wpd-blog-user .wpd-comment-label, #wpdcom .wpd-blog-administrator .wpd-comment-label, #wpdcom .wpd-blog-user .wpd-comment-label span, #wpdcom .wpd-blog-administrator .wpd-comment-label span { color: #fff; background-color: var(--mnd-brand); border-color: var(--mnd-brand); } #wpdcom .wpd-comment-right:target, .wpd-comment-right:target { background-color: #3a3517; } #wpdcom .wpd-form-row .wpdiscuz-item input, #wpdcom textarea, #wpdcom .wpd-form .wpdiscuz-textarea-wrap, #wpdcom .ql-container, #wpdcom .ql-editor, #wpdcom .ql-toolbar, #wpdcom .wpd-editor-char-counter, #wpdcom .wpd-form-row .wpdiscuz-item .wpd-field, #wpdcom .wpdiscuz-textarea-wrap textarea { background-color: var(--mnd-surface); color: var(--mnd-text); border-color: var(--mnd-border); } #wpdcom .wpd-form-row .wpdiscuz-item .wpd-field-icon, #wpdcom .wpd-field-icon, #wpdcom .fas, #wpdcom .far { color: var(--mnd-muted); } #wpdcom .wpd-avatar img, #wpdcom .avatar { border-color: var(--mnd-border); } #wpdcom .wpd-prim-button, #wpdcom .wc_comm_submit { background-color: var(--mnd-brand); color: #fff; } /* Footer: already dark blue-grey; muted links get brighter */ .footer-wrapper, .absolute-footer, .footer-2, #footer { background-color: #1e2b3a; } .absolute-footer, .absolute-footer a, .footer-secondary a, .copyright-footer, .copyright-footer a, .absolute-footer .nav > li > a, .absolute-footer .menu-item a { color: rgba(255, 255, 255, .78); } .absolute-footer a:hover, .absolute-footer .nav > li > a:hover { color: #fff; } /* wpDiscuz layout 3: header strip, votes, reply button, sort menu (their selectors are (1,3,0), hence html + full chain) */ html #wpdcom.wpd-layout-3 .wpd-comment .wpd-comment-header { background-color: var(--mnd-surface); } html #wpdcom.wpd-layout-3 .wpd-comment.wpd-sticky-comment .wpd-comment-header { background-color: #1f2a1f; } html #wpdcom.wpd-layout-3 .wpd-comment .wpd-reply-to { background-color: var(--mnd-surface); } html #wpdcom.wpd-layout-3 .wpd-comment .wpd-reply-to, html #wpdcom.wpd-layout-3 .wpd-comment .wpd-reply-to * { color: var(--mnd-muted); } html #wpdcom.wpd-layout-3 .wpd-comment .wpd-reply-to a { color: var(--mnd-link); } html #wpdcom .wpd-up { color: #3fcf85 !important; } html #wpdcom.wpd-layout-3 .wpd-comment .wpd-comment-footer .wpd-vote-result, html #wpdcom.wpd-layout-3 .wpd-comment .wpd-comment-footer .wpd-reply-button, html #wpdcom.wpd-layout-3 .wpd-comment .wpd-comment-footer .wpd-tool-wrap i, html #wpdcom.wpd-layout-3 .wpd-comment-footer .wpd-toggle .wpd-view-replies { background-color: var(--mnd-bg); color: var(--mnd-muted); border-color: #6b746d; } html #wpdcom.wpd-layout-3 .wpd-comment .wpd-comment-footer .wpd-vote-up, html #wpdcom.wpd-layout-3 .wpd-comment .wpd-comment-footer .wpd-vote-down { border-color: #6b746d; } html #wpdcom .wpd-comment .wpd-avatar img.avatar, html #wpdcom .wpd-form .wpd-avatar img.avatar { border-color: var(--mnd-border); } html #wpdcom .wpdiscuz-sort-buttons, html #wpdcom .wpd-tools-actions, html #wpdcom .page-numbers { background-color: var(--mnd-surface); border-color: var(--mnd-border); } html #wpdcom .wpdiscuz-sort-buttons .wpdiscuz-sort-button:hover, html #wpdcom .wpd-tools-actions .wpd-cta-button:hover { background-color: var(--mnd-surface-2); } html #wpdcom .wpd-second-button { background-color: var(--mnd-surface-2); color: var(--mnd-text); box-shadow: none; } html #wpdcom .wpd-comment-text .wpd-inline-feedback-wrapper, html #wpdcom .wpdiscuz-spoiler-wrap { background-color: var(--mnd-surface); color: var(--mnd-text); } html #wpdcom .wpd-thread-head .wpd-thread-info, html #wpdcom .wpd-thread-head .wpd-thread-info * { color: var(--mnd-text); } html #wpdcom .wpd-thread-head .wpd-thread-info { border-bottom-color: var(--mnd-link); } html #wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt textarea.wc_comment { background-color: var(--mnd-surface); color: var(--mnd-text); border-color: var(--mnd-border); } html #wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt textarea.wc_comment::placeholder { color: #9aa29b; } html #wpdcom .wpd-form-row .wpdiscuz-item input[type="text"], html #wpdcom .wpd-form-row .wpdiscuz-item input[type="email"] { background-color: var(--mnd-surface); color: var(--mnd-text); border-color: var(--mnd-border); } html .blog-comment-float .blog-comment-float__count, html .blog-comment-float span[class*="count"] { background-color: var(--mnd-bg); color: var(--mnd-link); } /* Table of contents: the box carries .ez-toc-white etc., (1,1,0) */ html #ez-toc-container[class], html #ez-toc-container.ez-toc-white, html #ez-toc-container.ez-toc-light-blue { background: var(--mnd-surface); border-color: var(--mnd-border); } html #ez-toc-container[class] a, html #ez-toc-container[class] a:visited { color: var(--mnd-link); } html #ez-toc-container[class] a:hover { color: var(--mnd-link-hover); } html #ez-toc-container[class] p.ez-toc-title, html #ez-toc-container[class] .ez-toc-title { color: var(--mnd-text); } html #ez-toc-container[class] a.ez-toc-toggle { color: var(--mnd-text); background: transparent; } /* Star ratings: the empty stars are grey images/glyphs, their label text */ .post-ratings label span, .post-ratings .post-ratings-text { color: var(--mnd-muted); } /* Cookie box of the blog (css/consent.css, loaded after this file: same selectors + html) */ html .bc-box { background: var(--mnd-surface); color: var(--mnd-text); border-color: var(--mnd-border); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); } html .bc .bc-decline { color: var(--mnd-text); border-color: #6b746d; } html .bc .bc-accept { background: var(--mnd-brand); border-color: var(--mnd-brand); color: #fff; } html .bc-reopen { background: #5a625c; color: #fff; } html img[data-consent] { background: var(--mnd-surface-2); } /* Reading progress bar (css/widgets.css): track takes the page colour */ html .readingProgressbar { background-color: var(--mnd-bg); } /* B37 product cards (inline