Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit7cfe565

Browse files
committed
Add dark mode
1 parentf55d745 commit7cfe565

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
<divclass="hero">
7-
<imgsrc="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.5rem2rem;
91122
width:100%;
92-
border-bottom:1px solid#ddd;
123+
border-bottom:1px solidvar(--border-color);
93124
font-size:1.2rem;
94125
}
95126

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

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

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

123153
.navigation-block {
@@ -155,7 +185,7 @@ header .icon {
155185
header {
156186
grid-template-columns: max-content1fr;
157187
}
158-
188+
159189
.spacer {
160190
display: none;
161191
}
@@ -165,7 +195,7 @@ header .icon {
165195
grid-column: auto/ span2;
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: color0.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 solidvar(--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.2em1em;
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
<metacharset="utf-8">
1111
<metaname="viewport"content="width=device-width, initial-scale=1.0">
1212
<linkhref="/style.css"rel="stylesheet">
13+
<linkhref="/syntax-theme-dark.css"rel="stylesheet"media="(prefers-color-scheme: dark)"/>
14+
<linkhref="/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)
[8]ページ先頭
©2009-2025 Movatter.jp