/* * ThriveMag dark theme * * The selectors below support both automatic dark mode and a manual toggle. * For a manual toggle, add `dark-mode` to or , or set * data-theme="dark" on either element. */ @media (prefers-color-scheme: dark) { :root { --contrast: #F8FAFC !important; --contrast-2: #CBD5E1 !important; --contrast-3: #94A3B8 !important; --base: #0F172A !important; --base-2: #1E293B !important; --base-3: #111827 !important; --accent: #60A5FA !important; --teal-cyan: #22D3EE !important; --green: #4ADE80 !important; --magenta: #F0ABFC !important; --thrive-dark-surface: #1B263B !important; color-scheme: dark; } } :is(html, body).dark-mode, :is(html, body)[data-theme="dark"] { --contrast: #F8FAFC; --contrast-2: #CBD5E1; --contrast-3: #94A3B8; --base: #0F172A; --base-2: #1E293B; --base-3: #111827; --accent: #60A5FA; --teal-cyan: #22D3EE; --green: #4ADE80; --magenta: #F0ABFC; --thrive-dark-surface: #1B263B; color-scheme: dark; } /* A saved light preference must also win when the operating system is dark. */ :is(html, body)[data-theme="light"] { --contrast: #0F172A !important; --contrast-2: #475569 !important; --contrast-3: #B2B2BE !important; --base: #F6F8FB !important; --base-2: #E6EAF0 !important; --base-3: #FFFFFF !important; --accent: #2563EB !important; --teal-cyan: #06B6D4 !important; --green: #22C55E !important; --magenta: #D946EF !important; color-scheme: light; } /* Page, typography and the most common GeneratePress surfaces. */ @media (prefers-color-scheme: dark) { body, .site, .site-content, .content-area, .widget-area, .site-main { background-color: var(--base); color: var(--contrast-2); } } :is(html.dark-mode body, body.dark-mode, html[data-theme="dark"] body, body[data-theme="dark"]), :is(html, body).dark-mode .site, :is(html, body)[data-theme="dark"] .site, :is(html, body).dark-mode .site-content, :is(html, body)[data-theme="dark"] .site-content, :is(html, body).dark-mode .content-area, :is(html, body)[data-theme="dark"] .content-area, :is(html, body).dark-mode .widget-area, :is(html, body)[data-theme="dark"] .widget-area, :is(html, body).dark-mode .site-main, :is(html, body)[data-theme="dark"] .site-main { background-color: var(--base); color: var(--contrast-2); } @media (prefers-color-scheme: dark) { h1, h2, h3, h4, h5, h6, .entry-title a, .site-title a, .site-description { color: var(--contrast); } a { color: var(--accent); } a:hover, a:focus { color: var(--teal-cyan); } blockquote, pre, code, .wp-block-table th, .wp-block-table td, input, textarea, select { border-color: var(--base-2); } input, textarea, select { background-color: var(--base-3); color: var(--contrast); } } :is(html, body).dark-mode :is(h1, h2, h3, h4, h5, h6, .entry-title a, .site-title a, .site-description), :is(html, body)[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, .entry-title a, .site-title a, .site-description) { color: var(--contrast); } :is(html, body).dark-mode a, :is(html, body)[data-theme="dark"] a { color: var(--accent); } :is(html, body).dark-mode a:hover, :is(html, body).dark-mode a:focus, :is(html, body)[data-theme="dark"] a:hover, :is(html, body)[data-theme="dark"] a:focus { color: var(--teal-cyan); } /* Header, menus and GenerateBlocks navigation. */ @media (prefers-color-scheme: dark) { .site-header, .gb-site-header-87fe8901 { background-color: var(--base-3); border-color: var(--base-2); } } :is(html, body).dark-mode :is(.site-header, .gb-site-header-87fe8901), :is(html, body)[data-theme="dark"] :is(.site-header, .gb-site-header-87fe8901) { background-color: var(--base-3); border-color: var(--base-2); } :is(html, body).dark-mode :is(.main-navigation, .gb-menu-container-9a140157.gb-menu-container--mobile), :is(html, body)[data-theme="dark"] :is(.main-navigation, .gb-menu-container-9a140157.gb-menu-container--mobile) { background: var(--base-3); border-color: var(--base-2); } :is(html, body).dark-mode :is(.main-navigation .main-nav ul li a, .gb-menu-link), :is(html, body)[data-theme="dark"] :is(.main-navigation .main-nav ul li a, .gb-menu-link) { color: var(--contrast-2); } :is(html, body).dark-mode :is(.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li a:focus-visible, .gb-menu-link:hover, .gb-menu-link:focus-visible), :is(html, body)[data-theme="dark"] :is(.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li a:focus-visible, .gb-menu-link:hover, .gb-menu-link:focus-visible) { color: var(--accent); } :is(html, body).dark-mode .main-navigation .main-nav ul li:is(.current-menu-item, .current-menu-ancestor) > a, :is(html, body)[data-theme="dark"] .main-navigation .main-nav ul li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--contrast); box-shadow: inset 0 -3px 0 0 var(--teal-cyan); } @media (prefers-color-scheme: dark) { .main-navigation, .gb-menu-container-9a140157.gb-menu-container--mobile { background: var(--base-3); border-color: var(--base-2); } .main-navigation .main-nav ul li a, .gb-menu-link { color: var(--contrast-2); } .main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li a:focus-visible, .gb-menu-link:hover, .gb-menu-link:focus-visible { color: var(--accent); } .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--contrast); box-shadow: inset 0 -3px 0 0 var(--teal-cyan); } } /* Keep cards, dropdowns and buttons distinct from the page background. */ @media (prefers-color-scheme: dark) { .gb-sub-menu-sm2c406a .menu-item, .gbp-overlay-panel, button, input[type="button"], input[type="submit"], .wp-block-button__link { background-color: var(--base-2); color: var(--contrast); border-color: var(--base-2); } button:hover, button:focus, input[type="button"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover, .wp-block-button__link:focus { background-color: var(--accent); color: #0F172A; } /* Legacy GenerateBlocks text-button IDs are retained as fallbacks. */ .gb-text-9afcc3ce, .gbp-button--primary, .wp-block-button__link { background-color: var(--accent); color: #0F172A; } .gb-text-2e1aa595, .gbp-button--secondary { border-color: var(--accent); color: var(--accent); } } /* Manual-theme equivalents for the component rules above. */ :is(html, body).dark-mode :is(.gb-sub-menu-sm2c406a .menu-item, .gbp-overlay-panel, button, input[type="button"], input[type="submit"], .wp-block-button__link), :is(html, body)[data-theme="dark"] :is(.gb-sub-menu-sm2c406a .menu-item, .gbp-overlay-panel, button, input[type="button"], input[type="submit"], .wp-block-button__link) { background-color: var(--base-2); color: var(--contrast); border-color: var(--base-2); } :is(html, body).dark-mode :is(input, textarea, select), :is(html, body)[data-theme="dark"] :is(input, textarea, select) { background-color: var(--base-3); color: var(--contrast); border-color: var(--base-2); } :is(html, body).dark-mode :is(button:hover, button:focus, input[type="button"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover, .wp-block-button__link:focus), :is(html, body)[data-theme="dark"] :is(button:hover, button:focus, input[type="button"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover, .wp-block-button__link:focus) { background-color: var(--accent); color: #0F172A; } /* GenerateBlocks primary buttons are anchors, so override the generic link colour. */ :is(html, body).dark-mode :is(.gbp-button--primary, .wp-block-button__link), :is(html, body)[data-theme="dark"] :is(.gbp-button--primary, .wp-block-button__link) { background-color: var(--accent) !important; color: #0F172A !important; } :is(html, body).dark-mode :is(.gbp-button--primary, .wp-block-button__link):is(:hover, :focus), :is(html, body)[data-theme="dark"] :is(.gbp-button--primary, .wp-block-button__link):is(:hover, :focus) { background-color: var(--teal-cyan) !important; color: #0F172A !important; } /* GenerateBlocks headings often carry their own class-level colour. */ @media (prefers-color-scheme: dark) { :is(h1, h2, h3, h4, h5, h6, [role="heading"])[class*="gb-text-"], .gb-container :is(h1, h2, h3, h4, h5, h6, [role="heading"]) { color: var(--contrast) !important; } } :is(html, body).dark-mode :is(h1, h2, h3, h4, h5, h6, [role="heading"])[class*="gb-text-"], :is(html, body)[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, [role="heading"])[class*="gb-text-"], :is(html, body).dark-mode .gb-container :is(h1, h2, h3, h4, h5, h6, [role="heading"]), :is(html, body)[data-theme="dark"] .gb-container :is(h1, h2, h3, h4, h5, h6, [role="heading"]) { color: var(--contrast) !important; } /* The footer is intentionally an inverse surface in the light palette. * Keep it dark in dark mode and restore readable text for every heading. */ .gb-element-c5a64d28 :is(h1, h2, h3, h4, h5, h6, [role="heading"]), .gb-element-c5a64d28 :is(p, li, span), .gb-element-c5a64d28 a { color: var(--base-3); } @media (prefers-color-scheme: dark) { .site-footer, footer, .gb-element-c5a64d28, .gb-element-a663be27, .gb-element-a08b4f6c { background-color: var(--thrive-dark-surface) !important; color: var(--contrast-2); } .site-footer :is(h1, h2, h3, h4, h5, h6), footer :is(h1, h2, h3, h4, h5, h6), .site-footer [role="heading"], footer [role="heading"], .gb-element-c5a64d28 :is(h1, h2, h3, h4, h5, h6, [role="heading"]) { color: var(--contrast) !important; } .site-footer a, footer a { color: var(--contrast-2); } .site-footer a:hover, .site-footer a:focus, footer a:hover, footer a:focus { color: var(--accent); } } :is(html, body).dark-mode :is(.site-footer, footer, .gb-element-c5a64d28, .gb-element-a663be27, .gb-element-a08b4f6c), :is(html, body)[data-theme="dark"] :is(.site-footer, footer, .gb-element-c5a64d28, .gb-element-a663be27, .gb-element-a08b4f6c) { background-color: var(--thrive-dark-surface) !important; color: var(--contrast-2); } :is(html, body).dark-mode :is(.site-footer, footer) :is(h1, h2, h3, h4, h5, h6, [role="heading"]), :is(html, body)[data-theme="dark"] :is(.site-footer, footer) :is(h1, h2, h3, h4, h5, h6, [role="heading"]) { color: var(--contrast) !important; } :is(html, body).dark-mode .gb-element-c5a64d28 :is(h1, h2, h3, h4, h5, h6, [role="heading"]), :is(html, body)[data-theme="dark"] .gb-element-c5a64d28 :is(h1, h2, h3, h4, h5, h6, [role="heading"]) { color: var(--contrast) !important; } :is(html, body).dark-mode :is(.site-footer, footer) a, :is(html, body)[data-theme="dark"] :is(.site-footer, footer) a { color: var(--contrast-2); } :is(html, body).dark-mode :is(.site-footer, footer) a:hover, :is(html, body).dark-mode :is(.site-footer, footer) a:focus, :is(html, body)[data-theme="dark"] :is(.site-footer, footer) a:hover, :is(html, body)[data-theme="dark"] :is(.site-footer, footer) a:focus { color: var(--accent); } /* Use semantic elements for body copy so new GenerateBlocks content is covered. */ @media (prefers-color-scheme: dark) { .gb-container :is(p, li, dt, dd, figcaption), .entry-content :is(p, li, dt, dd, figcaption), .widget-area :is(p, li, dt, dd, figcaption), p[class*="gb-text-"], li[class*="gb-text-"] { color: var(--contrast-2) !important; } } :is(html, body).dark-mode :is(.gb-container, .entry-content, .widget-area) :is(p, li, dt, dd, figcaption), :is(html, body)[data-theme="dark"] :is(.gb-container, .entry-content, .widget-area) :is(p, li, dt, dd, figcaption), :is(html, body).dark-mode :is(p, li)[class*="gb-text-"], :is(html, body)[data-theme="dark"] :is(p, li)[class*="gb-text-"] { color: var(--contrast-2) !important; } /* Article and section-title links are headings first, links second. */ @media (prefers-color-scheme: dark) { :is(h1, h2, h3, h4, h5, h6) a, :is(h1, h2, h3, h4, h5, h6)[class*="gb-text-"] { color: var(--contrast) !important; } :is(h1, h2, h3, h4, h5, h6) a:hover, :is(h1, h2, h3, h4, h5, h6) a:focus-visible { color: var(--accent) !important; } } :is(html, body).dark-mode :is(h1, h2, h3, h4, h5, h6) a, :is(html, body)[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) a, :is(html, body).dark-mode :is(h1, h2, h3, h4, h5, h6)[class*="gb-text-"], :is(html, body)[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6)[class*="gb-text-"] { color: var(--contrast) !important; } :is(html, body).dark-mode :is(h1, h2, h3, h4, h5, h6) a:hover, :is(html, body).dark-mode :is(h1, h2, h3, h4, h5, h6) a:focus-visible, :is(html, body)[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) a:hover, :is(html, body)[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) a:focus-visible { color: var(--accent) !important; } /* Inverse/white buttons need dark text, never the link accent colour. */ @media (prefers-color-scheme: dark) { .gb-text-d2aa2e62, :is(.has-white-background-color, .has-base-3-background-color) { color: #0F172A !important; } .gb-text-d2aa2e62:hover, .gb-text-d2aa2e62:focus, :is(.has-white-background-color, .has-base-3-background-color):hover, :is(.has-white-background-color, .has-base-3-background-color):focus { color: #0F172A !important; } } :is(html, body).dark-mode :is(.has-white-background-color, .has-base-3-background-color), :is(html, body)[data-theme="dark"] :is(.has-white-background-color, .has-base-3-background-color) { color: #0F172A !important; } :is(html, body).dark-mode :is(.has-white-background-color, .has-base-3-background-color):is(:hover, :focus), :is(html, body)[data-theme="dark"] :is(.has-white-background-color, .has-base-3-background-color):is(:hover, :focus) { color: #0F172A !important; } /* Fluent Forms: use stable plugin classes rather than form-specific IDs. */ @media (prefers-color-scheme: dark) { .fluentform, .fluentform_wrapper { color: var(--contrast-2); } .fluentform :is(.ff-el-input--label, label, legend), .fluentform :is(.ff-el-input--content, .ff-el-form-check-label), .fluentform :is(.ff-el-help-message, .ff-el-input--description) { color: var(--contrast-2); } .fluentform :is(.ff-el-form-control, .ff-el-form-check-input, select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"]) { background-color: var(--base-3); border-color: var(--base-2); color: var(--contrast); } .fluentform :is(.ff-el-form-control, select, textarea, input)::placeholder { color: var(--contrast-3); opacity: 1; } .fluentform :is(.ff-el-form-control, select, textarea, input):focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); outline: none; } .fluentform :is(.ff-btn-submit, .ff-btn, button[type="submit"]) { background-color: var(--accent); border-color: var(--accent); color: #0F172A; } .fluentform :is(.ff-btn-submit, .ff-btn, button[type="submit"]):is(:hover, :focus) { background-color: var(--teal-cyan); border-color: var(--teal-cyan); color: #0F172A; } .fluentform :is(.ff-message-success, .ff-success, .ff-errors, .error, .ff-error) { background-color: var(--base-2); border-color: var(--contrast-3); color: var(--contrast-2); } .fluentform :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); } } :is(html, body).dark-mode :is(.fluentform, .fluentform_wrapper), :is(html, body)[data-theme="dark"] :is(.fluentform, .fluentform_wrapper) { color: var(--contrast-2); } :is(html, body).dark-mode .fluentform :is(.ff-el-input--label, label, legend, .ff-el-input--content, .ff-el-form-check-label, .ff-el-help-message, .ff-el-input--description), :is(html, body)[data-theme="dark"] .fluentform :is(.ff-el-input--label, label, legend, .ff-el-input--content, .ff-el-form-check-label, .ff-el-help-message, .ff-el-input--description) { color: var(--contrast-2); } :is(html, body).dark-mode .fluentform :is(.ff-el-form-control, .ff-el-form-check-input, select, textarea, input), :is(html, body)[data-theme="dark"] .fluentform :is(.ff-el-form-control, .ff-el-form-check-input, select, textarea, input) { background-color: var(--base-3); border-color: var(--base-2); color: var(--contrast); } :is(html, body).dark-mode .fluentform :is(.ff-el-form-control, select, textarea, input)::placeholder, :is(html, body)[data-theme="dark"] .fluentform :is(.ff-el-form-control, select, textarea, input)::placeholder { color: var(--contrast-3); opacity: 1; } :is(html, body).dark-mode .fluentform :is(.ff-el-form-control, select, textarea, input):focus, :is(html, body)[data-theme="dark"] .fluentform :is(.ff-el-form-control, select, textarea, input):focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); outline: none; } :is(html, body).dark-mode .fluentform :is(.ff-btn-submit, .ff-btn, button[type="submit"]), :is(html, body)[data-theme="dark"] .fluentform :is(.ff-btn-submit, .ff-btn, button[type="submit"]) { background-color: var(--accent); border-color: var(--accent); color: #0F172A !important; } :is(html, body).dark-mode .fluentform :is(.ff-btn-submit, .ff-btn, button[type="submit"]):is(:hover, :focus), :is(html, body)[data-theme="dark"] .fluentform :is(.ff-btn-submit, .ff-btn, button[type="submit"]):is(:hover, :focus) { background-color: var(--teal-cyan); border-color: var(--teal-cyan); color: #0F172A !important; } :is(html, body).dark-mode .fluentform :is(.ff-message-success, .ff-success, .ff-errors, .error, .ff-error), :is(html, body)[data-theme="dark"] .fluentform :is(.ff-message-success, .ff-success, .ff-errors, .error, .ff-error) { background-color: var(--base-2); border-color: var(--contrast-3); color: var(--contrast-2); } :is(html, body).dark-mode .fluentform :is(input[type="checkbox"], input[type="radio"]), :is(html, body)[data-theme="dark"] .fluentform :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); } /* Add `thrive-soft-surface` to pale blue GenerateBlocks panels/cards. */ @media (prefers-color-scheme: dark) { .thrive-soft-surface { background-color: var(--base-2) !important; color: var(--contrast-2); } } :is(html, body).dark-mode .thrive-soft-surface, :is(html, body)[data-theme="dark"] .thrive-soft-surface { background-color: var(--base-2) !important; color: var(--contrast-2); } /* Header-ready theme toggle. The icon is supplemented by an accessible label. */ .thrivemag-theme-toggle { align-items: center; background: transparent !important; border: 0 !important; border-radius: 0; color: var(--contrast) !important; cursor: pointer; display: inline-flex; justify-content: center; line-height: 1; min-height: 2rem; min-width: 2rem; padding: 0.35rem; transition: color 150ms ease; } .thrivemag-theme-toggle:hover, .thrivemag-theme-toggle:focus-visible { background: transparent !important; color: var(--accent) !important; } .thrivemag-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .thrivemag-theme-toggle__icon { display: inline-flex; height: 1.25rem; width: 1.25rem; } .thrivemag-theme-toggle__icon svg { display: block; height: 100%; width: 100%; } /* Avoid bright native controls and images making the dark theme feel uneven. */ @media (prefers-color-scheme: dark) { ::selection { background-color: var(--accent); color: #0F172A; } img, video { border-color: var(--base-2); } }