@@ -110,13 +110,15 @@
Rust Quiz#
+
-
+
+
diff --git a/docs/quiz.css b/docs/quiz.css
index c56baae..fb7087e 100644
--- a/docs/quiz.css
+++ b/docs/quiz.css
@@ -79,6 +79,12 @@ p code {
color: crimson;
}
+pre code {
+ font-size: .875em;
+ color: var(--bs-code-color);
+ word-wrap: break-word;
+}
+
#form label {
display: inline !important;
}
@@ -95,3 +101,33 @@ blockquote {
padding-left: 30px;
font-style: italic;
}
+
+.toggle-theme {
+ display: table-row;
+ vertical-align: bottom;
+ text-align: right;
+ height: 0;
+ line-height: 0;
+}
+
+.toggle-theme-link {
+ display: inline-block;
+ height: 0;
+ position: relative;
+ right: 70px;
+ bottom: 10px;
+}
+
+.toggle-theme-link:after {
+ content: "[Toggle Theme]";
+}
+
+[data-bs-theme=dark] p code {
+ --bs-code-color: #dd8888;
+ color: var(--bs-code-color);
+}
+
+[data-bs-theme=light] p code {
+ --bs-code-color: crimson;
+ color: var(--bs-code-color);
+}
\ No newline at end of file
diff --git a/docs/theme-toggler.js b/docs/theme-toggler.js
new file mode 100644
index 0000000..0b7866d
--- /dev/null
+++ b/docs/theme-toggler.js
@@ -0,0 +1,67 @@
+(() => {
+ "use strict";
+ const hljsStyleCdnDefault =
+ "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css";
+ const hljsStyleCdnDark =
+ "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/synth-midnight-terminal-dark.min.css";
+
+ const hlCssLinkTag = document.querySelector("#hl-css");
+ const storedTheme = localStorage.getItem("theme");
+ const cdnMap = {
+ light: hljsStyleCdnDefault,
+ dark: hljsStyleCdnDark,
+ };
+ const getPreferredTheme = () => {
+ if (storedTheme) {
+ return storedTheme;
+ }
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? "dark"
+ : "light";
+ };
+ const setTheme = function (theme) {
+ if (
+ theme === "auto" &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches
+ ) {
+ document.documentElement.setAttribute("data-bs-theme", "dark");
+ } else {
+ document.documentElement.setAttribute("data-bs-theme", theme);
+ }
+ };
+ const getToggleToTheme = (currentTheme) =>
+ currentTheme === "dark" ? "light" : "dark";
+ const initTheme = () => {
+ const currentTheme = getPreferredTheme();
+ setTheme(currentTheme);
+ const toggleTargetTheme = getToggleToTheme(currentTheme);
+ hlCssLinkTag.setAttribute("href", cdnMap?.[currentTheme]);
+ document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
+ const toggleTheme = () => {
+ document
+ .querySelectorAll("[data-bs-theme-value]")
+ .forEach((_toggle) => {
+ const targetTheme = getToggleToTheme(
+ document.documentElement.getAttribute("data-bs-theme"),
+ );
+ hlCssLinkTag.setAttribute("href", cdnMap?.[targetTheme]);
+ setTheme(targetTheme);
+ localStorage.setItem("theme", targetTheme);
+ });
+ };
+ console.log("", toggleTargetTheme);
+ toggle.setAttribute("data-bs-theme-value", toggleTargetTheme);
+ toggle.addEventListener("click", toggleTheme);
+ });
+ };
+ initTheme();
+ window
+ .matchMedia("(prefers-color-scheme: dark)")
+ .addEventListener("change", () => {
+ if (storedTheme !== "light" || storedTheme !== "dark") {
+ setTheme(getPreferredTheme());
+ }
+ });
+
+ window.rustQuizSetTheme = setTheme;
+})();