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) {
    background: #ddbed4;
    color: #150218;

    a {
      color: #08659b;
    }

    .site-header {
      background: #f9eefc;
    }

    .site-main {
      background: #f9eefc;
    }

    .site-navigation {
      background: #f9eefc;
    }

    .site-footer {
      background: #f9eefc;
    }
  }

  @media (prefers-color-scheme: dark) {
    background: #503047;
    color: #f9eefc;

    a {
      color: #20a4f3;
    }

    .site-header {
      background: #261722;
    }

    .site-main {
      background: #261722;
    }

    .site-navigation {
      background: #261722;
    }

    .site-footer {
      background: #261722;
    }
  }
}