web-map/src/assets/themes/_theme.scss

@use 'sass:map';
@use './dark' as dark;
@use './light' as light;

$themes: (dark, light);
$theme-map: (
  dark-colors: dark.$colors,

  light-colors: light.$colors,
);

@mixin themed {
  @each $theme in $themes {
    $theme: $theme !global;
    $theme-colors: map.get($theme-map, #{$theme}-colors) !global;

    :root[theme='#{$theme}'] {
      @content;
    }
  }
}

@function get-color($key) {
  @return map.get($theme-colors, $key);
}

@function get-icon($name) {
  @return url(asset/icons/#{$theme}/#{$name}.png) center / contain no-repeat;
}