Add automatic theme switching
This commit is contained in:
parent
45c4395729
commit
5ba89e0ed2
|
@ -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);
|
||||||
}
|
}
|
|
@ -0,0 +1,5 @@
|
||||||
|
<%- include("light.scss"); %>
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
<%- include("dark.scss"); %>
|
||||||
|
}
|
|
@ -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") %>
|
|
|
@ -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") %>
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue