diff --git a/convert.py b/convert.py
index c3200fa..8aa35b6 100644
--- a/convert.py
+++ b/convert.py
@@ -37,6 +37,7 @@ def convert_markdown_to_html(md_path: Path, html_path: Path):
YREA SLS | {title}
+
@@ -65,6 +66,7 @@ def convert_markdown_to_html(md_path: Path, html_path: Path):
© 2025 Kyler Olsen
Contact |
+ Dark Mode |
{f'{prev_link}' if prev_page else ''}
Home
{f'{next_link}' if next_page else ''}
@@ -84,6 +86,12 @@ def convert_all(source_dir: Path, output_dir: Path):
dest_path.parent.mkdir(parents=True, exist_ok=True)
dest_path.write_bytes(svg_file.read_bytes())
print(f"Copied: {svg_file} → {dest_path}")
+ for js_file in source_dir.rglob("*.js"):
+ rel_path = js_file.relative_to(source_dir)
+ dest_path = output_dir / rel_path
+ dest_path.parent.mkdir(parents=True, exist_ok=True)
+ dest_path.write_bytes(js_file.read_bytes())
+ print(f"Copied: {js_file} → {dest_path}")
for css_file in source_dir.rglob("*.css"):
rel_path = css_file.relative_to(source_dir)
dest_path = output_dir / rel_path
diff --git a/docs/dark_mode.js b/docs/dark_mode.js
new file mode 100644
index 0000000..a95aa44
--- /dev/null
+++ b/docs/dark_mode.js
@@ -0,0 +1,26 @@
+// Kyler Olsen
+// Oct 2025
+
+function dark_mode() {
+ if (document.querySelector("body").getAttribute("mode") == "dark") {
+ document.querySelector("body").setAttribute("mode", "light");
+ localStorage.setItem("yrea_sls_color_mode", "light");
+ } else {
+ document.querySelector("body").setAttribute("mode", "dark");
+ localStorage.setItem("yrea_sls_color_mode", "dark");
+ }
+}
+
+function main() {
+ document.querySelector("#dark").addEventListener("click", dark_mode);
+
+ const savedMode = localStorage.getItem("yrea_sls_color_mode");
+ const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ if (savedMode) {
+ document.querySelector("body").setAttribute("mode", savedMode);
+ } else if (isDarkMode) {
+ document.querySelector("body").setAttribute("mode", "dark");
+ }
+}
+
+document.addEventListener("DOMContentLoaded", main);
diff --git a/docs/styles.css b/docs/styles.css
index 72c4344..5c3f66c 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -37,10 +37,16 @@ a {
a.headerlink {
color: #dddddd;
+ text-decoration: none;
}
a.headerlink:hover {
color: #375899;
+ text-decoration: underline;
+}
+
+a#dark {
+ text-decoration: underline;
}
/* p {
@@ -112,8 +118,10 @@ header > div > .title {
grid-area: t;
}
-header > div >.logo > a {
+header > div > .logo > a {
+ display: inline-block;
text-decoration: none;
+ padding: 5px 20px;
}
header > div > .logo {
@@ -138,7 +146,50 @@ footer {
padding-right: 20vw;
}
-@media screen and (max-width: 768px) {
+body[mode="dark"] {
+ background-color: #121212;
+ color: #dedede;
+}
+
+body[mode="dark"] a {
+ color: #6486c9;
+}
+
+body[mode="dark"] a.headerlink {
+ color: #363636;
+}
+
+body[mode="dark"] a.headerlink:hover {
+ color: #6486c9;
+}
+
+body[mode="dark"] code {
+ background-color: #363636;
+}
+
+body[mode="dark"] pre > code {
+ background-color: unset;
+ padding: unset;
+ border-radius: unset;
+}
+
+body[mode="dark"] pre {
+ border-color: #dedede;
+ background-color: #363636;
+}
+
+body[mode="dark"] blockquote {
+ border-color: #dedede;
+ border-left-color: #6486c9;
+ background-color: #001847;
+}
+
+body[mode="dark"] div.logo > a {
+ background-color: #dedede;
+ border-radius: 10px;
+}
+
+@media screen and (max-width: 1000px) {
body {
font-size: 18px;