// Adds light and dark mode theming to the SUDO codebase. Implements theme toggling using CSS custom properties and next-themes. Use when the user wants to add dark mode, light mode, theme switching, or color scheme support.
Creates new Claude Code custom skills (slash commands) by generating SKILL.md files with proper frontmatter and instructions. Use when the user wants to create, add, define, or scaffold a new skill or slash command.
Build pixel art interfaces, retro 8-bit UIs, and CRT-styled pages using pure CSS techniques (box-shadow sprites, image-rendering pixelated, steps() animations) with optional canvas for advanced effects. Use this skill whenever the user asks for pixel art, retro gaming aesthetics, 8-bit style, CRT effects, scanline overlays, chiptune/retro UI, Game Boy or NES-style interfaces, pixel borders, sprite animations in CSS, or anything that should look like it belongs on a classic console or old monitor. Also trigger when the user wants to pixelate images, create retro loading screens, build nostalgic landing pages, or style any web content with a retro computing or arcade vibe — even if they don't explicitly say "pixel art."
Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y. Use for Playwright MCP browser automation, Vitest/Jest/RTL, flaky test triage, CI stabilization, and canvas/WebGL games (Phaser) needing deterministic input plus screenshot/state assertions. Trigger: "test", "E2E", "flaky", "visual regression", "Playwright", "game testing".
| name | adding-themes |
| description | Adds light and dark mode theming to the SUDO codebase. Implements theme toggling using CSS custom properties and next-themes. Use when the user wants to add dark mode, light mode, theme switching, or color scheme support. |
| allowed-tools | Read, Write, Edit, Bash(npm *), Glob, Grep |
This project uses Tailwind v4 with CSS custom properties defined in @theme inside src/app/globals.css. The current palette is dark-only (retro hacker aesthetic). The layout root is src/app/layout.tsx.
next-themes for theme state management:root (dark default) and .light class overrides in globals.cssThemeProvider with attribute="class"npm install next-themes
Move color variables from @theme into :root and add .light overrides:
:root {
--color-bg: #0a0a0a;
--color-bg-dark: #050505;
--color-bg-panel: #111111;
--color-bg-card: #161616;
--color-primary: #f97316;
--color-primary-dim: #c25a0e;
--color-accent: #22c55e;
--color-accent-dim: #16803a;
--color-danger: #ef4444;
--color-danger-dim: #b91c1c;
--color-warning: #eab308;
--color-text: #e5e5e5;
--color-text-dim: #a3a3a3;
--color-muted: #404040;
--color-border: #2a2a2a;
--color-cyan: #06b6d4;
--color-purple: #a855f7;
}
.light {
--color-bg: #f5f5f5;
--color-bg-dark: #e5e5e5;
--color-bg-panel: #ffffff;
--color-bg-card: #fafafa;
--color-primary: #ea580c;
--color-primary-dim: #c2410c;
--color-accent: #16a34a;
--color-accent-dim: #15803d;
--color-danger: #dc2626;
--color-danger-dim: #b91c1c;
--color-warning: #ca8a04;
--color-text: #171717;
--color-text-dim: #525252;
--color-muted: #d4d4d4;
--color-border: #e5e5e5;
--color-cyan: #0891b2;
--color-purple: #9333ea;
}
Keep the @theme block referencing these variables so Tailwind can resolve them.
ThemeProvider client wrapper component at src/components/providers/ThemeProvider.tsx<ThemeProvider attribute="class" defaultTheme="dark">suppressHydrationWarning to <html>Add a toggle component at src/components/ui/ThemeToggle.tsx using useTheme() from next-themes. Match the existing retro pixel aesthetic — use a simple sun/moon icon or text label like [LIGHT] / [DARK].
Add <ThemeToggle /> to the Navbar component at src/components/layout/Navbar.tsx.
src/app/globals.css — color palette definitionsrc/app/layout.tsx — theme provider wrappingsrc/components/layout/Navbar.tsx — toggle placementsrc/components/layout/ScanlineOverlay.tsx — may need opacity adjustment