-
Notifications
You must be signed in to change notification settings - Fork 0
css • Theming light dark
Martin Dubé edited this page Jun 26, 2026
·
3 revisions
Requirements:
-
<meta name="color-scheme" content="light dark" />: Declare this meta within the<head>, before any stylesheets is gets loaded in the DOM. -
:root { color-scheme: light dark; }: Add this line with your before your set of CSS variables. -
color: light-dark(#333, #efe);: Declare the differences.
Meta name="color-scheme"
Multiple color schemes indicates that the first scheme is preferred by the document, but that the second scheme is acceptable if the user prefers it.
<html lang="…">
<head>
…
<meta name="color-scheme" content="light dark" />
<link rel="stylesheet" href="*.css" />
CSS root color-scheme declaration
:root {
color-scheme: light dark;
…
}
Declare each light-dark() style differences
body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}