A style api to make system.css your own
-Todo
- +
+
Color scheme toggle
+
+ system.css uses the custom property --system-cs-is-light to toggle the state of the
+ color mode. Light or dark.
+
+:root {
+ /**
+ * color-scheme state
+ *
+ * Example:
+ * color-mix(): Light mode is the first color value and dark mode the second.
+ * color: color-mix(in oklab, black var(--system-cs-state), white);
+ */
+ --system-cs-state: calc(var(--system-cs-is-light, 1 /* fallback to light mode */) * 100%);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --system-cs-is-light: 0; /* OFF */
+ }
+}
+ System Colors
Colour mixing
@@ -123,31 +154,337 @@Colour mixing
Browser Bugs
A number of system values don't work well in dark mode.