Refactor theme management for better performance and small javascript code

internal/view/static/js/alpine-components/change-theme-button.js

@@ -3,20 +3,18 @@ export const changeThemeButton = {
   fn: () => ({
     theme: '',
 
-    getCurrentTheme () {
-      const el = document.querySelector('html')
-      const theme = el.getAttribute('data-theme')
-      if (theme) {
-        this.theme = theme
-        return
-      }
-      this.theme = 'system'
+    loadTheme () {
+      const theme = window.getTheme()
+      this.theme = theme || 'system'
+    },
+
+    setTheme (theme) {
+      window.setTheme(theme)
+      this.theme = theme || 'system'
     },
 
     init () {
-      setTimeout(() => {
-        this.getCurrentTheme()
-      }, 200)
+      this.loadTheme()
     }
   })
 }

internal/view/static/js/app.js

@@ -1,3 +1,4 @@
+import { initThemeHelper } from './init-theme-helper.js'
 import { initSweetAlert2 } from './init-sweetalert2.js'
 import { initNotyf } from './init-notyf.js'
 import { initHTMX } from './init-htmx.js'
@@ -5,6 +6,7 @@ import { initAlpineComponents } from './init-alpine-components.js'
 import { initHelpers } from './init-helpers.js'
 import { initDashboardAsideScroll } from './dashboard-aside-scroll.js'
 
+initThemeHelper()
 initSweetAlert2()
 initNotyf()
 initHTMX()

internal/view/static/js/init-theme-helper.js

@@ -0,0 +1,17 @@
+export function initThemeHelper () {
+  function getTheme () {
+    const theme = localStorage.getItem('theme')
+    return theme || ''
+  }
+
+  function setTheme (theme) {
+    localStorage.setItem('theme', theme)
+    document.documentElement.setAttribute('data-theme', theme)
+  }
+
+  window.getTheme = getTheme
+  window.setTheme = setTheme
+
+  const theme = getTheme()
+  setTheme(theme)
+}

internal/view/static/libs/theme-change/theme-change-2.0.2.min.js

@@ -1 +0,0 @@
-function themeToggle(){var toggleEl=document.querySelector("[data-toggle-theme]");(function(theme=localStorage.getItem("theme")){if(localStorage.getItem("theme")){document.documentElement.setAttribute("data-theme",theme);if(toggleEl){[...document.querySelectorAll("[data-toggle-theme]")].forEach(el=>{el.classList.add(toggleEl.getAttribute("data-act-class"))})}}})();if(toggleEl){[...document.querySelectorAll("[data-toggle-theme]")].forEach(el=>{el.addEventListener("click",function(){var themesList=el.getAttribute("data-toggle-theme");if(themesList){var themesArray=themesList.split(",");if(document.documentElement.getAttribute("data-theme")==themesArray[0]){if(themesArray.length==1){document.documentElement.removeAttribute("data-theme");localStorage.removeItem("theme")}else{document.documentElement.setAttribute("data-theme",themesArray[1]);localStorage.setItem("theme",themesArray[1])}}else{document.documentElement.setAttribute("data-theme",themesArray[0]);localStorage.setItem("theme",themesArray[0])}}[...document.querySelectorAll("[data-toggle-theme]")].forEach(el=>{el.classList.toggle(this.getAttribute("data-act-class"))})})})}}function themeBtn(){(function(theme=localStorage.getItem("theme")){if(theme!=undefined&&theme!=""){if(localStorage.getItem("theme")&&localStorage.getItem("theme")!=""){document.documentElement.setAttribute("data-theme",theme);var btnEl=document.querySelector("[data-set-theme='"+theme.toString()+"']");if(btnEl){[...document.querySelectorAll("[data-set-theme]")].forEach(el=>{el.classList.remove(el.getAttribute("data-act-class"))});if(btnEl.getAttribute("data-act-class")){btnEl.classList.add(btnEl.getAttribute("data-act-class"))}}}else{var btnEl=document.querySelector("[data-set-theme='']");if(btnEl.getAttribute("data-act-class")){btnEl.classList.add(btnEl.getAttribute("data-act-class"))}}}})();[...document.querySelectorAll("[data-set-theme]")].forEach(el=>{el.addEventListener("click",function(){document.documentElement.setAttribute("data-theme",this.getAttribute("data-set-theme"));localStorage.setItem("theme",document.documentElement.getAttribute("data-theme"));[...document.querySelectorAll("[data-set-theme]")].forEach(el=>{el.classList.remove(el.getAttribute("data-act-class"))});if(el.getAttribute("data-act-class")){el.classList.add(el.getAttribute("data-act-class"))}})})}function themeSelect(){(function(theme=localStorage.getItem("theme")){if(localStorage.getItem("theme")){document.documentElement.setAttribute("data-theme",theme);var optionToggler=document.querySelector("select[data-choose-theme] [value='"+theme.toString()+"']");if(optionToggler){[...document.querySelectorAll("select[data-choose-theme] [value='"+theme.toString()+"']")].forEach(el=>{el.selected=true})}}})();if(document.querySelector("select[data-choose-theme]")){[...document.querySelectorAll("select[data-choose-theme]")].forEach(el=>{el.addEventListener("change",function(){document.documentElement.setAttribute("data-theme",this.value);localStorage.setItem("theme",document.documentElement.getAttribute("data-theme"));[...document.querySelectorAll("select[data-choose-theme] [value='"+localStorage.getItem("theme")+"']")].forEach(el=>{el.selected=true})})})}}function themeChange(attach=true){if(attach===true){document.addEventListener("DOMContentLoaded",function(event){themeToggle();themeSelect();themeBtn()})}else{themeToggle();themeSelect();themeBtn()}}if(typeof exports!="undefined"){module.exports={themeChange:themeChange}}else{themeChange()}

internal/view/web/component/change_theme_button.go

@@ -18,8 +18,6 @@ func ChangeThemeButton(params ChangeThemeButtonParams) gomponents.Node {
 	return html.Div(
 		alpine.XData("changeThemeButton"),
 		alpine.XCloak(),
-		alpine.XOn("click", "getCurrentTheme()"),
-		alpine.XOn("click.outside", "getCurrentTheme()"),
 
 		components.Classes{
 			"dropdown":        true,
@@ -58,7 +56,7 @@ func ChangeThemeButton(params ChangeThemeButtonParams) gomponents.Node {
 			},
 			html.Li(
 				html.Button(
-					html.Data("set-theme", ""),
+					alpine.XOn("click", "setTheme('')"),
 					html.Class("btn btn-neutral btn-block"),
 					html.Type("button"),
 					lucide.Laptop(html.Class("mr-1")),
@@ -67,7 +65,7 @@ func ChangeThemeButton(params ChangeThemeButtonParams) gomponents.Node {
 			),
 			html.Li(
 				html.Button(
-					html.Data("set-theme", "light"),
+					alpine.XOn("click", "setTheme('light')"),
 					html.Class("btn btn-neutral btn-block"),
 					html.Type("button"),
 					lucide.Sun(html.Class("mr-1")),
@@ -76,7 +74,7 @@ func ChangeThemeButton(params ChangeThemeButtonParams) gomponents.Node {
 			),
 			html.Li(
 				html.Button(
-					html.Data("set-theme", "dark"),
+					alpine.XOn("click", "setTheme('dark')"),
 					html.Class("btn btn-neutral btn-block"),
 					html.Type("button"),
 					lucide.Moon(html.Class("mr-1")),

internal/view/web/layout/common.go

@@ -22,7 +22,6 @@ func head() gomponents.Node {
 
 		html.Script(src("/libs/htmx/htmx-2.0.1.min.js"), html.Defer()),
 		html.Script(src("/libs/alpinejs/alpinejs-3.14.1.min.js"), html.Defer()),
-		html.Script(src("/libs/theme-change/theme-change-2.0.2.min.js")),
 		html.Script(src("/libs/sweetalert2/sweetalert2-11.13.1.min.js")),
 		html.Script(src("/libs/chartjs/chartjs-4.4.3.umd.min.js")),