Skip to content

Commit 659393d

Browse files
author
54895y
committed
refactor: simplify homepage and add tri-mode theme
1 parent 7e1a1a0 commit 659393d

4 files changed

Lines changed: 182 additions & 300 deletions

File tree

‎docusaurus.config.ts‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import type {Config} from '@docusaurus/types';
33
import type * as Preset from '@docusaurus/preset-classic';
44

55
const config: Config = {
6-
title: 'Matrix Product Docs',
7-
tagline: '把 Matrix 系列插件文档整理成可交接、可执行的产品 Brief 与实现说明。',
6+
title: 'Matrix Wiki',
7+
tagline: 'Matrix 系列插件官方文档。',
88
favicon: 'img/logo.svg',
99
future: {
1010
v4: true,
@@ -39,11 +39,11 @@ const config: Config = {
3939
image: 'img/logo.svg',
4040
colorMode: {
4141
defaultMode: 'light',
42-
disableSwitch: true,
43-
respectPrefersColorScheme: false,
42+
disableSwitch: false,
43+
respectPrefersColorScheme: true,
4444
},
4545
navbar: {
46-
title: 'Matrix Product Docs',
46+
title: 'Matrix Wiki',
4747
logo: {
4848
alt: 'Matrix Wiki Logo',
4949
src: 'img/logo.svg',
@@ -108,29 +108,12 @@ const config: Config = {
108108
},
109109
],
110110
},
111-
{
112-
title: 'Quick Start',
113-
items: [
114-
{
115-
label: 'MatrixAuth 安装',
116-
to: '/docs/matrixauth/installation',
117-
},
118-
{
119-
label: 'MatrixCook 安装',
120-
to: '/docs/matrixcook/installation',
121-
},
122-
{
123-
label: 'MatrixShop 快速开始',
124-
to: '/docs/matrixshop/quick-start',
125-
},
126-
],
127-
},
128111
],
129112
copyright: `Copyright © ${new Date().getFullYear()} 54895y. Built with Docusaurus.`,
130113
},
131114
prism: {
132115
theme: prismThemes.github,
133-
darkTheme: prismThemes.github,
116+
darkTheme: prismThemes.dracula,
134117
},
135118
} satisfies Preset.ThemeConfig,
136119
};

‎src/css/custom.css‎

Lines changed: 141 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,48 @@
11
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;700&display=swap');
22

3-
:root,
4-
[data-theme='dark'] {
5-
--ifm-color-primary: #6d4f34;
6-
--ifm-color-primary-dark: #62482f;
7-
--ifm-color-primary-darker: #5c442c;
8-
--ifm-color-primary-darkest: #4c3824;
9-
--ifm-color-primary-light: #785639;
10-
--ifm-color-primary-lighter: #805a3b;
11-
--ifm-color-primary-lightest: #976948;
12-
--ifm-background-color: #f4ede2;
13-
--ifm-background-surface-color: rgba(255, 252, 247, 0.9);
14-
--ifm-navbar-background-color: rgba(249, 245, 238, 0.84);
15-
--ifm-footer-background-color: #ede3d3;
16-
--ifm-heading-color: #211913;
17-
--ifm-link-color: #3f5a72;
18-
--ifm-link-hover-color: #2e455a;
19-
--ifm-menu-color-active: #6d4f34;
20-
--ifm-menu-color-background-active: rgba(109, 79, 52, 0.09);
21-
--ifm-code-background: rgba(63, 90, 114, 0.08);
3+
:root {
4+
--ifm-color-primary: #2179ff;
5+
--ifm-color-primary-dark: #0f6ef8;
6+
--ifm-color-primary-darker: #0e69eb;
7+
--ifm-color-primary-darkest: #0b57c2;
8+
--ifm-color-primary-light: #3a88ff;
9+
--ifm-color-primary-lighter: #4b91ff;
10+
--ifm-color-primary-lightest: #76aaff;
11+
--ifm-background-color: #eef6ff;
12+
--ifm-background-surface-color: rgba(255, 255, 255, 0.86);
13+
--ifm-navbar-background-color: rgba(247, 251, 255, 0.82);
14+
--ifm-footer-background-color: #dff0ff;
15+
--ifm-heading-color: #13233f;
16+
--ifm-link-color: #0b6bcb;
17+
--ifm-link-hover-color: #0855a0;
18+
--ifm-menu-color-active: #0f6ef8;
19+
--ifm-menu-color-background-active: rgba(33, 121, 255, 0.1);
20+
--ifm-code-background: rgba(33, 121, 255, 0.08);
2221
--ifm-code-font-size: 93%;
23-
--ifm-font-color-base: #342920;
24-
--ifm-toc-border-color: rgba(67, 55, 43, 0.12);
22+
--ifm-font-color-base: #24344f;
23+
--ifm-toc-border-color: rgba(46, 103, 197, 0.14);
2524
--ifm-font-family-base: 'IBM Plex Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
2625
--ifm-font-family-monospace: 'IBM Plex Mono', 'Cascadia Code', 'Consolas', monospace;
2726
--ifm-heading-font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
28-
--ifm-global-shadow-lw: 0 12px 32px rgba(61, 46, 32, 0.08);
29-
--docusaurus-highlighted-code-line-bg: rgba(63, 90, 114, 0.12);
27+
--ifm-global-shadow-lw: 0 14px 32px rgba(26, 70, 145, 0.08);
28+
--docusaurus-highlighted-code-line-bg: rgba(33, 121, 255, 0.12);
29+
30+
--site-panel-bg: rgba(255, 255, 255, 0.9);
31+
--site-panel-border: rgba(42, 101, 196, 0.14);
32+
--site-panel-shadow: 0 20px 48px rgba(22, 64, 136, 0.1);
33+
--site-text-strong: #13233f;
34+
--site-text-muted: #556784;
35+
--site-kicker-color: #0f6ef8;
36+
--site-badge-bg: rgba(33, 121, 255, 0.12);
37+
--site-badge-text: #0f63dc;
38+
--site-list-color: #0b6bcb;
39+
--site-primary-button-bg: linear-gradient(135deg, #1f7cff, #19c0c0);
40+
--site-primary-button-text: #ffffff;
41+
--site-secondary-button-bg: rgba(255, 255, 255, 0.94);
3042
}
3143

3244
html {
33-
background-color: #efe7da;
45+
background-color: #e7f2ff;
3446
}
3547

3648
body {
@@ -41,23 +53,79 @@ body {
4153
#__docusaurus {
4254
min-height: 100vh;
4355
background-image:
44-
linear-gradient(180deg, rgba(255, 252, 247, 0.62), rgba(244, 237, 226, 0.96)),
56+
radial-gradient(circle at top left, rgba(55, 149, 255, 0.22), transparent 26%),
57+
radial-gradient(circle at top right, rgba(0, 214, 201, 0.18), transparent 24%),
58+
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(238, 246, 255, 0.96)),
4559
repeating-linear-gradient(
4660
180deg,
47-
rgba(112, 89, 62, 0.04) 0,
48-
rgba(112, 89, 62, 0.04) 1px,
61+
rgba(94, 154, 255, 0.05) 0,
62+
rgba(94, 154, 255, 0.05) 1px,
4963
transparent 1px,
5064
transparent 92px
51-
),
52-
radial-gradient(circle at top left, rgba(144, 112, 74, 0.16), transparent 28%),
53-
radial-gradient(circle at top right, rgba(63, 90, 114, 0.12), transparent 26%);
65+
);
66+
background-repeat: no-repeat;
67+
}
68+
69+
html[data-theme='dark'] {
70+
--ifm-color-primary: #7ec8ff;
71+
--ifm-color-primary-dark: #61bcff;
72+
--ifm-color-primary-darker: #52b5ff;
73+
--ifm-color-primary-darkest: #1ea0ff;
74+
--ifm-color-primary-light: #9bd4ff;
75+
--ifm-color-primary-lighter: #aad9ff;
76+
--ifm-color-primary-lightest: #d4ecff;
77+
--ifm-background-color: #0f1724;
78+
--ifm-background-surface-color: rgba(19, 28, 42, 0.9);
79+
--ifm-navbar-background-color: rgba(11, 19, 31, 0.82);
80+
--ifm-footer-background-color: #111c2b;
81+
--ifm-heading-color: #eef5ff;
82+
--ifm-link-color: #8fd7ff;
83+
--ifm-link-hover-color: #b8e7ff;
84+
--ifm-menu-color-active: #8fd7ff;
85+
--ifm-menu-color-background-active: rgba(126, 200, 255, 0.12);
86+
--ifm-code-background: rgba(126, 200, 255, 0.08);
87+
--ifm-font-color-base: #c8d8eb;
88+
--ifm-toc-border-color: rgba(126, 200, 255, 0.16);
89+
--ifm-global-shadow-lw: 0 12px 28px rgba(0, 0, 0, 0.28);
90+
--docusaurus-highlighted-code-line-bg: rgba(126, 200, 255, 0.1);
91+
92+
--site-panel-bg: rgba(18, 28, 42, 0.9);
93+
--site-panel-border: rgba(127, 176, 217, 0.16);
94+
--site-panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
95+
--site-text-strong: #eef5ff;
96+
--site-text-muted: #97a9be;
97+
--site-kicker-color: #7ec8ff;
98+
--site-badge-bg: rgba(126, 200, 255, 0.14);
99+
--site-badge-text: #8fd7ff;
100+
--site-list-color: #9bd4ff;
101+
--site-primary-button-bg: linear-gradient(135deg, #1f6feb, #138f8f);
102+
--site-primary-button-text: #f7fbff;
103+
--site-secondary-button-bg: rgba(20, 31, 47, 0.94);
104+
}
105+
106+
html[data-theme='dark'] body {
107+
background: transparent;
108+
}
109+
110+
html[data-theme='dark'] #__docusaurus {
111+
background-image:
112+
radial-gradient(circle at top left, rgba(44, 133, 255, 0.18), transparent 26%),
113+
radial-gradient(circle at top right, rgba(28, 158, 154, 0.14), transparent 24%),
114+
linear-gradient(180deg, rgba(10, 16, 27, 0.7), rgba(15, 23, 36, 0.98)),
115+
repeating-linear-gradient(
116+
180deg,
117+
rgba(84, 123, 168, 0.06) 0,
118+
rgba(84, 123, 168, 0.06) 1px,
119+
transparent 1px,
120+
transparent 92px
121+
);
54122
background-repeat: no-repeat;
55123
}
56124

57125
.navbar {
58126
backdrop-filter: blur(16px);
59-
border-bottom: 1px solid rgba(67, 55, 43, 0.08);
60-
box-shadow: 0 10px 24px rgba(63, 46, 32, 0.05);
127+
border-bottom: 1px solid var(--site-panel-border);
128+
box-shadow: 0 10px 24px rgba(20, 47, 95, 0.06);
61129
}
62130

63131
.navbar__title,
@@ -72,7 +140,7 @@ body {
72140

73141
.navbar__link:hover,
74142
.navbar__link--active {
75-
color: #6d4f34;
143+
color: var(--ifm-color-primary);
76144
}
77145

78146
.theme-doc-sidebar-container {
@@ -83,9 +151,9 @@ body {
83151
.theme-doc-sidebar-menu {
84152
margin: 1rem 0;
85153
padding: 1rem;
86-
border: 1px solid rgba(67, 55, 43, 0.09);
154+
border: 1px solid var(--site-panel-border);
87155
border-radius: 24px;
88-
background: rgba(255, 252, 247, 0.82);
156+
background: var(--site-panel-bg);
89157
box-shadow: var(--ifm-global-shadow-lw);
90158
}
91159

@@ -99,7 +167,7 @@ body {
99167
}
100168

101169
.menu__link--active {
102-
background: rgba(109, 79, 52, 0.09);
170+
background: var(--ifm-menu-color-background-active);
103171
}
104172

105173
.breadcrumbs {
@@ -108,16 +176,20 @@ body {
108176

109177
.breadcrumbs__link {
110178
border-radius: 999px;
111-
background: rgba(109, 79, 52, 0.08);
179+
background: rgba(33, 121, 255, 0.08);
112180
padding: 0.28rem 0.75rem;
113181
}
114182

183+
html[data-theme='dark'] .breadcrumbs__link {
184+
background: rgba(126, 200, 255, 0.1);
185+
}
186+
115187
.theme-doc-markdown {
116188
padding: clamp(1.4rem, 2.6vw, 2.3rem);
117-
border: 1px solid rgba(67, 55, 43, 0.1);
189+
border: 1px solid var(--site-panel-border);
118190
border-radius: 30px;
119-
background: rgba(255, 252, 247, 0.84);
120-
box-shadow: 0 30px 80px rgba(61, 46, 32, 0.08);
191+
background: var(--site-panel-bg);
192+
box-shadow: 0 30px 80px rgba(17, 44, 86, 0.08);
121193
}
122194

123195
.theme-doc-markdown > h1 {
@@ -137,7 +209,7 @@ body {
137209
.markdown h2 {
138210
margin-top: 2.4rem;
139211
padding-top: 1.3rem;
140-
border-top: 1px solid rgba(67, 55, 43, 0.08);
212+
border-top: 1px solid var(--site-panel-border);
141213
font-size: clamp(1.6rem, 3vw, 2.1rem);
142214
}
143215

@@ -151,16 +223,21 @@ body {
151223
}
152224

153225
.markdown strong {
154-
color: #241d17;
226+
color: var(--site-text-strong);
155227
}
156228

157229
.markdown blockquote {
158230
margin: 1.3rem 0;
159231
padding: 1rem 1.2rem;
160-
border-left: 4px solid rgba(63, 90, 114, 0.28);
232+
border-left: 4px solid rgba(33, 121, 255, 0.28);
161233
border-radius: 0 18px 18px 0;
162-
background: rgba(63, 90, 114, 0.06);
163-
color: #4c5d6c;
234+
background: rgba(33, 121, 255, 0.06);
235+
color: var(--site-text-muted);
236+
}
237+
238+
html[data-theme='dark'] .markdown blockquote {
239+
border-left-color: rgba(126, 200, 255, 0.28);
240+
background: rgba(126, 200, 255, 0.06);
164241
}
165242

166243
.markdown table {
@@ -172,31 +249,39 @@ body {
172249
}
173250

174251
.markdown table thead tr {
175-
background: rgba(109, 79, 52, 0.08);
252+
background: rgba(33, 121, 255, 0.08);
176253
}
177254

178255
.markdown table tr:nth-child(even) {
179-
background: rgba(112, 89, 62, 0.03);
256+
background: rgba(33, 121, 255, 0.03);
257+
}
258+
259+
html[data-theme='dark'] .markdown table thead tr {
260+
background: rgba(126, 200, 255, 0.08);
261+
}
262+
263+
html[data-theme='dark'] .markdown table tr:nth-child(even) {
264+
background: rgba(126, 200, 255, 0.03);
180265
}
181266

182267
.markdown pre,
183268
.theme-code-block {
184-
border: 1px solid rgba(67, 55, 43, 0.08);
185-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
269+
border: 1px solid var(--site-panel-border);
270+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
186271
}
187272

188273
.pagination-nav__link {
189-
border: 1px solid rgba(67, 55, 43, 0.1);
274+
border: 1px solid var(--site-panel-border);
190275
border-radius: 24px;
191-
background: rgba(255, 252, 247, 0.84);
276+
background: var(--site-panel-bg);
192277
box-shadow: var(--ifm-global-shadow-lw);
193278
}
194279

195280
.table-of-contents {
196281
padding: 1rem;
197-
border: 1px solid rgba(67, 55, 43, 0.1);
282+
border: 1px solid var(--site-panel-border);
198283
border-radius: 22px;
199-
background: rgba(255, 252, 247, 0.82);
284+
background: var(--site-panel-bg);
200285
box-shadow: var(--ifm-global-shadow-lw);
201286
}
202287

@@ -205,13 +290,13 @@ body {
205290
}
206291

207292
.footer {
208-
border-top: 1px solid rgba(67, 55, 43, 0.08);
209-
background: rgba(237, 227, 211, 0.84);
293+
border-top: 1px solid var(--site-panel-border);
294+
background: var(--ifm-footer-background-color);
210295
}
211296

212297
.footer__link-item,
213298
.footer__copyright {
214-
color: #5f5245;
299+
color: var(--site-text-muted);
215300
}
216301

217302
@media screen and (max-width: 996px) {

0 commit comments

Comments
 (0)