Toggle website dark mode via HTML class and React component.
npx skills add https://github.com/Boristoka/claude-craft --skill darkmode
Please help me install this Agent Skill. Skill: darkmode Source: https://github.com/Boristoka/claude-craft/tree/main/.claude/skills/darkmode Command: npx skills add https://github.com/Boristoka/claude-craft --skill darkmode
This Skill provides methods to easily implement dark mode for a website, enhancing user experience and accessibility, especially in low-light conditions.
dark class to the <html> element for a permanent dark theme.dark-auto to follow the user's system preference.Add the 'dark' class to the <html> element in app/layout.tsx.
High-intent search queries and answers about installing and using this skill.
Implement automatic dark mode by using the 'dark-auto' class, which detects the user's system preference. This allows your website to dynamically match the operating system theme settings without manual toggling.
Yes, you can use a client-side React component to provide a user-facing toggle button. This component dynamically switches between light and dark themes by manipulating the HTML element's class attribute.
Persist dark mode preferences by utilizing the browser's localStorage. This ensures that a user's theme choice is saved and automatically applied on subsequent visits to the website.
No, this dark mode implementation requires no external dependencies. It operates by directly modifying the HTML element's class attribute and utilizing native browser features like localStorage and CSS variables.
jubalmConfigure CSS variable-based theming for shadcn/ui components with Tailwind.
udecodeCoordinate Jotai X atom stores across React components with persistence.
erikhazzardDesign frontend architectures with BEM, design tokens, and accessible markup.
Gentleman-ProgrammingAutomate Tailwind CSS 4 adoption with cn(), theme variables, and safe arbitrary values.