Dark Mode Gen

Best Practices

• Use CSS variables - easier to maintain than hardcoded colors
• Test both modes - make sure contrast is good in both
• Don't forget images - some graphics need light/dark variants
• Respect system preference - use prefers-color-scheme

When to Use This

• Adding dark mode to an existing project
• Converting components that only have light styles
• Standardizing dark mode implementation across files
• Quick prototyping with dark mode support

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

• GitHub: https://github.com/LXGIC-Studios
• Twitter: https://x.com/lxgicstudios
• Substack: https://lxgicstudios.substack.com
• Website: https://lxgicstudios.com

Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

npx ai-dark-mode --help

How It Works

Reads your component files, identifies color definitions and styles, then adds appropriate dark mode variants. For Tailwind it adds dark: prefixes. For CSS it uses CSS variables with prefers-color-scheme.

License

MIT. Free forever. Use it however you want.