Hugo Narrow 内置多种配色,可以通过 Header 上的按钮切换,同时支持自定义配色。

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: 11
点击展开查看更多

自定义配色

如果需要添加自定义配色,在 ~/assets/css/custom/ 目录下创建新的主题文件,然后在上述主题列表中添加主题,以 dracula 配色为例:

CSS
 1[data-theme="dracula"] {
 2  --color-primary: oklch(0.7 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.1 66.558);
 7  --color-accent-foreground: oklch(0.2 0.024 66.558);
 8  --color-background: oklch(0.95 0.01 277.508);
 9  --color-foreground: oklch(0.3 0.022 277.508);
10  --color-muted: oklch(0.9 0.015 277.508);
11  --color-muted-foreground: oklch(0.5 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.3 0.022 277.508);
15  --color-popover: oklch(0.97 0.005 277.508);
16  --color-popover-foreground: oklch(0.3 0.022 277.508);
17
18  --color-note: oklch(0.65 0.15 240);
19  --color-tip: oklch(0.7 0.14 160);
20  --color-important: oklch(0.7 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.7 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.8 0.15 85);
46  --color-caution: oklch(0.7 0.17 15);
47}
点击展开查看更多

版权声明

作者: Hugo Narrow

链接: https://hugo-narrow-docs.vercel.app/zh-cn/docs/%E9%85%8D%E8%89%B2/

许可证: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

开始搜索

输入关键词搜索文章内容

↑↓
ESC
⌘K 快捷键