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(); let sass = (await fs.readFile(filename)).toString();
sass = util.render(sass, {}, filename); 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() { export default async function css() {
await generate("light"); await generate("light");
await generate("dark"); await generate("dark");
await generate("auto");
require("fs").watch("site/css/", css); 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"); %>
}

2
site/css/dark.scss
View File

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

2
site/css/light.scss
View File

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

21
site/css/main.scss
View File

@ -359,6 +359,27 @@ figure {
font-size: 1.5em; 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 { .social-links ul {
padding: 0; padding: 0;
margin: 0; margin: 0;

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

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