Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
:root {
  /* set color-scheme to switch between light or dark */
  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>