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.