/* ========================================================================== * Dark/Light mode CSS variable overrides. * Dark is the default (:root). Light activates via .light on . * Tokens match the web app (apps/web/src/app/globals.css) for consistency. * ========================================================================== */ /* --- Universal border color reset (matches web app) --- */ *, *::before, *::after { border-color: var(--wapuu-border, var(--wp--preset--color--border)); } /* --- Dark mode (default) --- */ :root { --wapuu-background: #09090b; --wapuu-foreground: #fafafa; --wapuu-card: #18181b; --wapuu-card-foreground: #fafafa; --wapuu-primary: #21759B; --wapuu-primary-light: #2D8FB4; --wapuu-primary-dark: #1A5F7E; --wapuu-primary-foreground: #ffffff; --wapuu-secondary: #27272a; --wapuu-secondary-foreground: #f4f4f5; --wapuu-muted: #27272a; --wapuu-muted-foreground: #a1a1aa; --wapuu-accent: #21759B; --wapuu-accent-foreground: #ffffff; --wapuu-border: #3f3f46; --wapuu-input: #3f3f46; --wapuu-ring: #21759B; } /* --- Light mode --- */ .light { --wapuu-background: #ffffff; --wapuu-foreground: #09090b; --wapuu-card: #ffffff; --wapuu-card-foreground: #09090b; --wapuu-primary: #21759B; --wapuu-primary-light: #2D8FB4; --wapuu-primary-dark: #1A5F7E; --wapuu-primary-foreground: #ffffff; --wapuu-secondary: #f4f4f5; --wapuu-secondary-foreground: #18181b; --wapuu-muted: #f4f4f5; --wapuu-muted-foreground: #71717a; --wapuu-accent: #21759B; --wapuu-accent-foreground: #ffffff; --wapuu-border: #e4e4e7; --wapuu-input: #e4e4e7; --wapuu-ring: #21759B; } /* Override WP theme.json colors in light mode */ .light { --wp--preset--color--background: #ffffff; --wp--preset--color--foreground: #09090b; --wp--preset--color--card: #ffffff; --wp--preset--color--card-foreground: #09090b; --wp--preset--color--secondary: #f4f4f5; --wp--preset--color--secondary-foreground: #18181b; --wp--preset--color--muted: #f4f4f5; --wp--preset--color--muted-foreground: #71717a; --wp--preset--color--border: #e4e4e7; --wp--preset--color--input: #e4e4e7; } /* --- Body base styles (matches web app) --- */ body { background-color: var(--wapuu-background); color: var(--wapuu-foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.2s ease, color 0.2s ease; } /* --- Dark mode toggle button --- */ .wapuu-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--wapuu-border); border-radius: 0.75rem; background: var(--wapuu-card); color: var(--wapuu-muted-foreground); cursor: pointer; transition: background-color 0.15s, color 0.15s; } .wapuu-theme-toggle:hover { background: var(--wapuu-secondary); color: var(--wapuu-foreground); } .wapuu-theme-toggle svg { width: 1rem; height: 1rem; } /* Show/hide icons based on current theme mode (data-theme-mode attribute) */ .wapuu-icon-sun, .wapuu-icon-moon, .wapuu-icon-monitor { display: none; } /* Dark mode: show sun icon (click to switch to light) */ [data-theme-mode="dark"] .wapuu-icon-sun { display: inline-flex; } /* Light mode: show moon icon (click to switch to system) */ [data-theme-mode="light"] .wapuu-icon-moon { display: inline-flex; } /* System mode: show monitor icon (click to switch to dark) */ [data-theme-mode="system"] .wapuu-icon-monitor { display: inline-flex; } /* Fallback when no data-theme-mode yet (before JS runs) */ .dark .wapuu-icon-sun { display: inline-flex; } .light .wapuu-icon-moon { display: inline-flex; }