:root {
  /* light mode settings */
  --light-mode-color-bg: #fcfcfc;
  --light-mode-color-fg: #5c6166;
  --light-mode-color-0: #86878c;
  --light-mode-color-1: #f07171;
  --light-mode-color-2: #86b300;
  --light-mode-color-3: #eba400;
  --light-mode-color-4: #22a4e6;
  --light-mode-color-5: #a37acc;
  --light-mode-color-6: #4cbf99;
  --light-mode-color-7: #adaeb1;

  /* dark mode settings */
  --dark-mode-color-bg: #10141c;
  --dark-mode-color-fg: #bfbdb6;
  --dark-mode-color-0: #0a0000;
  --dark-mode-color-1: #e6495a;
  --dark-mode-color-2: #97c142;
  --dark-mode-color-3: #e89d37;
  --dark-mode-color-4: #17acf2;
  --dark-mode-color-5: #c385fe;
  --dark-mode-color-6: #84ceb5;
  --dark-mode-color-7: #ffffff;

  /* default to light mode */
  --color-bg: var(--light-mode-color-bg);
  --color-fg: var(--light-mode-color-fg);
  --color-0: var(--light-mode-color-0);
  --color-1: var(--light-mode-color-1);
  --color-2: var(--light-mode-color-2);
  --color-3: var(--light-mode-color-3);
  --color-4: var(--light-mode-color-4);
  --color-5: var(--light-mode-color-5);
  --color-6: var(--light-mode-color-6);
  --color-7: var(--light-mode-color-7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--dark-mode-color-bg);
    --color-fg: var(--dark-mode-color-fg);
    --color-0: var(--dark-mode-color-0);
    --color-1: var(--dark-mode-color-1);
    --color-2: var(--dark-mode-color-2);
    --color-3: var(--dark-mode-color-3);
    --color-4: var(--dark-mode-color-4);
    --color-5: var(--dark-mode-color-5);
    --color-6: var(--dark-mode-color-6);
    --color-7: var(--dark-mode-color-7);
  }
}

html.dark {
  --color-bg: var(--dark-mode-color-bg);
  --color-fg: var(--dark-mode-color-fg);
  --color-0: var(--dark-mode-color-0);
  --color-1: var(--dark-mode-color-1);
  --color-2: var(--dark-mode-color-2);
  --color-3: var(--dark-mode-color-3);
  --color-4: var(--dark-mode-color-4);
  --color-5: var(--dark-mode-color-5);
  --color-6: var(--dark-mode-color-6);
  --color-7: var(--dark-mode-color-7);
}

html.light {
  --color-bg: var(--light-mode-color-bg);
  --color-fg: var(--light-mode-color-fg);
  --color-0: var(--light-mode-color-0);
  --color-1: var(--light-mode-color-1);
  --color-2: var(--light-mode-color-2);
  --color-3: var(--light-mode-color-3);
  --color-4: var(--light-mode-color-4);
  --color-5: var(--light-mode-color-5);
  --color-6: var(--light-mode-color-6);
  --color-7: var(--light-mode-color-7);
}