/* * NLT Dark Mode * ------------------------------------------------------------------ * Blocksy drives nearly all of its color output through 8 CSS custom * properties (--theme-palette-color-1 through -8), the same 8 swatches * shown in Customizer > Global Color Palette. Rather than overriding * dozens of individual selectors (which breaks on every Blocksy update), * we override those 8 variables directly. Every element that already * uses the palette - text, links, headings, borders, backgrounds - * picks up the dark values automatically. * * Dark is the DEFAULT (no attribute needed). Adding data-theme="light" * to reverts to Blocksy's original values below, since no rule * here matches and Blocksy's own :root values take over again. * * Original (light) palette, for reference: * 1 #2872fa 2 #1559ed 3 #3A4F66 4 #192a3d * 5 #e1e8ed 6 #f2f5f7 7 #FAFBFC 8 #ffffff */ html:not([data-theme="light"]) { --theme-palette-color-1: #4d8dff; /* accent (brightened for contrast on dark bg) */ --theme-palette-color-2: #2872fa; /* accent hover / secondary */ --theme-palette-color-3: #c3ccd6; /* base text */ --theme-palette-color-4: #f0f4f8; /* headings */ --theme-palette-color-5: #2b3542; /* borders */ --theme-palette-color-6: #10141a; /* subtle / alternate background */ --theme-palette-color-7: #161c24; /* main page background */ --theme-palette-color-8: #1f2830; /* card / box surface background */ } /* * Belt-and-suspenders: some setups (WordPress's own Customize > Background * Image color, or a page-builder section) set a literal background-color * on or specific wrappers rather than reading the palette variable. * !important guarantees our dark background wins regardless of where else * white is coming from. */ html:not([data-theme="light"]), html:not([data-theme="light"]) body, html:not([data-theme="light"]) #page, html:not([data-theme="light"]) .content-area, html:not([data-theme="light"]) .ct-container, html:not([data-theme="light"]) .site, html:not([data-theme="light"]) .ct-page-wrapper, html:not([data-theme="light"]) header, html:not([data-theme="light"]) header.header, html:not([data-theme="light"]) .header { background-color: var(--theme-palette-color-7) !important; } /* Slightly dim photos so bright product shots don't glare against the dark background. */ html:not([data-theme="light"]) img { filter: brightness(0.92); } /* * Blocksy's header rows: the "top" row (menu strip) has an explicit rule * of its own - [data-header*="type-1"] .ct-header [data-row*="top"] - * using --theme-palette-color-8 (our lighter card-surface tone). That's * fine for actual cards, but it makes the top menu strip a visibly * different shade than the rest of the header/page. Force every header * row to match the main page background instead, so the header reads as * one seamless dark bar. */ html:not([data-theme="light"]) .ct-header [data-row] { background-color: var(--theme-palette-color-7) !important; } /* ------------------------------------------------------------------ * WPForms - the plugin ships its own label styling that ignores * Blocksy's palette entirely, so labels stay dark-on-dark unless we * override them directly. * ------------------------------------------------------------------ */ html:not([data-theme="light"]) .wpforms-container label, html:not([data-theme="light"]) .wpforms-field-label, html:not([data-theme="light"]) .wpforms-field-label-inline, html:not([data-theme="light"]) .wpforms-form label { color: var(--theme-palette-color-3) !important; } /* ------------------------------------------------------------------ * Toggle button * ------------------------------------------------------------------ */ .nlt-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--theme-palette-color-5); background: var(--theme-palette-color-8); cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; vertical-align: middle; } .nlt-theme-toggle:hover { background: var(--theme-palette-color-6); transform: scale(1.05); } .nlt-theme-toggle svg { width: 18px; height: 18px; color: var(--theme-palette-color-3); pointer-events: none; } /* Show the moon by default (we're in dark mode); swap to the sun once light mode is active. */ html:not([data-theme="light"]) .nlt-theme-toggle .nlt-icon-sun { display: none; } html[data-theme="light"] .nlt-theme-toggle .nlt-icon-moon { display: none; }