HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>One palette, two themes</title>
    <style>
      *, *::before, *::after { box-sizing: border-box; }

/* Every token gets its value here, in the light palette.
         A token defined only inside a media query does not exist
         for anyone outside it. */
      :root {
        --bg: #f7f8fb;
        --surface: #ffffff;
        --border: #dde1e9;
        --text: #14161b;
        --muted: #5b6270;
        --accent: #2f5bd7;
        --accent-text: #ffffff;
      }

/* Only tokens are redefined - never a component rule. */
      :root[data-theme="dark"] {
        --bg: #0e1015;
        --surface: #171a21;
        --border: #2a2f3a;
        --text: #e9ebf0;
        --muted: #a2a9b8;
        --accent: #7d9dff;
        --accent-text: #0e1015;
      }

body {
        font: 16px/1.6 system-ui, sans-serif;
        margin: 0;
        padding: 2rem;
        background: var(--bg);
        color: var(--text);
        transition: background 200ms ease-out;
      }

.card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 1.25rem;
        max-width: 26rem;
        margin-block-end: 1rem;
      }
      .card h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
      .card p  { margin: 0 0 1rem; color: var(--muted); }

.btn {
        font: inherit;
        border: 1px solid transparent;
        border-radius: 6px;
        padding: .5rem 1rem;
        cursor: pointer;
        background: var(--accent);
        color: var(--accent-text);
      }

/* Two tokens redefined on one subtree. Every rule above
         picks them up without being touched. */
      .card-danger { --accent: #b3261e; --border: #f3c8c5; }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>Default</h2>
      <p>Reads its colours from :root.</p>
      <button class="btn" type="button">Confirm</button>
    </div>

<div class="card card-danger">
      <h2>Danger</h2>
      <p>Same rules. Two tokens redefined on this element.</p>
      <button class="btn" type="button">Delete</button>
    </div>

<button class="btn" type="button" id="toggle">Toggle theme</button>

Output

Rendered by your browser