:root { --theme-darkmode-bg-color: #000; --theme-darkmode-boxed-bg-color: #1e1e1e; --theme-darkmode-text-color: #fff; --theme-darkmode-accent-color: #066ac6; --theme-darkmode-accent-hover-color: #fff; --theme-black-color: #000; --theme-darkmode-bg-color-primary: #222; --theme-darkmode-bg-color-secondary: #364e3b; } [data-theme="dark"] { --swiper-theme-color: var(--theme-darkmode-accent-color); --preloader-throbber-bg: var(--theme-darkmode-text-color); } /* Dark mode css **------------------------------------------------ */ [data-theme="dark"] body, [data-theme="dark"] body.custom-background, [data-theme="dark"] .welcome-screen-banner, [data-theme="dark"] .blogquest-header_style_1 .site-header.data-bg .masthead-main-navigation, [data-theme="dark"] .primary-menu ul, [data-theme="dark"] .site-header .has-sticky-header.sticky-header-active, [data-theme="dark"] .theme-offcanvas-panel, [data-theme="dark"] .theme-search-panel, [data-theme="dark"] .post-read-time, [data-theme="dark"] .single-author-info-wrapper { background-color: var(--theme-darkmode-bg-color); } [data-theme="dark"] .blogquest-archive_style_4 .blogquest-bg-image { outline-color: var(--theme-darkmode-bg-color); } [data-theme="dark"] #page.site.boxed-layout, [data-theme="dark"] .theme-preloader { background: var(--theme-darkmode-boxed-bg-color); } [data-theme="dark"] body, [data-theme="dark"] body.custom-background, [data-theme="dark"] a, [data-theme="dark"] .tab-header-list li a, [data-theme="dark"] .theme-button.theme-button-transparent, [data-theme="dark"] .sticky-article-link { color: var(--theme-darkmode-text-color); } [data-theme="dark"] .single-author-info-area:before { background-color: var(--theme-darkmode-text-color); opacity: 0.25; } [data-theme="dark"] .theme-preloader-spinner-1 .theme-preloader-throbber:before { border-top-color: var(--theme-darkmode-text-color); border-right-color: var(--theme-darkmode-text-color); } [data-theme="dark"] #blogquest-progress-bar, [data-theme="dark"] button, [data-theme="dark"] .theme-button, [data-theme="dark"] .wp-block-search__button, [data-theme="dark"] input[type="button"], [data-theme="dark"] input[type="reset"], [data-theme="dark"] input[type="submit"], [data-theme="dark"] .has-post-thumbnail .featured-media .featured-media-fullscreen, [data-theme="dark"] .cursor-dot, [data-theme="dark"] .cursor-dot-outline, [data-theme="dark"] .swiper-button-next, [data-theme="dark"] .swiper-button-prev, [data-theme="dark"] #theme-scroll-to-start { background-color: var(--theme-darkmode-accent-color); } [data-theme="dark"] button, [data-theme="dark"] .theme-button, [data-theme="dark"] .wp-block-search__button, [data-theme="dark"] input[type="button"], [data-theme="dark"] input[type="reset"], [data-theme="dark"] input[type="submit"], [data-theme="dark"] .theme-offcanvas-menu a:focus-visible { border-color: var(--theme-darkmode-accent-color); } [data-theme="dark"] a:hover, [data-theme="dark"] a:focus, [data-theme="dark"] a:active, [data-theme="dark"] .theme-button.theme-button-transparent:hover, [data-theme="dark"] .theme-button.theme-button-transparent:focus { color: var(--theme-darkmode-accent-color); } [data-theme="dark"] button:hover, [data-theme="dark"] button:focus, [data-theme="dark"] .theme-button:hover, [data-theme="dark"] .theme-button:focus, [data-theme="dark"] .wp-block-search__button:hover, [data-theme="dark"] .wp-block-search__button:focus, [data-theme="dark"] input[type="button"]:hover, [data-theme="dark"] input[type="button"]:focus, [data-theme="dark"] input[type="reset"]:hover, [data-theme="dark"] input[type="reset"]:focus, [data-theme="dark"] input[type="submit"]:hover, [data-theme="dark"] input[type="submit"]:focus, [data-theme="dark"] .has-post-thumbnail .featured-media .featured-media-fullscreen:hover, [data-theme="dark"] .has-post-thumbnail .featured-media .featured-media-fullscreen:focus, [data-theme="dark"] #theme-scroll-to-start:focus, [data-theme="dark"] #theme-scroll-to-start:hover { background: var(--theme-darkmode-accent-hover-color); border-color: var(--theme-darkmode-accent-hover-color); color: var(--theme-darkmode-bg-color); } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] .site-topbar, [data-theme="dark"] .theme-offcanvas-header, [data-theme="dark"] .theme-offcanvas-menu li, [data-theme="dark"] .single-comments-area, [data-theme="dark"] .single-comments-area:before, [data-theme="dark"] .single-comments-area li.comment .children li:before, [data-theme="dark"] .single-comments-area li.pingback .children li:before, [data-theme="dark"] .single-comments-area li.trackback .children li:before, [data-theme="dark"] #site-content, [data-theme="dark"] .site-section, [data-theme="dark"] .theme-footer-top, [data-theme="dark"] .blogquest-archive_style_1 > article, [data-theme="dark"] .blogquest-archive_style_3 > article, [data-theme="dark"] .has-sidebar .site #site-content .wrapper #secondary, [data-theme="dark"] #site-content #secondary .widget, [data-theme="dark"] .widget_recent_entries ul li, [data-theme="dark"] .widget_recent_entries ol li, [data-theme="dark"] .widget_categories ul li, [data-theme="dark"] .widget_categories ol li, [data-theme="dark"] .widget_archive ul li, [data-theme="dark"] .widget_archive ol li, [data-theme="dark"] .widget_meta ul li, [data-theme="dark"] .widget_meta ol li, [data-theme="dark"] .widget_recent_comments ul li, [data-theme="dark"] .widget_recent_comments ol li, [data-theme="dark"] .widget_nav_menu ul li, [data-theme="dark"] .widget_nav_menu ol li, [data-theme="dark"] .widget_block .wp-block-group__inner-container ul li, [data-theme="dark"] .widget_block .wp-block-group__inner-container ol li, [data-theme="dark"] .wp-block-tag-cloud.is-style-outline a, [data-theme="dark"] .wp-block-search__input, [data-theme="dark"] .widget-tab-header { border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .sticky-article-link { background-color: var(--theme-black-color); } [data-theme="dark"] .blogquest-header_style_1 .masthead-main-navigation, [data-theme="dark"] .theme-search-panel, [data-theme="dark"] .blogquest-image-widget.style_2, [data-theme="dark"] .blogquest-image-widget.style_2 .widget-desc-wrapper:before { background-color: var(--theme-darkmode-bg-color-primary); } [data-theme="dark"] .data-bg, [data-theme="dark"] .theme-entry-media, [data-theme="dark"] .banner-layout-carousal-bg, [data-theme="dark"] .single-featured-banner .featured-banner-media { background-color: var(--theme-darkmode-bg-color-secondary); }