summaryrefslogtreecommitdiff
path: root/src/js/theme.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/theme.js')
-rw-r--r--src/js/theme.js60
1 files changed, 30 insertions, 30 deletions
diff --git a/src/js/theme.js b/src/js/theme.js
index 8239c69..a49fc8c 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -1,30 +1,32 @@
-window.addEventListener('DOMContentLoaded', () => {
- const storageTheme = window.localStorage?.getItem('theme');
- const preferesDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+window.addEventListener("DOMContentLoaded", () => {
+ const storageTheme = window.localStorage?.getItem("theme");
+ const preferesDark = window.matchMedia(
+ "(prefers-color-scheme: dark)",
+ ).matches;
let isDark = preferesDark;
- const hid = document.querySelector('#hid');
- const html = document.querySelector('html');
- const aside = document.querySelector('#side-bar');
- const sidenotes = document.querySelector('.sidenotes');
- const footnotes = document.querySelector('.footnotes');
- const harr = document.querySelector('#harr');
- const links = document.querySelectorAll('a');
- const likes = document.querySelectorAll('.likes');
- const tables = document.querySelectorAll('table');
- const codes = document.querySelectorAll('p code');
-
- if (storageTheme === 'dark' || storageTheme === 'light') {
+ const hid = document.querySelector("#hid");
+ const html = document.querySelector("html");
+ const aside = document.querySelector("#side-bar");
+ const sidenotes = document.querySelector(".sidenotes");
+ const footnotes = document.querySelector(".footnotes");
+ const harr = document.querySelector("#harr");
+ const links = document.querySelectorAll("a");
+ const likes = document.querySelectorAll(".likes");
+ const tables = document.querySelectorAll("table");
+ const codes = document.querySelectorAll("p code");
+
+ if (storageTheme === "dark" || storageTheme === "light") {
const theme = storageTheme;
- isDark = storageTheme === 'dark';
+ isDark = storageTheme === "dark";
hid.classList.add(theme);
html.classList.add(theme);
aside.classList.add(theme);
sidenotes.classList.add(theme);
harr.classList.add(theme);
- if(footnotes) {
+ if (footnotes) {
footnotes.classList.add(theme);
}
@@ -41,17 +43,17 @@ window.addEventListener('DOMContentLoaded', () => {
code.classList.add(theme);
}
- for (const article of document.querySelectorAll('article')) {
+ for (const article of document.querySelectorAll("article")) {
article.classList.add(theme);
}
- for (const article of document.querySelectorAll('article')) {
+ for (const article of document.querySelectorAll("article")) {
article.classList.add(theme);
}
}
function toogleTheme() {
- const arg = isDark ? ['dark', 'light'] : ['light', 'dark'];
+ const arg = isDark ? ["dark", "light"] : ["light", "dark"];
const theme = arg[1];
if (!hid.classList.replace(...arg)) {
@@ -73,8 +75,6 @@ window.addEventListener('DOMContentLoaded', () => {
footnotes.classList.add(theme);
}
-
-
if (!harr.classList.replace(...arg)) {
harr.classList.add(theme);
}
@@ -100,7 +100,7 @@ window.addEventListener('DOMContentLoaded', () => {
}
}
- for (const article of document.querySelectorAll('article')) {
+ for (const article of document.querySelectorAll("article")) {
if (!article.classList.replace(...arg)) {
article.classList.add(theme);
}
@@ -108,19 +108,19 @@ window.addEventListener('DOMContentLoaded', () => {
isDark = !isDark;
if (window.localStorage) {
- window.localStorage.setItem('theme', isDark ? 'dark' : 'light');
+ window.localStorage.setItem("theme", isDark ? "dark" : "light");
}
}
- const sun = document.querySelector('.sun');
- const moon = document.querySelector('.moon');
+ const sun = document.querySelector(".sun");
+ const moon = document.querySelector(".moon");
- sun.addEventListener('click', toogleTheme);
- moon.addEventListener('click', toogleTheme);
+ sun.addEventListener("click", toogleTheme);
+ moon.addEventListener("click", toogleTheme);
if (isDark) {
- hid.classList.add('dark');
+ hid.classList.add("dark");
} else {
- hid.classList.add('light');
+ hid.classList.add("light");
}
});