Added dark mode styling
This commit is contained in:
parent
0b54a5e98a
commit
e5b3945f8d
|
|
@ -37,6 +37,7 @@ def convert_markdown_to_html(md_path: Path, html_path: Path):
|
||||||
<title>YREA SLS | {title}</title>
|
<title>YREA SLS | {title}</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link id="icon" rel="shortcut icon" href="sls-on-white.svg">
|
<link id="icon" rel="shortcut icon" href="sls-on-white.svg">
|
||||||
|
<script src="dark_mode.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -65,6 +66,7 @@ def convert_markdown_to_html(md_path: Path, html_path: Path):
|
||||||
<small>
|
<small>
|
||||||
<span>© 2025 Kyler Olsen</span>
|
<span>© 2025 Kyler Olsen</span>
|
||||||
<a href="https://purplecello.org/contact.html">Contact</a> |
|
<a href="https://purplecello.org/contact.html">Contact</a> |
|
||||||
|
<a id="dark">Dark Mode</a> |
|
||||||
{f'{prev_link}' if prev_page else ''}
|
{f'{prev_link}' if prev_page else ''}
|
||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
{f'{next_link}' if next_page else ''}
|
{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.parent.mkdir(parents=True, exist_ok=True)
|
||||||
dest_path.write_bytes(svg_file.read_bytes())
|
dest_path.write_bytes(svg_file.read_bytes())
|
||||||
print(f"Copied: {svg_file} → {dest_path}")
|
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"):
|
for css_file in source_dir.rglob("*.css"):
|
||||||
rel_path = css_file.relative_to(source_dir)
|
rel_path = css_file.relative_to(source_dir)
|
||||||
dest_path = output_dir / rel_path
|
dest_path = output_dir / rel_path
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -37,10 +37,16 @@ a {
|
||||||
|
|
||||||
a.headerlink {
|
a.headerlink {
|
||||||
color: #dddddd;
|
color: #dddddd;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.headerlink:hover {
|
a.headerlink:hover {
|
||||||
color: #375899;
|
color: #375899;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a#dark {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* p {
|
/* p {
|
||||||
|
|
@ -112,8 +118,10 @@ header > div > .title {
|
||||||
grid-area: t;
|
grid-area: t;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div >.logo > a {
|
header > div > .logo > a {
|
||||||
|
display: inline-block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
padding: 5px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div > .logo {
|
header > div > .logo {
|
||||||
|
|
@ -138,7 +146,50 @@ footer {
|
||||||
padding-right: 20vw;
|
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 {
|
body {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue