beninca.link/cv.marc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dark,light

Browse source
This commit is contained in:
Marc Beninca 2025-02-18 00:01:39 +01:00
parent 425516e2fd
commit 0cded1ba60
Signed by: marc.beninca
GPG key ID: 9C7613450C80C24F
2 changed files with 14 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
script/main.js
View file

@ -1,35 +1,31 @@
const button = document.getElementById("theme"); const button = document.getElementById("theme");
const classes = document.documentElement.classList;
function button_refresh() {
button.innerHTML = theme_get();
}
function theme_get() { function theme_get() {
return classes.contains("dark")?"dark":"light"; return document.documentElement.getAttribute("data-theme");
} }
function theme_read() { function theme_load() {
const theme = localStorage.getItem("theme"); const theme = localStorage.getItem("theme");
if (theme) { if (theme) {
theme_set(theme); theme_set(theme);
} }
} }
function theme_set(theme) { function theme_set(theme) {
if (theme == "dark") { document.documentElement.setAttribute("data-theme", theme);
classes.add("dark"); button.innerHTML = theme;
theme_write(theme);
} }
button_refresh(); function theme_swap(theme) {
return theme === "dark" ? "light" : "dark";
} }
function theme_toggle() { function theme_toggle() {
classes.toggle("dark"); theme_set(theme_swap(theme_get()));
button_refresh();
theme_write();
} }
function theme_write() { function theme_write(theme) {
localStorage.setItem("theme", theme_get()); localStorage.setItem("theme", theme);
} }
button.addEventListener("click", () => { button.addEventListener("click", () => {
theme_toggle(); theme_toggle();
}); });
theme_read(); theme_load();

3
style/main.css
View file

@ -1,4 +1,5 @@
:root { :root {
color-scheme: light dark;
--margin: .4rem; --margin: .4rem;
} }
:root { :root {
@ -16,7 +17,7 @@
--ruler-border: #888; --ruler-border: #888;
} }
@media screen { @media screen {
.dark { [data-theme="dark"] {
--anchor-background: #222; --anchor-background: #222;
--anchor-text: #f88; --anchor-text: #f88;
--banner-background: #558; --banner-background: #558;