Dark Mode Strategist

This skill ensures that applications provide a comfortable and aesthetically pleasing experience in low-light environments.

Instructions

1. Choose dark-base colors (not pure black) to reduce eye strain.
2. Adjust contrast for all elements in dark mode.
3. Implement system-preference detection (prefers-color-scheme).
4. Use CSS variables or Tailwind's dark: modifier for implementation.
5. Ensure images and icons look good on dark backgrounds.

Examples

• "Give me a dark mode color palette for a dashboard."
• "Implement a toggle switch between light and dark mode in React."