@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-background-color: var(--dark-link-background-color);
    --link-hover-color: var(--dark-link-hover-color);
    --outline-color: var(--dark-outline-color);
    --glyph-blue-color: var(--dark-glyph-blue-color);
    --glyph-red-color: var(--dark-glyph-red-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-background-color: var(--light-link-background-color);
  --link-hover-color: var(--light-link-hover-color);
  --outline-color: var(--light-outline-color);
  --glyph-blue-color: var(--light-glyph-blue-color);
  --glyph-red-color: var(--light-glyph-red-color);

  color-scheme: light;
}

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-background-color: var(--dark-link-background-color);
  --link-hover-color: var(--dark-link-hover-color);
  --outline-color: var(--dark-outline-color);
  --glyph-blue-color: var(--dark-glyph-blue-color);
  --glyph-red-color: var(--dark-glyph-red-color);

  color-scheme: dark;
}

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