Skip to content

Commit bb7e90a

Browse files
onepisYaonepisYa
committed
feat: add simple dark mode
1 parent d759e3b commit bb7e90a

File tree

3 files changed

+125
-10
lines changed

3 files changed

+125
-10
lines changed

‎docs/index.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html data-bs-theme="" lang="en">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -24,12 +24,12 @@
2424
<meta name="twitter:title" content="Rust Quiz" />
2525
<meta name="twitter:description" content="What is the output of this Rust program?" />
2626

27-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
28-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
27+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
28+
<link id="hl-css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
2929
<link rel="stylesheet" href="/rust-quiz/quiz.css">
3030
</head>
3131

32-
<body class="bg-light">
32+
<body>
3333
<div class="page">
3434
<div class="container">
3535
<div class="pt-5">
@@ -110,13 +110,15 @@ <h2>Rust Quiz<span id="question-number" class="ms-4 notbold d-none">#<span id="c
110110

111111
<div id="reset" class="reset d-none">
112112
<a href="javascript:reset();" class="reset-link"></a>
113+
<a class="toggle-theme-link" data-bs-theme-value="light"></a>
113114
</div>
114115
</div>
115116

116-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
117+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
117118
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
118119
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/rust.min.js"></script>
119120
<script src="/rust-quiz/questions.js"></script>
120121
<script src="/rust-quiz/quiz.js"></script>
122+
<script src="/rust-quiz/theme-toggler.js"></script>
121123
</body>
122124
</html>

‎docs/quiz.css

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,19 +79,65 @@ p code {
7979
color: crimson;
8080
}
8181

82+
pre code {
83+
font-size: .875em;
84+
color: var(--bs-code-color);
85+
word-wrap: break-word;
86+
}
87+
8288
#form label {
83-
display: inline !important;
89+
display: inline !important;
8490
}
8591

8692
a code {
87-
text-decoration: underline;
93+
text-decoration: underline;
8894
}
8995

9096
#footer p {
91-
margin-bottom: 0;
97+
margin-bottom: 0;
9298
}
9399

94100
blockquote {
95-
padding-left: 30px;
96-
font-style: italic;
101+
padding-left: 30px;
102+
font-style: italic;
103+
}
104+
105+
.toggle-theme {
106+
107+
display: table-row;
108+
109+
vertical-align: bottom;
110+
111+
text-align: right;
112+
113+
height: 0;
114+
115+
line-height: 0;
116+
97117
}
118+
119+
120+
121+
.toggle-theme-link {
122+
display: inline-block;
123+
height: 0;
124+
position: relative;
125+
right: 70px;
126+
bottom: 10px;
127+
}
128+
129+
130+
131+
.toggle-theme-link:after {
132+
content: "[Toggle Theme]";
133+
}
134+
135+
[data-bs-theme=dark] p code {
136+
--bs-code-color: #dd8888;
137+
color: var(--bs-code-color);
138+
}
139+
140+
[data-bs-theme=light] p code {
141+
--bs-code-color: crimson;
142+
color: var(--bs-code-color);
143+
}

‎docs/theme-toggler.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
(() => {
2+
"use strict";
3+
const hljsStyleCdnDefault =
4+
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css";
5+
const hljsStyleCdnDark =
6+
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/synth-midnight-terminal-dark.min.css";
7+
8+
const hlCssLinkTag = document.querySelector("#hl-css");
9+
const storedTheme = localStorage.getItem("theme");
10+
const cdnMap = {
11+
light: hljsStyleCdnDefault,
12+
dark: hljsStyleCdnDark,
13+
};
14+
const getPreferredTheme = () => {
15+
if (storedTheme) {
16+
return storedTheme;
17+
}
18+
return window.matchMedia("(prefers-color-scheme: dark)").matches
19+
? "dark"
20+
: "light";
21+
};
22+
const setTheme = function (theme) {
23+
if (
24+
theme === "auto" &&
25+
window.matchMedia("(prefers-color-scheme: dark)").matches
26+
) {
27+
document.documentElement.setAttribute("data-bs-theme", "dark");
28+
} else {
29+
document.documentElement.setAttribute("data-bs-theme", theme);
30+
}
31+
};
32+
const getToggleToTheme = (currentTheme) =>
33+
currentTheme === "dark" ? "light" : "dark";
34+
const initTheme = () => {
35+
const currentTheme = getPreferredTheme();
36+
setTheme(currentTheme);
37+
const toggleTargetTheme = getToggleToTheme(currentTheme);
38+
hlCssLinkTag.setAttribute("href", cdnMap?.[currentTheme]);
39+
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
40+
const toggleTheme = () => {
41+
document
42+
.querySelectorAll("[data-bs-theme-value]")
43+
.forEach((_toggle) => {
44+
const targetTheme = getToggleToTheme(
45+
document.documentElement.getAttribute("data-bs-theme"),
46+
);
47+
hlCssLinkTag.setAttribute("href", cdnMap?.[targetTheme]);
48+
setTheme(targetTheme);
49+
localStorage.setItem("theme", targetTheme);
50+
});
51+
};
52+
console.log("", toggleTargetTheme);
53+
toggle.setAttribute("data-bs-theme-value", toggleTargetTheme);
54+
toggle.addEventListener("click", toggleTheme);
55+
});
56+
};
57+
initTheme();
58+
window
59+
.matchMedia("(prefers-color-scheme: dark)")
60+
.addEventListener("change", () => {
61+
if (storedTheme !== "light" || storedTheme !== "dark") {
62+
setTheme(getPreferredTheme());
63+
}
64+
});
65+
66+
window.rustQuizSetTheme = setTheme;
67+
})();

0 commit comments

Comments
 (0)