{{ $data := newScratch }} {{/* Create an automatic way of generating system color schemes, if set by the user. * If either only one is set, generate an appropriate color scheme with the given color scheme. For example, if there is only a given dark theme, the theme will generate a light color scheme. * If given neither, go with the fallback themes. */}} {{ $themes := (index $.Site.Data "more-contentful").themes }} {{ $hasLight := $themes._light }} {{ $hasDark := $themes._dark }} {{ $hasSystemTheme := or $hasLight $hasDark }} {{/* Take note how the other half get its colors. It's not exactly a color string but it is a SASS expression to be evaluated and put into string interpolation in SASS. */}} {{ if (and $hasLight (not $hasDark)) }} {{- warnf "No given dark theme. Generating one from the light theme..." }} {{ $darkTheme := dict "scheme" (printf "%s (light)" $hasLight.scheme) "base00" $hasLight.base07 "base01" $hasLight.base06 "base02" $hasLight.base05 "base03" $hasLight.base04 "base04" $hasLight.base03 "base05" $hasLight.base02 "base06" $hasLight.base01 "base07" $hasLight.base00 "base08" (print "{lighten(saturate(#" $hasLight.base08 ", 10%), 15%)}") "base09" (print "{lighten(saturate(#" $hasLight.base09 ", 10%), 15%)}") "base0A" (print "{lighten(saturate(#" $hasLight.base0A ", 10%), 15%)}") "base0B" (print "{lighten(saturate(#" $hasLight.base0B ", 10%), 15%)}") "base0C" (print "{lighten(saturate(#" $hasLight.base0C ", 10%), 15%)}") "base0D" (print "{lighten(saturate(#" $hasLight.base0D ", 10%), 15%)}") "base0E" (print "{lighten(saturate(#" $hasLight.base0E ", 10%), 15%)}") "base0F" (print "{lighten(saturate(#" $hasLight.base0F ", 10%), 15%)}") }} {{ $themes = merge $themes (dict "_dark" $darkTheme) }} {{ else if (and $hasDark (not $hasLight)) }} {{- warnf "No given light theme. Generating one from the dark theme..." }} {{ $lightTheme := dict "scheme" (printf "%s (light)" $hasDark.scheme) "base00" $hasDark.base07 "base01" $hasDark.base06 "base02" $hasDark.base05 "base03" $hasDark.base04 "base04" $hasDark.base03 "base05" $hasDark.base02 "base06" $hasDark.base01 "base07" $hasDark.base00 "base08" (print "{darken(saturate(#" $hasDark.base08 ", 10%), 15%)}") "base09" (print "{darken(saturate(#" $hasDark.base09 ", 10%), 15%)}") "base0A" (print "{darken(saturate(#" $hasDark.base0A ", 10%), 15%)}") "base0B" (print "{darken(saturate(#" $hasDark.base0B ", 10%), 15%)}") "base0C" (print "{darken(saturate(#" $hasDark.base0C ", 10%), 15%)}") "base0D" (print "{darken(saturate(#" $hasDark.base0D ", 10%), 15%)}") "base0E" (print "{darken(saturate(#" $hasDark.base0E ", 10%), 15%)}") "base0F" (print "{darken(saturate(#" $hasDark.base0F ", 10%), 15%)}") }} {{ $themes = merge $themes (dict "_light" $lightTheme) }} {{ else if not $hasSystemTheme }} {{ $systemThemes := dict "_dark" $themes._dark_fallback "_light" $themes._light_fallback }} {{ $themes = merge $systemThemes $themes }} {{ end }} {{- range $name, $scheme := $themes }} // This is a template for a colorscheme based from a Base16 data file from // https://github.com/chriskempson/base16. @mixin createColorScheme { {{- range $i := seq 0 15 }} {{- $hex := upper (printf "%02x" $i) }} {{- $key := printf "base%s" $hex }} // TODO: Make a better way to interpolate the color strings. {{/* We're just taking advantage the fact that the SASS color functions returns the colors in the same format we needed. */}} {{- $color := printf "#%s" (index $scheme $key) }} --{{ $key }}: {{ $color }}; {{- end }} } {{- if (or (eq $name "_light_fallback") (eq $name "_dark_fallback")) }} {{ continue }} {{- 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 }}