add dark mode functionality with toggle switch; update CSS for dark mode styles

Author: marioserrano09

sources/src/main/resources/web/templates/dynamical/static/css/dynamical.css

@@ -200,7 +200,7 @@ li.title-menu a span {
         --bs-modal-border-width: var(--bs-border-width);
         --bs-modal-border-radius: var(--bs-border-radius-lg);
         --bs-modal-box-shadow: var(--bs-box-shadow-sm);
-        --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) -(var(--bs-border-width)));
+        --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
         --bs-modal-header-padding-x: 1rem;
         --bs-modal-header-padding-y: 1rem;
         --bs-modal-header-padding: 1rem 1rem;
@@ -313,6 +313,13 @@ input[type=checkbox] {
     text-align: center;
 }
 
+.dark-mode .actiontb-a.z-toolbarbutton {
+    background: var(--dt-background-dark-hover);
+    height: 30px !important;
+    min-width: 30px;
+    text-align: center;
+}
+
 .actiontb-a.btn {
     padding: 2px 7px;
     height: 30px;
@@ -703,7 +710,30 @@ input[type=checkbox] {
     border-color: transparent;
 }
 
+
+
 .z-listheader-content,
 .z-treecol-content {
     color: #2d3238;
 }
+
+body.dark-mode img[src="/static/dynamia-tools/images/no-photo.jpg"] {
+    filter: brightness(0.7) invert(1);
+}
+
+.dark-mode .z-listbox-footer .z-listfooter {
+    background: var(--dt-background-dark);
+    border-color: transparent;
+}
+
+.dark-mode .dark-mode-switch .dark-icon {
+    display: none;
+}
+
+.dark-mode-switch .light-icon{
+    display: none;
+}
+
+.dark-mode .dark-mode-switch .light-icon{
+    display: inline;
+}

sources/src/main/resources/web/templates/dynamical/static/js/dark-mode.js

@@ -0,0 +1,48 @@
+function initDarkMode(toggleSelector) {
+    const body = document.body;
+    const toggleBtn = document.querySelector(toggleSelector);
+
+    // Función para aplicar modo según preferencia
+    function applyTheme(theme) {
+        if (theme === "dark") {
+            body.classList.add("dark-mode");
+            body.classList.remove("light-mode");
+        } else {
+            body.classList.add("light-mode");
+            body.classList.remove("dark-mode");
+        }
+        localStorage.setItem("theme", theme);
+    }
+
+    // Inicializar: leer localStorage o usar default "light"
+    const savedTheme = localStorage.getItem("theme") || "light";
+    applyTheme(savedTheme);
+
+    // Toggle al dar clic
+    toggleBtn.addEventListener("click", () => {
+        const newTheme = body.classList.contains("dark-mode") ? "light" : "dark";
+        applyTheme(newTheme);
+    });
+}
+
+function detectDevice() {
+    const body = document.body;
+    body.classList.remove("device-smartphone", "device-tablet", "device-desktop");
+
+    const width = window.innerWidth;
+
+    if (width <= 767) {
+        body.classList.add("device-smartphone");
+    } else if (width <= 1024) {
+        body.classList.add("device-tablet");
+    } else {
+        body.classList.add("device-desktop");
+    }
+}
+
+
+zk.afterMount(function () {
+    initDarkMode(".dark-mode-switch");
+    detectDevice();
+    window.addEventListener("resize", detectDevice);
+});

sources/src/main/resources/web/templates/dynamical/views/index.zul

@@ -46,6 +46,7 @@
 <?script src="${contextPath}/static/js/bootstrap.min.js?v=5.4.12"?>
 <?script src="${contextPath}/static/js/adminlte.min.js?v=5.4.12"?>
 <?script src="${contextPath}/static/js/dynamical.js?v=5.4.12"?>
+<?script src="${contextPath}/static/js/dark-mode.js?v=5.4.12"?>
 
 <zk >
     <import src="classpath:/zk/dynamical/index-main.zul"/>

sources/src/main/resources/zk/dynamical/index-main.zul

@@ -35,6 +35,12 @@
                         </li>
                     </z:zk>
 
+                    <li class="nav-item">
+                        <a class="nav-link dark-mode-switch" href="#">
+                            <i class="fa fa-moon dark-icon"/>
+                            <i class="fa fa-sun light-icon"/>
+                        </a>
+                    </li>
 
                     <li class="nav-item">
                         <a class="nav-link" data-lte-toggle="fullscreen" href="#">
@@ -46,7 +52,8 @@
                     <!-- User Account: style can be found in dropdown.less -->
                     <z:zk if="${userInfo.enabled}">
                         <li class="nav-item dropdown user-menu">
-                            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+                               aria-expanded="false">
                                 <img src="${userInfo.image}" class="user-image shadow"/>
                                 <span class="d-none d-md-inline">${userInfo.fullName}</span>
                             </a>
@@ -66,7 +73,7 @@
                                 <li class="user-footer">
                                     <div class="pull-left">
                                         <z:a zclass="btn btn-primary btn-flat" label=" ${labels.profile}"
-                                             iconSclass="fa fa-user"
+                                             iconSclass="fa fa-user" if="${userInfo.profilePath != null}"
                                              onClick='navManager.navigateTo(userInfo.profilePath)'/>
 
                                     </div>