Core Code
Core Code Modern Dev Handbook

Dark Mode Query

Detect user preferred color scheme.

Preview

Code

<style>
body{
background:white;
color:black;
}

@media (prefers-color-scheme:dark){
body{
background:#111827;
color:#f9fafb;
}
}
</style>

<p>System dark mode changes colors</p>

More CSS Media Queries Examples (8)

example Basic Media Query open example example Min Width Breakpoint open example example Max Width Breakpoint open example example Responsive Layout open example example Responsive Grid open example example Orientation Query open example example Reduced Motion Preference open example example Multiple Conditions open example