Variables in css!?

fallback values

.fallback {
  --color-text: white;
 
  background-color: var(--undeclared-property, black);
  color: var(--undeclared-again, var(--color-text, yellow));
}

scope - selector in which var is declared and its decendant

declare custom properties in root for whole document

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

prefers-color-scheme for themes

@media (prefers-color-scheme: dark) {
  :root {
    --border-btn: 1px solid rgb(220, 220, 220);
    --color-base-bg: rgb(18, 18, 18);
    --color-base-text: rgb(240, 240, 240);
    --color-btn-bg: rgb(36, 36, 36);
    --theme-name: "dark";
  }
}

dark & light are only valid options