Skip to content

Commit 5183871

Browse files
xcatliuxcatliu
committed
dark mode
1 parent b9e57fc commit 5183871

File tree

3 files changed

+145
-100
lines changed

3 files changed

+145
-100
lines changed

‎.github/workflows/gh-pages.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ jobs:
1717
export DENO_INSTALL="/home/runner/.deno"
1818
export PATH="$DENO_INSTALL/bin:$PATH"
1919
deno --version
20-
deno install --unstable --allow-read --allow-write --allow-net -n pagic https://deno.land/x/[email protected].2/mod.ts
20+
deno install --unstable --allow-read --allow-write --allow-net -n pagic https://deno.land/x/[email protected].3/mod.ts
2121
pagic build
2222
2323
- name: Deploy

‎_layout.tsx‎

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,63 @@ import { PagicLayout } from 'https://deno.land/x/pagic/mod.ts';
44

55
import Sidebar from './_sidebar.tsx';
66

7-
const Layout: PagicLayout = ({ config, title, content, script, sidebar, outputPath }) => (
8-
<html>
9-
<head>
10-
<script async src="https://www.google-analytics.com/analytics.js" />
11-
<script
12-
dangerouslySetInnerHTML={{
13-
__html: `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-45256157-14');`
14-
}}
15-
/>
16-
<title>{outputPath !== 'index.html' ? `${title} · ${config.title}` : title}</title>
17-
<meta charSet="utf-8" />
7+
const Layout: PagicLayout = ({ config, title, content, script, sidebar, outputPath }) => {
8+
const [isDark, setIsDark] = React.useState(
9+
// @ts-ignore
10+
!!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
11+
);
12+
return (
13+
<html className={isDark ? 'dark' : ''}>
14+
<head>
15+
<script async src="https://www.google-analytics.com/analytics.js" />
16+
<script
17+
dangerouslySetInnerHTML={{
18+
__html: `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-45256157-14');`
19+
}}
20+
/>
21+
<title>{outputPath !== 'index.html' ? `${title} · ${config.title}` : title}</title>
22+
<meta charSet="utf-8" />
1823

19-
<link rel="shortcut icon" type="image/png" href="//xcatliu.github.io/favicon.ico" />
20-
<link rel="stylesheet" href="/assets/prism.css" />
21-
{/* <link rel="stylesheet" href="/assets/prism_tomorrow.css" /> */}
22-
<link rel="stylesheet" href="/assets/index.css" />
23-
</head>
24-
<body>
25-
<header>
26-
<h1>
27-
<a href="/">{config.title}</a>
28-
</h1>
29-
<nav>
30-
<ul>
31-
<li>
32-
<a href="https://github.com/xcatliu/typescript-tutorial">GitHub</a>
33-
</li>
34-
<li>
35-
<a href="https://github.com/xcatliu/buy-me-a-coffee">赞助作者</a>
36-
</li>
37-
<li>
38-
<a href="https://github.com/xcatliu/pagic">本网站使用 Pagic 构建</a>
39-
</li>
40-
</ul>
41-
</nav>
42-
</header>
43-
<Sidebar sidebar={sidebar} outputPath={outputPath} />
44-
<section className="main">{content}</section>
45-
{script}
46-
</body>
47-
</html>
48-
);
24+
<link rel="shortcut icon" type="image/png" href="//xcatliu.github.io/favicon.ico" />
25+
<link rel="stylesheet" href={isDark ? '/assets/prism_tomorrow.css' : '/assets/prism.css'} />
26+
<link rel="stylesheet" href="/assets/index.css" />
27+
</head>
28+
<body>
29+
<header>
30+
<h1>
31+
<a href="/">{config.title}</a>
32+
</h1>
33+
<nav>
34+
<ul>
35+
<li>
36+
<a href="https://github.com/xcatliu/typescript-tutorial">GitHub</a>
37+
</li>
38+
<li>
39+
<a href="https://github.com/xcatliu/buy-me-a-coffee">赞助作者</a>
40+
</li>
41+
<li>
42+
<a href="https://github.com/xcatliu/pagic">本网站使用 Pagic 构建</a>
43+
</li>
44+
<li>
45+
<a
46+
href="#"
47+
onClick={(e) => {
48+
e.preventDefault();
49+
setIsDark(!isDark);
50+
}}
51+
>
52+
{isDark ? '关闭黑暗模式' : '开启黑暗模式'}
53+
</a>
54+
</li>
55+
</ul>
56+
</nav>
57+
</header>
58+
<Sidebar sidebar={sidebar} outputPath={outputPath} />
59+
<section className="main">{content}</section>
60+
{script}
61+
</body>
62+
</html>
63+
);
64+
};
4965

5066
export default Layout;

‎assets/index.css‎

Lines changed: 87 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,44 @@
1+
:root {
2+
--color-text: #333;
3+
--color-text-aside: #777;
4+
--color-muted: #999;
5+
--color-link: hsl(210, 70%, 50%);
6+
--color-background: white;
7+
--color-background-code: #f2f2f2;
8+
--color-background-aside: #fafafa;
9+
--color-background-aside-hover: #f2f2f2;
10+
--color-border: #eee;
11+
--color-header-shadow: rgba(0, 0, 0, 0.1);
12+
--height-header: 4rem;
13+
--width-aside: 288px;
14+
}
15+
16+
html.dark {
17+
--color-text: #aaa;
18+
--color-text-aside: #666;
19+
--color-muted: #777;
20+
--color-link: hsl(210, 60%, 60%);
21+
--color-background: #222;
22+
--color-background-code: #333;
23+
--color-background-aside: #1a1a1a;
24+
--color-background-aside-hover: #111;
25+
--color-border: #333;
26+
--color-header-shadow: rgba(0, 0, 0, 0.5);
27+
}
28+
129
/* #region reset */
230
* {
331
box-sizing: border-box;
432
}
33+
html {
34+
color: var(--color-text);
35+
background-color: var(--color-background);
36+
font-size: 16px;
37+
line-height: 1.5;
38+
}
539
body {
6-
color: #333;
740
margin: 0;
841
padding: 0;
9-
font-size: 16px;
10-
line-height: 1.5;
1142
}
1243
h1 {
1344
font-size: 32px;
@@ -25,56 +56,54 @@ h6 {
2556
}
2657
hr {
2758
display: block;
28-
height: 1px;
29-
border-top: 1px solid #eee;
59+
height: 2px;
60+
border: 0;
61+
border-top: 1px solid var(--color-border);
3062
}
3163

3264
a {
33-
color: #267fd9;
65+
color: var(--color-link);
3466
text-decoration: none;
3567
}
3668
a:hover {
3769
text-decoration: underline;
3870
}
3971

4072
blockquote {
41-
border-left: 5px solid #eee;
73+
border-left: 5px solid var(--color-border);
4274
overflow: auto;
43-
color: #999;
75+
color: var(--color-muted);
4476
}
4577

4678
code {
4779
font-size: 85%;
4880
padding: 0.2em 0.3em;
49-
background-color: #f2f2f2;
81+
background-color: var(--color-background-code);
5082
}
51-
pre[class*='language-'] {
52-
margin: 16px 0 0 0;
53-
}
54-
pre[class*='language-'],
55-
pre[class*='language-'] code {
83+
pre,
84+
pre[class*="language-"] {
5685
font-size: 13px;
5786
}
58-
pre[class*='language-'] code {
87+
pre code {
5988
padding: 0;
6089
}
6190
/* #endregion */
6291

63-
/* #region 间隔 */
92+
/* #region paddings */
6493
h1,
6594
h2,
6695
h3,
6796
h4,
6897
h5,
6998
h6 {
70-
margin: 32px 0 0 0;
99+
margin: 2rem 0 0 0;
71100
}
72101
p,
73102
ul,
74103
ol,
75104
blockquote,
76105
pre {
77-
margin: 16px 0 0 0;
106+
margin: 1rem 0 0 0;
78107
}
79108
ul ul,
80109
ul ol,
@@ -84,13 +113,17 @@ ol ol {
84113
}
85114
ul,
86115
ol {
87-
padding: 0 0 0 2em;
116+
padding: 0 0 0 2rem;
88117
}
89118
hr {
90-
margin: 32px 0 32px 0;
119+
margin: 2rem 0 2rem 0;
120+
}
121+
pre,
122+
pre[class*="language-"] {
123+
margin: 1rem 0 0 0;
91124
}
92125
blockquote {
93-
padding: 0.5em 0 0.5em 1em;
126+
padding: 0.5rem 0 0.5rem 1rem;
94127
}
95128
blockquote > *:first-child {
96129
margin-top: 0;
@@ -102,10 +135,11 @@ header {
102135
top: 0;
103136
left: 0;
104137
width: 100vw;
105-
height: 60px;
106-
border-bottom: 1px solid #eee;
107-
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
108-
background-color: white;
138+
height: var(--height-header);
139+
line-height: var(--height-header);
140+
border-bottom: 1px solid var(--color-border);
141+
box-shadow: 0 0 0.5rem var(--color-header-shadow);
142+
background-color: var(--color-background);
109143
z-index: 100;
110144
}
111145
header > * {
@@ -116,12 +150,10 @@ header h1 {
116150
}
117151
header h1 a {
118152
display: block;
119-
width: 300px;
120-
height: 60px;
121-
padding: 0 32px;
122-
font-size: 18px;
123-
line-height: 60px;
124-
color: #333;
153+
width: var(--width-aside);
154+
padding: 0 2rem;
155+
font-size: 20px;
156+
color: var(--color-text);
125157
}
126158
header h1 a:hover {
127159
text-decoration: none;
@@ -132,30 +164,30 @@ header ul {
132164
}
133165
header li {
134166
display: inline-block;
135-
margin: 0 0 0 2em;
167+
margin: 0 0 0 2rem;
136168
}
137169
aside {
138170
position: fixed;
139-
top: 0;
171+
top: var(--height-header);
140172
left: 0;
141-
width: 300px;
142-
height: 100vh;
173+
width: var(--width-aside);
174+
height: calc(100vh - var(--height-header));
143175
overflow-y: auto;
144-
padding: 92px 0 32px 16px;
145-
background-color: #fafafa;
146-
border-right: 1px solid #eee;
176+
padding: 2rem 0 2rem 1rem;
177+
background-color: var(--color-background-aside);
178+
border-right: 1px solid var(--color-border);
147179
}
148180
.main {
149-
margin: 60px 0 0 300px;
150-
padding-bottom: 32px;
181+
margin: var(--height-header) 0 0 var(--width-aside);
182+
padding-bottom: 2rem;
151183
}
152184
article {
153185
overflow: auto;
154-
/* 每行 42 个字最佳，42 * 16 + 64 + 64 = 800 */
155-
max-width: 800px;
186+
/* 每行 42 个字最佳，42 * 16 + 64 + 64 = 50 * 16 = 50rem */
187+
max-width: 50rem;
156188
margin: 0 auto;
157-
padding: 0 64px;
158-
min-height: calc(100vh - 60px);
189+
padding: 0 4rem;
190+
min-height: calc(100vh - var(--height-header));
159191
}
160192
article.loading {
161193
display: flex;
@@ -169,39 +201,36 @@ aside ul {
169201
list-style: none;
170202
}
171203
aside ul ul {
172-
padding-left: 1em;
204+
padding-left: 1rem;
173205
font-size: 14px;
174206
}
175-
aside li {
176-
}
177207
aside a {
178-
color: #666;
208+
color: var(--color-text-aside);
179209
text-decoration: none;
180-
padding: 0.5em 1em;
210+
padding: 6px 15px;
181211
display: block;
182-
border: 1px solid transparent;
183-
border-right: none;
212+
outline: 1px solid transparent;
184213
}
185214
aside a.active {
186-
background-color: white;
187-
border-color: #eee !important;
188-
color: #267fd9 !important;
215+
background-color: var(--color-background);
216+
outline-color: var(--color-border) !important;
217+
color: var(--color-link) !important;
189218
}
190219
aside a:hover {
191-
color: #333;
220+
color: var(--color-text);
192221
text-decoration: none;
193-
background-color: #f2f2f2;
222+
background-color: var(--color-background-aside-hover);
194223
}
195224

196225
.header-anchor,
197226
.header-anchor:hover {
198227
opacity: 0;
199228
text-decoration: none;
200-
color: #999;
229+
color: var(--color-muted);
201230
font-weight: normal;
202231
}
203232
.header-anchor:hover {
204-
color: #267fd9;
233+
color: var(--color-link);
205234
}
206235

207236
h1:hover .header-anchor,

0 commit comments

Comments
 (0)