A CLI tool to set up dark/light theme toggling in React projects with a professional folder structure.

Usage

Run the following command in your React project root:

npx dark-light-toggler-react

This will:

• Create src/provider/ThemeProvider.jsx
• Create src/components/buttons/ThemeToggle.jsx
• Create src/hooks/useTheme.js
• Create folders if they don't exist
• Create or overwrite jsconfig.json for path aliases
• Create or overwrite vite.config.js for alias and Tailwind plugin setup
• Install lucide-react and @types/node automatically

Next Steps

1. Add the theme script to your index.html for initial theme detection:

<script>
  (function () {
    try {
      const theme = localStorage.getItem("vite-ui-theme");
      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
      const resolved = theme === "dark" || (!theme && prefersDark) ? "dark" : "light";
      document.documentElement.classList.add(resolved);
    } catch (_) {}
  })();
</script>

2. Wrap your app with <ThemeProvider> in your main entry file (e.g., main.jsx).

3. Use <ThemeToggle /> anywhere in your app.

4. lucide-react and @types/node will be installed automatically by the CLI.

5. jsconfig.json and vite.config.js will be set up for path aliases and Tailwind plugin.

6. IMPORTANT: You must have Tailwind CSS v4 installed and set up with :root, .dark, and theme variables in your CSS for theme toggling to work. The CLI does not install Tailwind for you.

Example CSS Setup

Add the following to your global CSS file. You can customize colors as you need (e.g., src/index.css):

:root {
  /* Light theme variables */
  --background: #fff;
  --text: #222;
  /* ...other variables... */
}

.dark {
  /* Dark theme variables */
  --background: #222;
  --text: #fff;
  /* ...other variables... */
}

body {
  background: var(--background);
  color: var(--text);
}

Add more custom colors in :root and .dark and using the @theme directive you can then switch dark and light colors in any element.

For Example:

@theme {
  --color-button-background: var(--btn-bg-color);
}

:root {
  --btn-bg-color: #FF5656;
}

.dark {
  --btn-bg-color: #95E68B;
}

Then in the html file use the custom Tailwind class from @theme directive:

<div>
  <button className="bg-button-background">
    Click Me
  </button>
</div>

This ensures theme toggling works with Tailwind and your custom CSS variables.

## License
MIT