shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Add automatic theme switching

This commit is contained in:
Shadowfacts 2019-06-28 15:51:26 -04:00
parent 45c4395729
commit 5ba89e0ed2
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
6 changed files with 52 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/generate/css.ts
View File

@ -20,14 +20,19 @@ async function generate(theme: string) {
let sass = (await fs.readFile(filename)).toString();
sass = util.render(sass, {}, filename);
const result = await renderSass(sass);
let css = (await renderSass(sass)).css.toString();
css += "\n";
let mainSass = (await fs.readFile("site/css/main.scss")).toString();
mainSass = util.render(mainSass, {}, "site/css/main.scss");
css += (await renderSass(mainSass)).css.toString();
util.write(`css/${theme}.css`, result.css);
util.write(`css/${theme}.css`, css);
}
export default async function css() {
await generate("light");
await generate("dark");
await generate("auto");
require("fs").watch("site/css/", css);
}

5
site/css/auto.scss Normal file
View File

@ -0,0 +1,5 @@
<%- include("light.scss"); %>
@media (prefers-color-scheme: dark) {
<%- include("dark.scss"); %>
}

4
site/css/dark.scss
View File

@ -20,6 +20,4 @@
--atom-hue-5-2: #be5046;
--atom-hue-6: #d19a66;
--atom-hue-6-2: #e6c07b;
}
<%- include("main.scss") %>
}

4
site/css/light.scss
View File

@ -20,6 +20,4 @@
--atom-hue-5-2: #c91243;
--atom-hue-6: #986801;
--atom-hue-6-2: #c18401;
}
<%- include("main.scss") %>
}

21
site/css/main.scss
View File

@ -359,6 +359,27 @@ figure {
font-size: 1.5em;
}
.ui-controls {
input {
display: none;
}
label {
color: var(--accent-color);
text-decoration: underline;
&:hover {
cursor: pointer;
}
}
input:checked + label {
color: var(--ui-text-color);
text-decoration: none;
font-weight: bold;
&:hover {
cursor: default;
}
}
}
.social-links ul {
padding: 0;
margin: 0;

32
site/layouts/default.html.ejs
View File

@ -31,16 +31,12 @@
<script>
(() => {
let theme = localStorage.getItem("theme");
if (theme !== "light" && theme !== "dark") {
theme = "light";
localStorage.setItem("theme", theme);
}
const theme = localStorage.getItem("theme") || "auto";
document.write(`<link rel="stylesheet" href="/css/${theme}.css">`);
})();
</script>
<noscript>
<link rel="stylesheet" href="/css/light.css">
<link rel="stylesheet" href="/css/auto.css">
</noscript>
</head>
<body itemscope itemtype="https://schema.org/Blog">
@ -77,8 +73,13 @@
<div>
<h2 class="site-title">Shadowfacts</h2>
<p class="ui-controls">
<label for="dark-theme">Dark Theme: </label>
<input type="checkbox" name="" id="dark-theme">
Theme:
<input type="radio" name="theme" id="auto" value="auto">
<label for="auto">auto</label>
<input type="radio" name="theme" id="light" value="light">
<label for="light">light</label>
<input type="radio" name="theme" id="dark" value="dark">
<label for="dark">dark</label>
</p>
</div>
<nav class="social-links">
@ -94,13 +95,14 @@
<script>
(() => {
const el = document.getElementById("dark-theme");
el.checked = localStorage.getItem("theme") === "dark";
el.onclick = function() {
const theme = this.checked ? "dark" : "light";
localStorage.setItem("theme", theme);
window.location.reload();
};
const theme = localStorage.getItem("theme") || "auto";
document.getElementsByName("theme").forEach((el) => {
el.checked = theme === el.value;
el.onchange = () => {
localStorage.setItem("theme", el.value);
window.location.reload();
};
});
})();
</script>
<noscript>