The color-scheme property enables native dark mode support and affects browser UI elements. Here's how to use it.
Basic Usage#
Loading code block...
System Colors#
Loading code block...
Form Element Styling#
Loading code block...
Theme Switching#
Loading code block...
Component-Level Schemes#
Loading code block...
Images and Media#
Loading code block...
Browser UI Integration#
Loading code block...
Scrollbar Styling#
Loading code block...
JavaScript Integration#
Loading code block...
Print Styling#
Loading code block...
Iframe Integration#
Loading code block...
Transition Effects#
Loading code block...
Best Practices#
Usage:
✓ Set on :root for global effect
✓ Use system colors
✓ Support both schemes
✓ Test in both modes
Benefits:
✓ Native form styling
✓ Scrollbar adaptation
✓ Reduced code
✓ System integration
Browser UI:
✓ Scrollbars
✓ Form controls
✓ Selection colors
✓ Caret styling
Avoid:
✗ Ignoring system preference
✗ Inconsistent schemes
✗ Forgetting form elements
✗ Hard-coded colors
Conclusion#
The color-scheme property enables native dark mode support by telling browsers which color schemes your content supports. It automatically adapts form elements, scrollbars, and other browser UI. Combine with CSS custom properties and system colors for comprehensive theme support that respects user preferences.