/* ========================================================================== * Dark/Light mode CSS variable overrides. * Dark is the default (:root). Light activates via .light on . * Variable names match the Next.js marketing site for visual consistency. * ========================================================================== */ :root { --wapuu-background: #09090b; --wapuu-foreground: #fafafa; --wapuu-card: #18181b; --wapuu-card-foreground: #fafafa; --wapuu-border: #3f3f46; --wapuu-muted: #27272a; --wapuu-muted-foreground: #a1a1aa; --wapuu-secondary: #27272a; --wapuu-secondary-foreground: #f4f4f5; } .light { --wapuu-background: #ffffff; --wapuu-foreground: #09090b; --wapuu-card: #ffffff; --wapuu-card-foreground: #09090b; --wapuu-border: #e4e4e7; --wapuu-muted: #f4f4f5; --wapuu-muted-foreground: #71717a; --wapuu-secondary: #f4f4f5; --wapuu-secondary-foreground: #18181b; } /* 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; } /* Ensure body uses theme variables */ body { background-color: var(--wapuu-background); color: var(--wapuu-foreground); 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.5rem; 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 sun/moon icons based on current theme */ .dark .wapuu-icon-moon { display: none; } .dark .wapuu-icon-sun { display: block; } .light .wapuu-icon-sun { display: none; } .light .wapuu-icon-moon { display: block; }