CSS

CSS is a stylesheet language. It is basically the cosmetic layer of a web page (i.e. HTML).

Variables

:root {
  --main-color: blue;
}

body {
  color: var(--main-color);
}

@property can define variables with more precisions

Light-dark themes

You can usecolor-scheme and light-dark() to easily define light-dark color themes.

/* Use at property level */
:root {
  color-scheme: light dark;
  --color-background: light-dark(white, black);
}

/* Use at media query level */
@media (prefers-color-scheme: light) {
  body {
    color: black;
  }
}

INFO

You can switch between themes with @matchMedia

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // …

// Watch for change
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

Read more: @matchMedia

Resources

• cssdb.org – A list of current and potential future CSS features
• projectwallace.com – CSS analyzer