@media (prefers-color-scheme: light) {
  $backgroundColor: white;
  $textColor: #15202b;
  $linkColor: royalblue;

  :root {
    --background-color: $backgroundColor;
    --faded-background-color: darken($backgroundColor, 10%);
    --shadow-color: darken($backgroundColor, 10%);
    --heading-color: darken(royalblue, 10%);
    --text-color: $textColor;
    --small-text-color: #6e707f;
    --smaller-text-color: lighten($textColor, 30%);
    --faded: lightgray;
    --hr-color: lightgray;
    --link-color: $linkColor;
    --code-color: firebrick;
    --tag-color: lighten($linkColor, 35%);
  }
}

@media (prefers-color-scheme: dark) {
  $backgroundColor: #202030;
  $textColor: #cdcdcd;
  $linkColor: lightskyblue;

  :root {
    --background-color: $backgroundColor;
    --faded-background-color: lighten($backgroundColor, 10%);
    --shadow-color: lighten($backgroundColor, 10%);
    --heading-color: lighten(lightskyblue, 20%);
    --text-color: $textColor;
    --small-text-color: darken($textColor, 8%);
    --smaller-text-color: darken($textColor, 12%);
    --faded: #666;
    --hr-color: gray;
    --link-color: $linkColor;
    --code-color: lighten(firebrick, 25%);
    --tag-color: darken($linkColor, 55%);
  }
}