Implement Light and Dark theming with CSS variables and Zustand persistence.
npx skills add https://github.com/Artag-Chris/xproyect --skill theme-management
Please help me install this Agent Skill. Skill: theme-management Source: https://github.com/Artag-Chris/xproyect/tree/main/.agents/skills/theme-management Command: npx skills add https://github.com/Artag-Chris/xproyect --skill theme-management
Theming inconsistencies across UI projects cause accessibility issues and brand drift. This Skill provides a robust multi-theme system (Light and Dark) with design tokens, CSS variables, and smooth transitions to ensure consistent visuals and preserved user preferences.
.dark class on the HTML element, with CSS variables powering all styles for predictable theming.Toggle the .dark class on the root HTML element to switch themes and persist the user’s preference with Zustand so it remains across sessions.
High-intent search queries and answers about installing and using this skill.
Dark mode with CSS variables uses a root `.dark` class on the HTML element to swap design tokens. This approach ensures a single source of truth for styling, guaranteeing consistent branding and color contrast across light and dark themes.
To persist user theme preference across sessions with Zustand, use the persist middleware to save the selected theme to localStorage. This ensures the user's light or dark mode choice survives page reloads and browser restarts.
Accessible theming across multiple UI projects is best managed using a centralized design token system driven by CSS variables. This enforces consistent color contrast and prevents brand drift by providing a single source of truth for all components.
Yes, you can use Zustand for local storage theme persistence without additional dependencies. Zustand includes built-in persist middleware that directly interfaces with localStorage to save and retrieve user theme preferences across sessions.
Dark mode flashing on page reload often occurs when the Zustand store rehydrates asynchronously from localStorage. Ensuring the root `.dark` class applies immediately during initial load prevents the flash of incorrect theme.
Yes, theme-management works with existing CSS variable setups by toggling a root `.dark` class on the HTML element. It integrates token-driven styling seamlessly, allowing your current CSS variables to respond to theme changes predictably.
mDevsLabsDefine and enforce Zustand state management conventions for store slices and actions.
moughamirDefine Tailwind CSS design tokens and semantic theme utilities with @theme and CSS variables.
anderskevConfigure Tailwind CSS v4 themes using @theme directives and OKLCH colors.
Anuj23105Implement dark mode with theme switching, persistence, and system preference detection in React and Tailwind.