Skip to content

Commit 7cfe565

Browse files
LouisDISPALouisDISPA
committed
Add dark mode
1 parent f55d745 commit 7cfe565

File tree

6 files changed

+138
-24
lines changed

6 files changed

+138
-24
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
/public/
1+
/public/
2+
/static/syntax-*

‎config.toml

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,9 @@ generate_feeds = true
1111

1212
[markdown]
1313
highlight_code = true
14-
highlight_theme = "OneHalfLight"
14+
highlight_theme = "css"
15+
16+
highlight_themes_css = [
17+
{ theme = "OneHalfDark", filename = "syntax-theme-dark.css" },
18+
{ theme = "OneHalfLight", filename = "syntax-theme-light.css" },
19+
]

‎content/_index.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ template = "index.html"
44
+++
55

66
<div class="hero">
7-
<img src="logo.svg">
8-
<div>uutils</div>
7+
<picture>
8+
<source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
9+
<img src="logo.svg">
10+
</picture>
11+
<div>uutils</div>
912
</div>
1013

1114
The uutils project reimplements ubiquitous command line utilities in

‎static/logo-dark.svg

Lines changed: 61 additions & 0 deletions
Loading

‎static/style.css

Lines changed: 61 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
:root {
2+
/* Light theme colors (default) */
23
--dark-fg-color: #fff;
34
--light-fg-color: #141414;
45
--light-bg-color: var(--dark-fg-color);
@@ -14,7 +15,37 @@
1415
--dark-highlight-fg-color: #ededed;
1516
--highlight-fg-color: var(--light-highlight-fg-color);
1617
--highlight-bg-color: var(--light-highlight-bg-color);
18+
--link-text-color: #c04828;
19+
--border-color: #ddd;
20+
--post-bg-color: #e5e5e5;
1721
--font-face: "Fira Sans", sans-serif;
22+
23+
--github-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
24+
--github-icon-black: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
25+
}
26+
27+
@media (prefers-color-scheme: dark) {
28+
:root {
29+
--fg-color: #e1e1e1;
30+
--bg-color: #222222;
31+
--light-link-color: #ff7b5c;
32+
--dark-link-color: #ff6b47;
33+
--link-color: var(--light-link-color);
34+
--light-highlight-bg-color: #2d2d2d;
35+
--light-highlight-fg-color: #ffffff;
36+
--dark-highlight-bg-color: #27272a;
37+
--dark-highlight-fg-color: #ededed;
38+
--highlight-fg-color: var(--light-highlight-fg-color);
39+
--highlight-bg-color: var(--light-highlight-bg-color);
40+
--link-text-color: var(--fg-color);
41+
--border-color: #404040;
42+
--post-bg-color: #2d2d2d;
43+
}
44+
}
45+
46+
body {
47+
background-color: var(--bg-color);
48+
color: var(--fg-color);
1849
}
1950

2051
*,
@@ -89,7 +120,7 @@ header {
89120
justify-items: center;
90121
padding: 0.5rem 2rem;
91122
width: 100%;
92-
border-bottom: 1px solid #ddd;
123+
border-bottom: 1px solid var(--border-color);
93124
font-size: 1.2rem;
94125
}
95126

@@ -111,13 +142,12 @@ header .home svg {
111142
}
112143

113144
header a {
114-
color: black;
145+
color: var(--fg-color);
115146
border-bottom: 2px solid transparent;
116147
}
117148

118149
header a:hover:not(.home) {
119-
color: black;
120-
border-bottom: 2px solid #c04828;
150+
border-bottom: 2px solid var(--link-text-color);
121151
}
122152

123153
.navigation-block {
@@ -155,7 +185,7 @@ header .icon {
155185
header {
156186
grid-template-columns: max-content 1fr;
157187
}
158-
188+
159189
.spacer {
160190
display: none;
161191
}
@@ -165,7 +195,7 @@ header .icon {
165195
grid-column: auto / span 2;
166196
justify-self: left;
167197
}
168-
198+
169199
header:not(.open) .spacer,
170200
header:not(.open) .navigation-block {
171201
display: none;
@@ -273,8 +303,8 @@ ul {
273303
/* FOOTER */
274304
footer {
275305
align-items: center;
276-
background-color: var(--fg-color);
277-
color: var(--bg-color);
306+
background-color: var(--light-fg-color);
307+
color: var(--light-bg-color);
278308
display: flex;
279309
flex-grow: 0;
280310
flex-shrink: 1;
@@ -286,17 +316,23 @@ footer {
286316
}
287317

288318
.github-icon {
289-
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
319+
background-image: var(--github-icon);
290320
height: 1.25rem;
291321
width: 1.25rem;
292322
}
293323

294324
.github-icon-black {
295-
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
325+
background-image: var(--github-icon-black);
296326
height: 1em;
297327
width: 1em;
298328
}
299329

330+
@media (prefers-color-scheme: dark) {
331+
.github-icon-black {
332+
background-image: var(--github-icon);
333+
}
334+
}
335+
300336
.projects {
301337
display: flex;
302338
flex-direction: column;
@@ -325,13 +361,13 @@ footer {
325361
margin-bottom: 0;
326362
}
327363

328-
.project>span {
364+
.project > span {
329365
color: transparent;
330366
transition: color 0.3s;
331367
}
332368

333-
.project:hover>span {
334-
color: black;
369+
.project:hover > span {
370+
color: var(--fg-color);
335371
}
336372

337373
.project:hover {
@@ -353,21 +389,21 @@ footer {
353389

354390
.details {
355391
margin-bottom: 1.5em;
356-
color: #333;
392+
color: var(--fg-color);
357393
}
358394

359395
.post-thingy {
360396
display: block;
361397
padding: 1em;
362-
color: black;
363-
background: #e5e5e5;
398+
color: var(--fg-color);
399+
background: var(--post-bg-color);
364400
border-radius: 0.3em;
365-
border: 0.2em solid #e5e5e5;
401+
border: 0.2em solid var(--post-bg-color);
366402
margin-bottom: 0.5em;
367403
}
368404

369405
.post-thingy:hover {
370-
border-color: #c04828;
406+
border-color: var(--link-text-color);
371407
background: transparent;
372408
}
373409

@@ -391,8 +427,14 @@ blockquote {
391427

392428
.links > a {
393429
padding: 0.2em 1em;
394-
color: #c04828;
430+
color: var(--link-text-color);
395431
border: 2px solid #c04828;
396432
flex: 1;
397433
text-align: center;
398434
}
435+
436+
.links > a:hover {
437+
color: var(--dark-fg-color);
438+
background-color: #c04828;
439+
border-color: #c04828;
440+
}

‎templates/base.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<meta charset="utf-8">
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1212
<link href="/style.css" rel="stylesheet">
13+
<link href="/syntax-theme-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)" />
14+
<link href="/syntax-theme-light.css" rel="stylesheet" media="(prefers-color-scheme: light)" />
1315
</head>
1416

1517
<body>
@@ -54,4 +56,4 @@
5456
});
5557
</script>
5658
</body>
57-
</html>
59+
</html>

0 commit comments

Comments
 (0)