Skip to content

Commit 0e645cb

Browse files
KuinoxKuinox
authored
Fixed light theme. (#21)
1 parent c99be21 commit 0e645cb

15 files changed

+213
-45
lines changed

‎generateAssets.js

+10
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,16 @@ async function main() {
6464
"src/generated/emojiTypes.ts",
6565
`export type EmojiName = ${emojis.map((s) => `"${s}"`).join(" | ")};`
6666
);
67+
68+
// copy hljs themes to public folder
69+
await fs.promises.copyFile(
70+
"node_modules/highlight.js/styles/atom-one-light.css",
71+
"public/generated/atom-one-light.css"
72+
);
73+
await fs.promises.copyFile(
74+
"node_modules/highlight.js/styles/atom-one-dark.css",
75+
"public/generated/atom-one-dark.css"
76+
);
6777
}
6878
main();
6979

‎src/app/LandingSegment.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
.getstarted {
2222
background-color: #009a94;
23-
color: white;
23+
color: white !important;
2424
border: none;
2525
}
2626

‎src/app/SecondSegment.css

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.second-segment {
2-
background-color: #1c1f26;
2+
background-color: #eceef1;
33
padding-top: 2em;
44
border-top: 1px solid #e5e7eb28;
55
display: flex;
@@ -8,6 +8,12 @@
88
padding-bottom: 6em;
99
}
1010

11+
@media (prefers-color-scheme: dark) {
12+
.second-segment {
13+
background-color: #1c1f26;
14+
}
15+
}
16+
1117
.splash-code-viewer {
1218
width: 70%;
1319
}

‎src/app/blog/[articleName]/CommentScript.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
"use client";
2-
import { useEffect, useRef } from "react";
2+
import { useEffect, useRef, useState } from "react";
33

44
export default function CommentScript() {
55
// this is an "hack" because react doesn't like custom attribute in script tag.
66
// So we gotta build the script tag manually.
77
const commentBox = useRef<HTMLDivElement | null>(null);
8+
const [isDarkMode, setIsDarkMode] = useState(false);
89

910
useEffect(() => {
11+
const matcher = window.matchMedia("(prefers-color-scheme: dark)");
12+
const onChange = ({ matches }: { matches: boolean }) => setIsDarkMode(matches);
13+
matcher.addEventListener("change", onChange);
14+
15+
const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
16+
const theme = isDarkMode ? "dark_dimmed" : "light";
1017
const scriptEl = document.createElement("script");
1118
scriptEl.src = "https://giscus.app/client.js";
1219
scriptEl.setAttribute("data-repo", "Draco-lang/draco-lang.org");
@@ -18,7 +25,7 @@ export default function CommentScript() {
1825
scriptEl.setAttribute("data-reactions-enabled", "1");
1926
scriptEl.setAttribute("data-emit-metadata", "0");
2027
scriptEl.setAttribute("data-input-position", "top");
21-
scriptEl.setAttribute("data-theme", "dark_dimmed");
28+
scriptEl.setAttribute("data-theme", theme);
2229
scriptEl.setAttribute("data-lang", "en");
2330
scriptEl.setAttribute("crossorigin", "anonymous");
2431
scriptEl.async = true;
@@ -28,8 +35,9 @@ export default function CommentScript() {
2835

2936
return () => {
3037
current.innerHTML = "";
38+
matcher.removeEventListener("change", onChange);
3139
};
32-
}, []);
40+
}, [isDarkMode]);
3341

3442
return <div ref={commentBox}></div>;
3543
}

‎src/app/blog/page.css

+21-3
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,12 @@
88
}
99

1010
.blog-entries > a {
11-
background-color: #1c1f26;
12-
border: 1px solid #e5e7eb28;
11+
background-color: #eceef1;
12+
border: 1px solid rgba(0, 0, 0, 10%);
1313
border-radius: 5px;
1414
display: flex;
1515
flex-direction: row;
1616
height: 10.75rem;
17-
color: white;
1817
text-decoration: none;
1918
margin-left: 1em;
2019
margin-right: 1em;
@@ -32,10 +31,27 @@
3231
margin-top: 0;
3332
margin-bottom: 0.5rem;
3433
font-size: 1.25rem;
34+
color: rgb(42, 42, 42);
3535
}
3636

3737
.article-preview-left-part {
3838
padding: 1.75rem 1.75rem 1.25rem;
39+
color: rgb(117, 117, 117);
40+
}
41+
42+
@media (prefers-color-scheme: dark) {
43+
.blog-entries > a {
44+
background-color: #1c1f26;
45+
border-color: #e5e7eb28;
46+
}
47+
48+
.article-preview-left-part {
49+
color: white;
50+
}
51+
52+
.blog-entries > a h1 {
53+
color: white;
54+
}
3955
}
4056

4157
/* stylelint-disable-next-line media-feature-range-notation */
@@ -45,13 +61,15 @@
4561
}
4662
}
4763

64+
/* stylelint-disable-next-line media-feature-range-notation */
4865
@media (max-width: 650px) {
4966
.blog-entries > a {
5067
flex-direction: column-reverse;
5168
justify-content: center;
5269
align-items: center;
5370
height: 20rem;
5471
}
72+
5573
.blog-entries > a img {
5674
max-width: 100%;
5775
min-height: 30%;

‎src/app/community/page.css

+10-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
flex-direction: column;
1212
justify-content: left;
1313
height: 500px;
14-
border: 1px solid #e5e7eb28;
15-
background-color: #333740;
14+
border: 1px solid rgba(0, 0, 0, 10%);
15+
background-color: rgb(246, 247, 249);
1616
border-radius: 5px;
1717
margin: 10px;
1818
padding: 0 30px 0 30px;
@@ -22,6 +22,13 @@
2222
flex-shrink: 1;
2323
}
2424

25+
@media (prefers-color-scheme: dark) {
26+
.community-content > div {
27+
background-color: #333740;
28+
border-color: #e5e7eb28;
29+
}
30+
}
31+
2532
.community-content p {
2633
display: flex;
2734
align-items: flex-start;
@@ -53,6 +60,7 @@
5360
margin-bottom: 1em;
5461
}
5562

63+
/* stylelint-disable-next-line media-feature-range-notation */
5664
@media (max-width: 650px) {
5765
.community-content {
5866
margin: 0 1em 2em 1em;

‎src/app/layout.css

+44-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
body {
2-
background-color: #282c34;
32
min-height: 100vh;
43
display: flex;
54
flex-direction: column;
@@ -10,17 +9,6 @@ body {
109
"Droid Sans", "Helvetica Neue", sans-serif;
1110
}
1211

13-
@media (prefers-color-scheme: dark) {
14-
body {
15-
font-weight: 350;
16-
color: white;
17-
}
18-
19-
button {
20-
color: white;
21-
}
22-
}
23-
2412
a {
2513
color: #00c8bd;
2614
}
@@ -40,10 +28,10 @@ code {
4028
align-items: center;
4129
justify-content: space-between;
4230
position: fixed;
43-
width: 100vw;
31+
width: 100%;
4432
box-sizing: border-box;
45-
background-color: rgba(40, 44, 52, 95%);
4633
backdrop-filter: blur(16px) saturate(2);
34+
background-color: rgba(255, 255, 255);
4735
border-bottom: 0 solid #e5e7eb;
4836
flex-grow: 1;
4937
z-index: 100;
@@ -125,19 +113,37 @@ code {
125113
}
126114

127115
body:has(.page-docs) .active-on-docs {
128-
outline: 1px solid #00c8bd;
116+
outline: 1px solid #00857f;
129117
}
130118

131119
body:has(.page-specs) .active-on-specs {
132-
outline: 1px solid #00c8bd;
120+
outline: 1px solid #00857f;
133121
}
134122

135123
body:has(.page-community) .active-on-community {
136-
outline: 1px solid #00c8bd;
124+
outline: 1px solid #00857f;
137125
}
138126

139127
body:has(.page-blog) .active-on-blog {
140-
outline: 1px solid #00c8bd;
128+
outline: 1px solid #00857f;
129+
}
130+
131+
@media (prefers-color-scheme: dark) {
132+
body:has(.page-docs) .active-on-docs {
133+
outline: 1px solid #00c8bd;
134+
}
135+
136+
body:has(.page-specs) .active-on-specs {
137+
outline: 1px solid #00c8bd;
138+
}
139+
140+
body:has(.page-community) .active-on-community {
141+
outline: 1px solid #00c8bd;
142+
}
143+
144+
body:has(.page-blog) .active-on-blog {
145+
outline: 1px solid #00c8bd;
146+
}
141147
}
142148

143149
body:has(.page-docs) .active-on-docs:hover {
@@ -206,7 +212,6 @@ h6 {
206212
left: 0;
207213
top: 64px;
208214
width: 100%;
209-
background-color: rgba(40, 44, 52);
210215
height: calc(100vh - 64px);
211216
align-items: flex-start;
212217
justify-content: flex-start;
@@ -217,3 +222,23 @@ h6 {
217222
display: flex;
218223
}
219224
}
225+
226+
@media (prefers-color-scheme: dark) {
227+
button {
228+
color: white;
229+
}
230+
231+
body {
232+
background-color: #282c34;
233+
font-weight: 350;
234+
color: white;
235+
}
236+
237+
.links {
238+
background-color: rgba(40, 44, 52);
239+
}
240+
241+
.top-bar {
242+
background-color: rgba(40, 44, 52, 95%);
243+
}
244+
}

‎src/app/layout.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export default async function RootLayout({ children }: Params) {
2222
// Basically next.js prevent default behavior when clicking on a link
2323
// So we can't close it with pure html/css
2424
// So we add a lightweight script that close it when the user navigate to another page
25-
const scriptHTML = `
25+
// The css part is to get dynamic theme for the code viewer.
26+
const rawHTML = `
2627
<script>
2728
let checkbox = document.getElementById("top-bar-hamburger");
2829
let originalPushState = history.pushState;
@@ -31,6 +32,10 @@ export default async function RootLayout({ children }: Params) {
3132
checkbox.checked = false;
3233
};
3334
</script>
35+
<style>
36+
@import url("/generated/atom-one-light.css") screen;
37+
@import url("/generated/atom-one-dark.css") screen and (prefers-color-scheme: dark);
38+
</style>
3439
`;
3540

3641
const specs = await getSpecsInfo();
@@ -78,7 +83,7 @@ export default async function RootLayout({ children }: Params) {
7883
Blog
7984
</DracoButton>
8085
</div>
81-
<div dangerouslySetInnerHTML={{ __html: scriptHTML }}></div>
86+
<div dangerouslySetInnerHTML={{ __html: rawHTML }}></div>
8287
</div>
8388
<a href="https://github.com/Draco-lang/">
8489
<Image

0 commit comments

Comments
 (0)