:root {
  color-scheme: dark;

  --is-light-theme-on: 0;
  --is-dark-theme-on: 1;

  --color-primary: hsl(0, 0%, 100%);
  --color-line: hsla(0, 0%, 37%, 0.3);
  --color-secondary: hsla(0, 0%, 93%, 0.6);
  --color-code: hsl(233, 23%, 31%);
  --color-accent: hsl(5, 96%, 70%);
  --color-tag: hsl(240, 3%, 12%);
  --color-border: hsl(0, 0%, 84%);
  --color-link: hsl(210, 100%, 46%);
  
  --color-header-dark: hsla(0, 0%, 0%, 0.32);
  --color-bg-dark: hsl(0, 0%, 0%);
  --color-button-dark: hsl(0, 0%, 100%);
  --color-text-dark: hsl(120, 4%, 91%);
  --color-caption-dark: hsl(0, 0%, 0%);
  --color-edges-dark: hsl(343, 55%, 74%);
  --color-flow-dark: var(--color-accent);
  --color-vars-dark: hsl(181, 52%, 74%);
  --color-chains-dark: hsl(50, 98%, 57%);
  --color-comment-dark: hsl(0, 0%, 55%);

  --color-header: var(--color-header-dark);
  --color-bg: var(--color-bg-dark);
  --color-button: var(--color-button-dark);
  --color-text: var(--color-text-dark);
  --color-caption: var(--color-caption-dark);
  --color-edges: var(--color-edges-dark);
  --color-flow: var(--color-flow-dark);
  --color-vars: var(--color-vars-dark);
  --color-chains: var(--color-chains-dark);
  --color-comment: var(--color-comment-dark);

  --color-course: hsl(0, 0%, 7%);
}