mirror of
https://github.com/foo-dogsquared/wiki.git
synced 2025-01-31 04:58:21 +00:00
377850d0d1
I also forget to add the additional solutions from the Exercism exercises. Whoops... I'm also getting used to storing code in random places. Time to change that habit a little bit by storing them in my notebook, instead. Nothing wrong with that, yeah?!
1.9 KiB
1.9 KiB
Implementing Base16 themes in Hugo
Making use of Base16 themes would be a great way to let users customize their sites quickly. It is an established project that spawned related projects and a lot of user support for it. Let's implement this in Hugo for the same reason.
We'll make heavy use of CSS variables, Hugo data templates, and their support for several data formats including YAML.
To do that, we want to convert the Base16 theme…
scheme: "Bark on a tree"
author: "Gabriel Arazas (https://foo-dogsquared.github.io)"
base00: "2b221f"
base01: "412c26"
base02: "54352c"
base03: "8d5c4c"
base04: "e1bcb2"
base05: "f5ecea"
base06: "fefefe"
base07: "eb8a65"
base08: "d03e68"
base09: "eb914a"
base0A: "afa644"
base0B: "85b26e"
base0C: "df937a" #accent
base0D: "a15c40"
base0E: "8b7ab9"
base0F: "6f3920"…into CSS.
[data-theme="Bark on a tree"]:root {
--base00: #2b221f;
--base01: #412c26;
--base02: #54352c;
--base03: #8d5c4c;
--base04: #e1bcb2;
--base05: #f5ecea;
--base06: #fefefe;
--base07: #eb8a65;
--base08: #d03e68;
--base09: #eb914a;
--base0A: #afa644;
--base0B: #85b26e;
--base0C: #df937a;
--base0D: #a15c40;
--base0E: #8b7ab9;
--base0F: #6f3920
}Here's one template to do that.
{{- $name := index $ "name" -}}
{{- $scheme := index $ "scheme" -}}
{{- if ne $name "_index" }}[data-theme="{{ $scheme.scheme }}"]{{ end }}:root {
{{- range $i := seq 0 15 }}
{{- $hex := upper (printf "%02x" $i) }}
{{- $key := printf "base%s" $hex }}
--{{ $key }}: #{{ index $scheme $key }};
{{- end -}}
}