KylerOlsen/YREA-SLS
KylerOlsen
/
YREA-SLS
1
0
Fork 0
Code Releases 3 Wiki Activity

Added dark mode styling

This commit is contained in:
Kyler Olsen 2025-10-31 23:06:00 -06:00
parent 0b54a5e98a
commit e5b3945f8d
3 changed files with 87 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
convert.py
View File

@ -37,6 +37,7 @@ def convert_markdown_to_html(md_path: Path, html_path: Path):
<title>YREA SLS | {title}</title>
<link rel="stylesheet" href="styles.css">
<link id="icon" rel="shortcut icon" href="sls-on-white.svg">
<script src="dark_mode.js"></script>
</head>
<body>
<header>
@ -65,6 +66,7 @@ def convert_markdown_to_html(md_path: Path, html_path: Path):
<small>
<span>&copy; 2025 Kyler Olsen</span>
<a href="https://purplecello.org/contact.html">Contact</a> |
<a id="dark">Dark Mode</a> |
{f'{prev_link}' if prev_page else ''}
<a href="/">Home</a>
{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

26
docs/dark_mode.js Normal file
View File

@ -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);

53
docs/styles.css
View File

@ -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 {
@ -113,7 +119,9 @@ header > div > .title {
}
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;