Matery主题(八)自定义自定义主题色

无意发现人民币的配色十分不错，于是就想给博客也换换衣服

创建主题色

利用 CSS 变量创建配套主题色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.theme-default {
    --main-color: #0f9d58;
    --secondary-color: #4cbf30;
    --text-color: #42b983;
    --text-bg-color: #42b9831a;
}

.theme-red {
    --main-color: #bd0e2b;
    --secondary-color: #d0273e;
    --text-color: #d55f6f;
    --text-bg-color: #d55f6f1a;
}

.theme-green {
    --main-color: #3d6658;
    --secondary-color: #507564;
    --text-color: #a9d5c2;
    --text-bg-color: #a9d5c21a;
}

.theme-brown {
    --main-color: #8e4b43;
    --secondary-color: #92513d;
    --text-color: #dba97f;
    --text-bg-color: #dba97f1a;
}

.theme-blue {
    --main-color: #355389;
    --secondary-color: #3f689e;
    --text-color: #94d3f2;
    --text-bg-color: #94d3f21a;
}

.theme-purple {
    --main-color: #2c1c4b;
    --secondary-color: #584572;
    --text-color: #d4c0cb;
    --text-bg-color: #d4c0cb1a;
}

.theme-cyan-blue {
    --main-color: #4c564b;
    --secondary-color: #3d573e;
    --text-color: #b1d097;
    --text-bg-color: #b1d0971a;
}

将 CSS 代码插入 themes\hexo-theme-matery\source\css\matery.css 顶部

由于主题作者并没有使用变量，以至于每个颜色都是单独设置的，所以我们用变量去替换这些颜色

如果是使用 VSCode 可以使用 Ctrl + F 替换这些颜色

  • 默认的主要背景颜色是
    #0f9d58 替换成 var(--main-color)
    和
    #4cbf30 替换成 var(--secondary-color)
  • 主要的文字颜色是
    #42b983 替换成 --text-color
  • 区块背景颜色是
    rgba(66, 185, 131, .1) 替换成 var(--text-bg-color)

根据日期替换主题色

既然主题色刚好7套，就按星期来替换吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- 切换主题色 -->
<script>
    const week = new Date().getDay()
    switch (week) {
        case 0:
            document.body.setAttribute('class', 'theme-default')
            break;
        case 1:
            document.body.setAttribute('class', 'theme-red')
            break;
        case 2:
            document.body.setAttribute('class', 'theme-green')
            break;
        case 3:
            document.body.setAttribute('class', 'theme-brown')
            break;
        case 4:
            document.body.setAttribute('class', 'theme-blue')
            break;
        case 5:
            document.body.setAttribute('class', 'theme-purple')
            break;
        case 6:
            document.body.setAttribute('class', 'theme-cyan-blue')
            break;
        default:
            document.body.setAttribute('class', 'theme-default')
            break;
    }
</script>

将代码插入在 themes>hexo-theme-matery>layout>layout.ejs <body> 标签内

目录适配

做完以上操作后，测试效果时，发现目录没有使用这个效果，调查发现，目录的样式是单独分离的

找到目录样式代码位置 themes\hexo-theme-matery\layout\_partial\post-detail-toc.ejs

将样式代码全部剪切，粘贴在 themes\hexo-theme-matery\source\css\matery.css 文件中

按照上面的操作将颜色进行替换

如此，自定义主题色就完成了