hugo-theme-more-contentful/assets/templates/theme.scss

{{- range $name, $scheme := (index $.Site.Data "more-contentful").themes }}
  // This is a template for a colorscheme based from a Base16 data file from https://github.com/chriskempson/base16.
  @mixin createColorScheme($invert: false) {
    {{- range $i := seq 0 15 }}
    {{- $hex := upper (printf "%02x" $i) }}
    {{- $key := printf "base%s" $hex }}
    @if $invert {
      --{{ $key }}: #{invert(#{{ index $scheme $key }}, 100%)};
    } @else {
      --{{ $key }}: #{{ index $scheme $key }};
    }
    {{- end }}
  }

  {{- if eq $name "_light" }}
    @media (prefers-color-scheme: light) {
      :root {
        @include createColorScheme
      }
    }
  {{- else if eq $name "_dark" }}
    @media (prefers-color-scheme: dark) {
      :root {
        @include createColorScheme
      }
    }
  {{- end }}

  [data-theme="{{ .scheme }}"]:root {
    @include createColorScheme;
  }
{{- end }}