2021-06-25 05:30:07 +00:00
|
|
|
:PROPERTIES:
|
|
|
|
|
:ID: 24df5797-6752-470d-89f5-517853573b3d
|
|
|
|
|
:END:
|
2022-10-25 09:12:49 +00:00
|
|
|
#+title: Code recipes: Implementing Base16 themes in Hugo
|
2021-06-25 05:30:07 +00:00
|
|
|
#+date: "2021-06-22 20:31:50 +08:00"
|
2022-10-25 09:12:49 +00:00
|
|
|
#+date_modified: "2022-10-25 10:38:18 +08:00"
|
2021-06-25 05:30:07 +00:00
|
|
|
#+language: en
|
|
|
|
|
#+property: header-args :eval no
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Making use of [[https://github.com/chriskempson/base16][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...
|
|
|
|
|
|
|
|
|
|
#+begin_src yaml
|
|
|
|
|
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"
|
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
|
|
...into CSS.
|
|
|
|
|
|
|
|
|
|
#+begin_src 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
|
|
|
|
|
}
|
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
|
|
Here's one template to do that.
|
|
|
|
|
|
|
|
|
|
#+begin_src go
|
|
|
|
|
{{- $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 -}}
|
|
|
|
|
}
|
|
|
|
|
#+end_src
|
