forked from shadowfacts/shadowfacts.net
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();
|
||||
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);
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
<%- include("light.scss"); %>
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
<%- include("dark.scss"); %>
|
||||
}
|
|
@ -20,6 +20,4 @@
|
|||
--atom-hue-5-2: #be5046;
|
||||
--atom-hue-6: #d19a66;
|
||||
--atom-hue-6-2: #e6c07b;
|
||||
}
|
||||
|
||||
<%- include("main.scss") %>
|
||||
}
|
|
@ -20,6 +20,4 @@
|
|||
--atom-hue-5-2: #c91243;
|
||||
--atom-hue-6: #986801;
|
||||
--atom-hue-6-2: #c18401;
|
||||
}
|
||||
|
||||
<%- include("main.scss") %>
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue