/* NU Dark Mode Toggle - base variables */ :root{ --nu-bg: #ffffff; --nu-text: #111111; --nu-muted: #555555; --nu-card: #f6f7f9; --nu-link: #0a84ff; --nu-link-hover: #0066cc; --nu-border: #e6e8ec; } /* Respect OS preference by default */ @media (prefers-color-scheme: dark){ :root{ --nu-bg: #0b0d10; --nu-text: #e6e9ef; --nu-muted: #a8b0bd; --nu-card: #12151a; --nu-link: #7ab7ff; --nu-link-hover: #a8d1ff; --nu-border: #1f2430; } } /* Manual override (JS toggles .nu-dmt-theme-dark / .nu-dmt-theme-light on ) */ .nu-dmt-theme-dark{ --nu-bg: #0b0d10; --nu-text: #e6e9ef; --nu-muted: #a8b0bd; --nu-card: #12151a; --nu-link: #7ab7ff; --nu-link-hover: #a8d1ff; --nu-border: #1f2430; } .nu-dmt-theme-light{ --nu-bg: #ffffff; --nu-text: #111111; --nu-muted: #555555; --nu-card: #f6f7f9; --nu-link: #0a84ff; --nu-link-hover: #0066cc; --nu-border: #e6e8ec; } /* Apply to common elements without fighting themes too hard */ html, body{ background: var(--nu-bg); color: var(--nu-text); } a{ color: var(--nu-link); } a:hover{ color: var(--nu-link-hover); } hr, .wp-block-separator, .widget, .card, .post, .entry, input, textarea, select{ background: var(--nu-card); color: var(--nu-text); border-color: var(--nu-border); } pre, code, .wp-block-code{ background: #0f1318; color: #e6e9ef; } table, th, td{ border-color: var(--nu-border); } /* Toggle button */ .nu-dmt-toggle{ position: fixed; right: 16px; bottom: 16px; z-index: 99999; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--nu-border); background: var(--nu-card); color: var(--nu-text); cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.25); line-height: 1; font-size: 14px; } .nu-dmt-toggle:hover{ filter: brightness(1.05); } @media (max-width: 782px){ .nu-dmt-toggle{ right: 12px; bottom: 12px; padding: 9px 12px; } }