<!DOCTYPE html>
<html>
<head>
<style>
:root {
color-scheme: light dark;
--light-bg: snow;
--light-color: black;
--dark-bg: black;
--dark-color: snow;
}
* {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
.light {
color-scheme: light;
}
.dark {
color-scheme: dark;
}
</style>
</head>
<body>
<h1>CSS light-dark() function</h1>
<section>
<h2>Automatic</h2>
<p>This section will automatically react to the users system or browser settings.
If the user has set the settings to light, the light scheme with the --light variables will be used.
If the user has set the settings to dark, the dark scheme with the --dark variables will be used.</p>
</section>
<section class="light">
<h2>Light</h2>
<p>This section is forced to use the color-scheme: light.</p>
</section>
<section class="dark">
<h2>Dark</h2>