theme changing fixes

Author: DogukanUrker

static/standardUI/js/changeTheme.js

@@ -1,28 +1,30 @@
 var root = document.querySelector(":root");
 var changeTheme = document.querySelector(".changeTheme");
 
-var theme = localStorage.setItem("theme", "dark");
+var theme;
 
-if (localStorage.getItem(theme) === "dark") {
+if (localStorage.getItem("theme") === "dark") {
   toDark();
-} else if (localStorage.getItem(theme) === "light") {
+} else if (localStorage.getItem("theme") === "light") {
   toLight();
+} else if (localStorage.getItem("theme") === null) {
+  toDark();
 }
 
 function toLight() {
-  localStorage.setItem(theme, "light");
+  localStorage.setItem("theme", "light");
   root.style.setProperty("--themePrimary", "#000");
   root.style.setProperty("--themeSecondary", "#fff");
   root.style.setProperty("--themeHelper", "#303030");
-  changeTheme.innerHTML = '<i class="ti ti-moon"></i>';
+  changeTheme.innerHTML = '<i class="ti ti-sun"></i>';
   changeTheme.setAttribute("onclick", "javascript: toDark();");
 }
 
 function toDark() {
-  localStorage.setItem(theme, "dark");
+  localStorage.setItem("theme", "dark");
   root.style.setProperty("--themePrimary", "#fff");
   root.style.setProperty("--themeSecondary", "#000");
   root.style.setProperty("--themeHelper", "#C6C6C6");
-  changeTheme.innerHTML = '<i class="ti ti-sun"></i>';
+  changeTheme.innerHTML = '<i class="ti ti-moon"></i>';
   changeTheme.setAttribute("onclick", "javascript: toLight();");
 }

static/tailwindUI/js/changeTheme.js

@@ -1,26 +1,59 @@
 var body = document.querySelector("#body");
 var changeTheme = document.querySelector(".changeTheme");
 
-var theme = localStorage.setItem("theme", "dark");
+var theme;
 
-if (localStorage.getItem(theme) === "dark") {
+if (localStorage.getItem("theme") === "dark") {
   toDark();
-} else if (localStorage.getItem(theme) === "light") {
+} else if (localStorage.getItem("theme") === "light") {
   toLight();
+} else if (localStorage.getItem("theme") === null) {
+  toDark();
 }
-
+/**
+ * Changes the theme of the website to light mode.
+ * @function
+ */
 function toLight() {
+  "use strict";
+
+  // Set the theme in local storage
   localStorage.setItem("theme", "light");
-  body.className =
-    "text-neutral-100 bg-neutral-900 selection:bg-neutral-800 selection:text-rose-500";
-  changeTheme.innerHTML = '<i class="ti ti-moon"></i>';
-  changeTheme.setAttribute("onclick", "javascript: toDark();");
+
+  // Update the CSS class of the body element
+  document.body.className =
+    "text-neutral-900 bg-neutral-100 selection:bg-neutral-800 selection:text-rose-500";
+
+  // Update the HTML content of the button
+  document.querySelector(".changeTheme").innerHTML =
+    '<i class="ti ti-sun"></i>';
+
+  // Update the onclick event of the button
+  document
+    .querySelector(".changeTheme")
+    .setAttribute("onclick", "javascript: toDark();");
 }
 
+/**
+ * Changes the theme of the website to dark mode.
+ * @function
+ */
 function toDark() {
+  "use strict";
+
+  // Set the theme in local storage
   localStorage.setItem("theme", "dark");
-  body.className =
-    "text-neutral-900 bg-neutral-100 selection:bg-neutral-200 selection:text-rose-500";
-  changeTheme.innerHTML = '<i class="ti ti-sun"></i>';
-  changeTheme.setAttribute("onclick", "javascript: toLight();");
+
+  // Update the CSS class of the body element
+  document.body.className =
+    "text-neutral-100 bg-neutral-900 selection:bg-neutral-800 selection:text-rose-500";
+
+  // Update the HTML content of the button
+  document.querySelector(".changeTheme").innerHTML =
+    '<i class="ti ti-moon"></i>';
+
+  // Update the onclick event of the button
+  document
+    .querySelector(".changeTheme")
+    .setAttribute("onclick", "javascript: toLight();");
 }

templates/standardUI/changeTheme.html

@@ -3,8 +3,6 @@
   href="{{ url_for('static', filename='css/changeTheme.css') }}"
 />
 <section class="changeThemeContainer">
-  <button class="changeTheme btn" onclick="toLight()">
-    <i class="ti ti-sun"></i>
-  </button>
+  <button class="changeTheme btn" onclick="toDark()"></button>
   <script src="{{ url_for('static', filename='js/changeTheme.js') }}"></script>
 </section>

templates/tailwindUI/changeTheme.html

@@ -1,9 +1,7 @@
 <section>
   <button
     class="changeTheme absolute top-2 right-2 text-2xl hover:scale-125 duration-150"
-    onclick="toLight()"
-  >
-    <i class="ti ti-sun"></i>
-  </button>
+    onclick="toDark()"
+  ></button>
   <script src="{{ url_for('static', filename='js/changeTheme.js') }}"></script>
 </section>