Dark and light theme with variables

Define colours once, switch them with a data attribute.

css intermediate #theming#dark-mode#variables
プレイグラウンドで開く
css-theme-variables.css
:root {
  --bg: #07080b; --surface: #101318; --text: #eceef3; --muted: #a7aebc; --accent: #2f6bff;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e8ebf0; --surface: #f6f7f9; --text: #11151c; --muted: #384151; --accent: #2257db;
  color-scheme: light;
}
body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); border-radius: 12px; padding: 16px; }
a { color: var(--accent); }