jarv.is/assets/sass/abstracts/_themes.scss

@use "sass:map";

// Takes a map of CSS properties and theme keys (see below) and set both html.light and html.dark selectors.
// ex. @include themes.themed((color: "text", background-color: "background-inner"));
@mixin themed($properties) {
  // keep track of the original selector(s) calling this mixin for below
  $selectors: #{&};

  // add corresponding html.light and html.dark root selectors
  @each $theme, $map in $themes {
    @at-root html.#{$theme} {
      #{$selectors} {
        @each $property, $color in $properties {
          #{$property}: map.get($map, $color);
        }
      }
    }
  }
}

// ----------------

// Dark & Light Themes
$themes: (
  light: (
    background-inner: #ffffff,
    background-outer: #fcfcfc,
    text: #202020,
    medium-dark: #515151,
    medium: #5e5e5e,
    medium-light: #757575,
    light: #d2d2d2,
    kinda-light: #e3e3e3,
    super-light: #f4f4f4,
    super-duper-light: #fbfbfb,
    links: #0e6dc2,
    success: #44a248,
    error: #ff1b1b,
  ),
  dark: (
    background-inner: #1e1e1e,
    background-outer: #252525,
    text: #f1f1f1,
    medium-dark: #d7d7d7,
    medium: #b1b1b1,
    medium-light: #959595,
    light: #646464,
    kinda-light: #535353,
    super-light: #272727,
    super-duper-light: #1f1f1f,
    links: #88c7ff,
    success: #78df55,
    error: #ff5151,
  ),
);