Theme definition for dynamic toggling

_theme.scss

:root {
  $color__primary: #bc865a;
  --color__primary: #{$color__primary};
  --color__primary--muted: #{scale-color(
      $color__primary,
      $lightness: -70%,
      $alpha: -75%
    )};
  --color__primary--lighter: #{scale-color($color__primary, $lightness: 95%)};

  $color__body: #f2f2f2;
  --color__body: #{$color__body};
  --color__body--muted: #{scale-color(
      $color__body,
      $lightness: -5%,
      $alpha: -60%
    )};

  $color__text: #121212;
  --color__text: #{$color__text};

  @media screen {
    &[data-theme='dark'] {
      $color__primary: #bc865a;
      --color__primary: #{$color__primary};
      --color__primary--muted: #{scale-color(
          $color__primary,
          $lightness: -70%,
          $alpha: -75%
        )};
      --color__primary--lighter: #{scale-color(
          $color__primary,
          $lightness: -95%
        )};

      $color__body: #121212;
      --color__body: #{$color__body};
      --color__body--muted: #{scale-color(
          $color__body,
          $lightness: 5%,
          $alpha: -60%
        )};

      $color__text: #f2f2f2;
      --color__text: #{$color__text};
    }
  }
}