Hugo Narrow build in many color schemes, you can change scheme by the button at header, custom schemes also supported.
params.yaml
1colorScheme: "default"
2themes:
3 default:
4 name: "Default"
5 order: 1
6 claude:
7 name: "Claude"
8 order: 2
9 bumblebee:
10 name: "Bumblebee"
11 order: 3
12 emerald:
13 name: "Emerald"
14 order: 4
15 nord:
16 name: "Nord"
17 order: 5
18 sunset:
19 name: "Sunset"
20 order: 6
21 abyss:
22 name: "Abyss"
23 order: 7
24 dracula:
25 name: "Dracula"
26 order: 8
27 amethyst:
28 name: "Amethyst"
29 order: 9
30 slate:
31 name: "Slate"
32 order: 10
33 twitter:
34 name: "Twitter"
35 order: 11Custom Schemes
If you want to add your scheme, create a css file at ~/assets/css/custom/ directory, then add the new scheme in params.themes in the above, here is the virable sample:
CSS
1[data-theme="dracula"] {
2 --color-primary: oklch(0.70 0.15 346.812);
3 --color-primary-foreground: oklch(0.98 0.007 106.545);
4 --color-secondary: oklch(0.68 0.12 301.883);
5 --color-secondary-foreground: oklch(0.98 0.007 106.545);
6 --color-accent: oklch(0.75 0.10 66.558);
7 --color-accent-foreground: oklch(0.20 0.024 66.558);
8 --color-background: oklch(0.95 0.01 277.508);
9 --color-foreground: oklch(0.30 0.022 277.508);
10 --color-muted: oklch(0.90 0.015 277.508);
11 --color-muted-foreground: oklch(0.50 0.02 277.508);
12 --color-border: oklch(0.82 0.02 277.508);
13 --color-card: oklch(0.95 0.01 277.508);
14 --color-card-foreground: oklch(0.30 0.022 277.508);
15 --color-popover: oklch(0.97 0.005 277.508);
16 --color-popover-foreground: oklch(0.30 0.022 277.508);
17
18 --color-note: oklch(0.65 0.15 240);
19 --color-tip: oklch(0.70 0.14 160);
20 --color-important: oklch(0.70 0.15 346.812);
21 --color-warning: oklch(0.75 0.16 85);
22 --color-caution: oklch(0.65 0.18 15);
23}
24
25[data-theme="dracula"].dark {
26 --color-primary: oklch(0.755 0.183 346.812);
27 --color-primary-foreground: oklch(0.151 0.036 346.812);
28 --color-secondary: oklch(0.742 0.148 301.883);
29 --color-secondary-foreground: oklch(0.148 0.029 301.883);
30 --color-accent: oklch(0.834 0.124 66.558);
31 --color-accent-foreground: oklch(0.167 0.024 66.558);
32 --color-background: oklch(0.288 0.022 277.508);
33 --color-foreground: oklch(0.977 0.007 106.545);
34 --color-muted: oklch(0.394 0.032 275.524);
35 --color-muted-foreground: oklch(0.879 0.006 275.524);
36 --color-border: oklch(0.45 0.035 277.508);
37 --color-card: oklch(0.32 0.025 277.508);
38 --color-card-foreground: oklch(0.977 0.007 106.545);
39 --color-popover: oklch(0.394 0.032 275.524);
40 --color-popover-foreground: oklch(0.977 0.007 106.545);
41
42 --color-note: oklch(0.70 0.14 240);
43 --color-tip: oklch(0.75 0.13 160);
44 --color-important: oklch(0.755 0.183 346.812);
45 --color-warning: oklch(0.80 0.15 85);
46 --color-caution: oklch(0.70 0.17 15);
47}Note
You can also add new scheme at ~/assets/css/theme.css or ~/assets/css/custom.css.
Dependencies are required: pnpm add -D tailwindcss @tailwindcss/cli
Run the compile command: npx tailwindcss -i ./assets/css/main.css -o ./assets/css/compiled.css