Follow the System Color Scheme

Override role tokens inside @media (prefers-color-scheme: dark) so the same markup stays readable without a JavaScript theme switcher.

Harbor notice

This card uses the same --color-* roles as the rest of Chapter 16. Toggle your OS light/dark preference to see the palette flip while contrast stays intentional.

No toggle button here on purpose — the media query is the lesson.

Important CSS

:root {
  --color-page: #f3f6f8;
  --color-surface: #ffffff;
  --color-text: #1f2933;
  --color-brand: #176b73;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #0f171a;
    --color-surface: #1a262b;
    --color-text: #e8eef1;
    --color-brand: #5ec4c8;
  }
}