site/src/res/scss/_themes.scss

// theme-default.scss
/* ============================================================================
DEFAULT THEME
-------------------------------------------------------------------------------
This is the default theme for my website, which uses the prefer-color-scheme
query to provide the appropriate styles for light mode or dark mode. The other
themes can be selected with a dropdown which is only shown when JavaScript is
enabled.
============================================================================ */

@use "modules/include-media" as *;

:root {
  color-scheme: light dark;
}

.theme-default {
  @media (prefers-color-scheme: light) {
    body {
      background: url("/img/background2.png");
    }

    .site-header {
      border: solid black 2px;
      background: white;
    }

    .site-main {
      border: solid black 2px;
      background: white;
    }

    .site-navigation {
      background: white;
      border: solid black 2px;
      border-top: none;
      @include media(">sm") {
        border-top: solid black 2px;
      }
    }

    .site-footer {
      border: solid black 2px;
      background: white;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      background: black;
    }

    .site-header {
      border: solid white 2px;
      background: black;
    }

    .site-main {
      border: solid white 2px;
      background: black;
    }

    .site-navigation {
      border: solid white 2px;
      background: black;
      border-top: none;
      @include media(">sm") {
        border-top: solid white 2px;
      }
    }

    .site-footer {
      border: solid white 2px;
      background: black;
    }
  }
}