foodogsquared/wiki
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/wiki.git synced 2025-01-30 22:57:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
master
wiki/notebook/code.recipes.hugo.base16-themes.org
Gabriel Arazas 97a24dc723 Restructure recipe types 
There are different recipes or at least tidbits that are essentially
recipes so we'll just put them under separate namespaces in the hierarchy.
2022-10-25 17:12:49 +08:00

1.9 KiB
Raw Permalink Blame History

Code recipes: 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 -}}
}