fix theme toggler

app/templates/base.html

@@ -15,7 +15,6 @@
     <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" />
     <!-- prettier-ignore -->
     <link href="{{ url_for('static', filename='css/quill.snow.css') }}" rel="stylesheet" />
-
     <script>
       // On page load or when changing themes, best to add inline in `head` to avoid FOUC
       if (

src/main.ts

@@ -4,6 +4,7 @@ import {initWallet} from './wallet';
 import {initQuill} from './initQuill';
 import {initQuillValueToInput} from './quillValueToInput';
 import {initComments} from './comment';
+import {initTheme} from './theme';
 
 initBooks();
 initContributors();
@@ -11,3 +12,4 @@ initQuill();
 initQuillValueToInput();
 initWallet();
 initComments();
+initTheme();

src/theme.ts

@@ -0,0 +1,60 @@
+export function initTheme() {
+  //# sourceMappingURL=flowbite.min.js.map
+  var themeToggleDarkIcons = document.querySelectorAll(
+    '#theme-toggle-dark-icon',
+  );
+  var themeToggleLightIcons = document.querySelectorAll(
+    '#theme-toggle-light-icon',
+  );
+
+  // Change the icons inside the button based on previous settings
+  if (
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!('color-theme' in localStorage) &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    themeToggleLightIcons.forEach(function (el) {
+      el.classList.remove('hidden');
+    });
+  } else {
+    themeToggleDarkIcons.forEach(function (el) {
+      el.classList.remove('hidden');
+    });
+  }
+
+  var themeToggleBtns = document.querySelectorAll('#theme-toggle');
+
+  themeToggleBtns.forEach(function (themeToggleBtn) {
+    themeToggleBtn.addEventListener('click', function () {
+      // toggle icons inside button
+      themeToggleDarkIcons.forEach(function (themeToggleDarkIcon) {
+        themeToggleDarkIcon.classList.toggle('hidden');
+      });
+
+      themeToggleLightIcons.forEach(function (themeToggleLightIcon) {
+        themeToggleLightIcon.classList.toggle('hidden');
+      });
+
+      // if set via local storage previously
+      if (localStorage.getItem('color-theme')) {
+        if (localStorage.getItem('color-theme') === 'light') {
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('color-theme', 'dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('color-theme', 'light');
+        }
+
+        // if NOT set via local storage previously
+      } else {
+        if (document.documentElement.classList.contains('dark')) {
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('color-theme', 'light');
+        } else {
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('color-theme', 'dark');
+        }
+      }
+    });
+  });
+}