blogroot\themes\butterfly\source\css
新建night.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
:root {
--trans-light: rgba(255, 255, 255, 0.9);
--trans-dark: rgba(25, 25, 25, 0.9);
--border-style: 1px solid rgb(169, 169, 169);
--backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
background: var(--trans-light);
border-radius: 25px;
border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
background: var(--trans-light);
border-radius: 18px;
border: var(--border-style);
}

/* 文章页、普通页面、分类页、归档页 */
div#post,
div#page,
div#category,
div#archive {
background: var(--trans-light);
border: var(--border-style);
border-radius: 20px;
border: var(--border-style);
}


/* 导航栏 */
#page-header.nav-fixed #nav {
background: rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#category,
[data-theme="dark"] div#page {
background: var(--trans-dark);
}


/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
background: transparent !important;
}
[data-theme="dark"] #page-header::before {
background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
background: rgba(118, 238, 152, 0.5) !important;
}
.read-mode div#post {
background: rgba(114, 227, 146, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
background: rgba(25, 25, 25, 0.9) !important;
color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
background: rgba(25, 25, 25, 0.9) !important;
color: #ffffff;
}

主题配置文件_config.butterfly.yml插入CSS文件

1
2
3
inject:
head:
- <link rel="stylesheet" href="/css/night.css?1">