theme.css

[data-theme='dark'] {
  color-scheme: dark;

  --link: var(--indigo-3);
  --link-visited: var(--purple-3);

  --text-1: var(--gray-1);
  --text-2: var(--gray-4);

  --surface-1: var(--gray-9);
  --surface-2: var(--gray-8);
  --surface-3: var(--gray-7);
  --surface-4: var(--gray-6);

  --scrollthumb-color: var(--gray-6);
  --shadow-strength: 10%;
  --shadow-color: 220 40% 2%;

  & :where(dialog) {
    background-color: var(--surface-2);
  }

  & :where(button) {
    --_highlight: var(--_highlight-dark);
    --_bg: var(--_bg-dark);
    --_ink-shadow: var(--_ink-shadow-dark);

    &:where([type='reset']) {
      --_text: var(--red-2);
      --_border: var(--surface-3);
    }
  }

  &
    :where(
      button,
      input:is([type='button'], [type='submit'], [type='reset'])
    )[disabled] {
    --_text: var(--gray-5);
  }

  &
    :where(
      textarea,
      select,
      input:not([type='button'], [type='submit'], [type='reset'])
    ) {
    background-color: hsl(210deg 11% 10%);
  }

  & :where([type='submit']),
  & :where(form button:not([type='button'])),
  & :where([type='reset']),
  & :where([disabled]) {
    --_bg: var(--surface-1);
  }
}

/* Fix shadow OSDark & data-theme='light' */

@media (prefers-color-scheme: dark) {
  [data-theme='light'] {
    --shadow-color: 220 3% 15% !important;
    --shadow-strength: 1% !important;
  }
}