@media (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--dark-background-color);
    --text-color: var(--dark-text-color);
    --panel-color: var(--dark-panel-color);
    --border-color: var(--dark-border-color);
    --link-bg: var(--dark-link-bg);
    --link-hover: var(--dark-link-hover);
    --glyph-color: var(--dark-glyph-color);
  }
}

html.theme-light {
  --background-color: var(--light-background-color);
  --text-color: var(--light-text-color);
  --panel-color: var(--light-panel-color);
  --border-color: var(--light-border-color);
  --link-bg: var(--light-link-bg);
  --link-hover: var(--light-link-hover);
  --glyph-color: var(--light-glyph-color);

  color-scheme: light;

  --test-color: rgb(138, 138, 248);
}

html.theme-dark {
  --background-color: var(--dark-background-color);
  --text-color: var(--dark-text-color);
  --panel-color: var(--dark-panel-color);
  --border-color: var(--dark-border-color);
  --link-bg: var(--dark-link-bg);
  --link-hover: var(--dark-link-hover);
  --glyph-color: var(--dark-glyph-color);

  color-scheme: dark;

  --test-color: blue;
}

body{
  background-color: var(--background-color);
  color: var(--text-color);
  transition:
    background-color var(--theme-transition),
    color var(--theme-transition);
}