1 files changed, 126 insertions, 0 deletions
diff --git a/src/js/theme.js b/src/js/theme.js
new file mode 100644
index 0000000..8239c69
--- /dev/null
+++ b/src/js/theme.js
@@ -0,0 +1,126 @@
+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 theme = storageTheme;
+    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) {
+      footnotes.classList.add(theme);
+    }
+
+    for (let link of links) {
+      link.classList.add(theme);
+    }
+    for (let likeBox of likes) {
+      likeBox.classList.add(theme);
+    }
+    for (let table of tables) {
+      table.classList.add(theme);
+    }
+    for (let code of codes) {
+      code.classList.add(theme);
+    }
+
+    for (const article of document.querySelectorAll('article')) {
+      article.classList.add(theme);
+    }
+
+    for (const article of document.querySelectorAll('article')) {
+      article.classList.add(theme);
+    }
+  }
+
+  function toogleTheme() {
+    const arg = isDark ? ['dark', 'light'] : ['light', 'dark'];
+    const theme = arg[1];
+
+    if (!hid.classList.replace(...arg)) {
+      hid.classList.add(theme);
+    }
+
+    if (!html.classList.replace(...arg)) {
+      html.classList.add(theme);
+    }
+
+    if (!aside.classList.replace(...arg)) {
+      aside.classList.add(theme);
+    }
+
+    if (!sidenotes.classList.replace(...arg)) {
+      sidenotes.classList.add(theme);
+    }
+    if (footnotes && !footnotes.classList.replace(...arg)) {
+      footnotes.classList.add(theme);
+    }
+
+
+
+    if (!harr.classList.replace(...arg)) {
+      harr.classList.add(theme);
+    }
+
+    for (let link of links) {
+      if (!link.classList.replace(...arg)) {
+        link.classList.add(theme);
+      }
+    }
+    for (let table of tables) {
+      if (!table.classList.replace(...arg)) {
+        table.classList.add(theme);
+      }
+    }
+    for (let code of codes) {
+      if (!code.classList.replace(...arg)) {
+        code.classList.add(theme);
+      }
+    }
+    for (let like of likes) {
+      if (!like.classList.replace(...arg)) {
+        like.classList.add(theme);
+      }
+    }
+
+    for (const article of document.querySelectorAll('article')) {
+      if (!article.classList.replace(...arg)) {
+        article.classList.add(theme);
+      }
+    }
+
+    isDark = !isDark;
+    if (window.localStorage) {
+      window.localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    }
+  }
+
+  const sun = document.querySelector('.sun');
+  const moon = document.querySelector('.moon');
+
+  sun.addEventListener('click', toogleTheme);
+  moon.addEventListener('click', toogleTheme);
+
+  if (isDark) {
+    hid.classList.add('dark');
+  } else {
+    hid.classList.add('light');
+  }
+});