fix theming issues

cbrosius · Dec 23, 2024 · 699644c · 699644c
1 parent 9967477
commit 699644c
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 91 deletions.
diff --git a/data/settings.json b/data/settings.json
@@ -9,7 +9,7 @@
     ]
   },
   "general_cert_options": {
-    "country": "germany",
+    "country": "german",
     "location": "VW",
     "organization": "HomeLAB",
     "organization_unit": "private",

diff --git a/static/script.js b/static/script.js
@@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', function() {
     if (themeSwitch) {
         themeSwitch.addEventListener('click', function(e) {
             e.preventDefault();
-            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const currentTheme = document.documentElement.getAttribute('theme');
             const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
             applyTheme(newTheme);
         });
@@ -63,32 +63,42 @@ function recreateHomelabCert() {
     }
 }
 
-function applyTheme(theme) {
-    // Validate theme value
-    const validThemes = ['light', 'dark'];
-    if (!validThemes.includes(theme)) {
-        theme = 'light'; // Default to light if invalid
-    }
-
-    // Apply theme to document
-    document.documentElement.setAttribute('data-theme', theme);
-    document.body.setAttribute('data-theme', theme);
-    localStorage.setItem('theme', theme);
-
-    // Update theme switch icon if it exists
-    const themeSwitch = document.getElementById('theme-switch');
-    if (themeSwitch) {
-        const icon = themeSwitch.querySelector('i');
-        if (icon) {
-            icon.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode';
+function applyTheme(theme){
+    // Change Theme Setting with a Switch
+    const currentTheme = localStorage.getItem('theme');
+    const switchElem = document.querySelector('#theme-switch');
+
+    const setTheme = (isDark) => {
+        if (isDark) {
+            switchElem.classList.add('is-dark');
+            switchElem.querySelector('i').innerText = 'light_mode';
+            switchElem.title = 'Switch to light mode';
+        }
+        else {
+            switchElem.classList.remove('is-dark');
+            switchElem.querySelector('i').innerText = 'dark_mode';
+            switchElem.title = 'Switch to dark mode';
         }
     }
-
-    // Force reload styles
-    document.body.style.display = 'none';
-    document.body.offsetHeight; // Trigger reflow
-    document.body.style.display = '';
 
-    // Update Materialize components
-    M.updateTextFields();
-}
+    if (switchElem) {
+        // Load
+        if (currentTheme) setTheme(true);
+        // Change
+        switchElem.addEventListener('click', e => {
+            e.preventDefault();
+            if (!switchElem.classList.contains('is-dark')) {
+            // Dark Theme
+            document.documentElement.setAttribute('theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+            setTheme(true);
+            }
+            else {
+            // Light Theme
+            document.documentElement.removeAttribute('theme');
+            localStorage.removeItem('theme');
+            setTheme(false);
+            }
+        });
+    }
+}
diff --git a/static/styles.css b/static/styles.css
@@ -16,7 +16,7 @@
 }
 
 /* Dark theme */
-[data-theme='dark'] {
+[theme='dark'] {
     --background-color: #121212;
     --surface-color: #242424;
     --nav-color: #1a1a1a;
@@ -156,25 +156,25 @@ nav a {
 }
 
 /* Modal styling for dark theme */
-[data-theme='dark'] .modal {
+[theme='dark'] .modal {
     background-color: var(--surface-color);
     color: var(--font-color-main);
 }
 
-[data-theme='dark'] .modal .modal-footer {
+[theme='dark'] .modal .modal-footer {
     background-color: var(--surface-color);
 }
 
-[data-theme='dark'] .modal-close {
+[theme='dark'] .modal-close {
     color: var(--font-color-main);
 }
 
 /* Card styling for dark theme */
-[data-theme='dark'] .card {
+[theme='dark'] .card {
     background-color: var(--surface-color);
 }
 
-[data-theme='dark'] .card-title {
+[theme='dark'] .card-title {
     color: var(--font-color-main);
 }
 

diff --git a/templates/cert_list.html b/templates/cert_list.html
@@ -90,11 +90,11 @@
         }
         // Initialize theme before page load
         const theme = localStorage.getItem('theme') || 'light';
-        document.documentElement.setAttribute('data-theme', theme);
-        document.body.setAttribute('data-theme', theme);
+        document.documentElement.setAttribute('theme', theme);
+        // document.body.setAttribute('theme', theme);
     </script>
 </head>
-<body class="{{.theme}}" data-theme="{{.theme}}">
+<body class="{{.theme}}" theme="{{.theme}}">
     <div class="certificate-page">
         {{ template "header.html" . }}
         <div class="container">
@@ -289,17 +289,10 @@ <h1 class="center-align">Certificates</h1>
         </div>
     </div>
 
-    <!-- Materialize JavaScript -->
-    <script src="/static/materialize/materialize.js"></script>
-    <!-- Custom JavaScript -->
-    <script src="/static/script.js"></script>
-    <script>
+<script>
         M.AutoInit();
 
         document.addEventListener('DOMContentLoaded', function() {
-            // Initialize Materialize components
-            // M.updateTextFields();
-
             // Initialize theme
             const currentTheme = localStorage.getItem('theme') || 'light';
             applyTheme(currentTheme);
@@ -416,5 +409,9 @@ <h1 class="center-align">Certificates</h1>
 
 
 </script>
+    <!-- Materialize JavaScript -->
+    <script src="/static/materialize/materialize.js"></script>
+    <!-- Custom JavaScript -->
+    <script src="/static/script.js"></script>
 </body>
 </html>
diff --git a/templates/create_certificate.html b/templates/create_certificate.html
@@ -5,7 +5,7 @@
     <title>Create Certificate</title>
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     <!-- Materialize CSS -->
-    <link rel="stylesheet" href="/static/materialize/materialize.css"
+    <link rel="stylesheet" href="/static/materialize/materialize.css">
     <!-- Material Icons -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Custom CSS -->

diff --git a/templates/howto.html b/templates/howto.html
@@ -5,19 +5,17 @@
     <title>How-To Guides</title>
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     <!-- Materialize CSS -->
-    <link rel="stylesheet" href="/static/materialize/materialize.css"
+    <link rel="stylesheet" href="/static/materialize/materialize.css">
     <!-- Material Icons -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="/static/styles.css">
     <script>
-        // Initialize theme before page load
-        const theme = localStorage.getItem('theme') || 'light';
-        document.documentElement.setAttribute('data-theme', theme);
-        document.body.setAttribute('data-theme', theme);
-    </script>
+        const theme = localStorage.getItem('theme');
+        if (theme) document.documentElement.setAttribute('theme', theme);
+      </script>
 </head>
-<body class="{{.theme}}" data-theme="{{.theme}}">
+<body class="{{.theme}}" theme="{{.theme}}">
     {{ template "header.html" . }}
     <div class="container">
         <h1>How-To Guides</h1>
@@ -77,20 +75,9 @@ <h2>Managing Certificates</h2>
             </div>
         </div>
     </div>
-
     <!-- Materialize JavaScript -->
     <script src="/static/materialize/materialize.js"></script>
     <!-- Custom JavaScript -->
     <script src="/static/script.js"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Initialize Materialize components
-            // M.updateTextFields();
-
-            // Initialize theme
-            const currentTheme = localStorage.getItem('theme') || 'light';
-            applyTheme(currentTheme);
-        });
-    </script>
 </body>
 </html> 
diff --git a/templates/index.html b/templates/index.html
@@ -5,16 +5,15 @@
     <title>HomeLab Certificate Manager</title>
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     <!-- Materialize CSS -->
-    <link rel="stylesheet" href="/static/materialize/materialize.css"
+    <link rel="stylesheet" href="/static/materialize/materialize.css">
     <!-- Material Icons -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="/static/styles.css">
     <script>
         // Initialize theme before page load
         const theme = localStorage.getItem('theme') || 'light';
-        document.documentElement.setAttribute('data-theme', theme);
-        document.body.setAttribute('data-theme', theme);
+        document.documentElement.setAttribute('theme', theme);
     </script>
     <style>
         .container {
@@ -44,7 +43,7 @@
         }
     </style>
 </head>
-<body class="{{.theme}}" data-theme="{{.theme}}">
+<body class="{{.theme}}" theme="{{.theme}}">
     {{ template "header.html" . }}
     <div class="container">
         <h1>HomeLab Certificate Manager</h1>
@@ -136,9 +135,6 @@ <h1>HomeLab Certificate Manager</h1>
     <script src="/static/script.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // Initialize Materialize components
-            // M.updateTextFields();
-
             // Initialize theme
             const currentTheme = localStorage.getItem('theme') || 'light';
             applyTheme(currentTheme);
@@ -149,7 +145,6 @@ <h1>HomeLab Certificate Manager</h1>
             fields.forEach(id => {
                 document.getElementById(id).value = '';
             });
-            // M.updateTextFields();
         }
 
         function prefillForm() {
@@ -167,7 +162,6 @@ <h1>HomeLab Certificate Manager</h1>
             Object.keys(defaultValues).forEach(id => {
                 document.getElementById(id).value = defaultValues[id];
             });
-            // M.updateTextFields();
         }
     </script>
 </body>

diff --git a/templates/login.html b/templates/login.html
@@ -5,16 +5,16 @@
     <title>Login - HomeLab Certificate Manager</title>
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     <!-- Materialize CSS -->
-    <link rel="stylesheet" href="/static/materialize/materialize.css"
+    <link rel="stylesheet" href="/static/materialize/materialize.css">
     <!-- Material Icons -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="/static/styles.css">
     <script>
         // Initialize theme before page load
         const theme = localStorage.getItem('theme') || 'light';
-        document.documentElement.setAttribute('data-theme', theme);
-        document.body.setAttribute('data-theme', theme);
+        document.documentElement.setAttribute('theme', theme);
+        // document.body.setAttribute('theme', theme);
     </script>
 </head>
 <body>

diff --git a/templates/settings.html b/templates/settings.html
@@ -5,19 +5,17 @@
     <title>Settings</title>
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     <!-- Materialize CSS -->
-    <link rel="stylesheet" href="/static/materialize/materialize.css"
+    <link rel="stylesheet" href="/static/materialize/materialize.css">
     <!-- Material Icons -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <!-- Custom CSS -->
+    <!-- Custom CSS and Theme Settings -->
     <link rel="stylesheet" href="/static/styles.css">
     <script>
-        // Initialize theme before page load
-        const theme = localStorage.getItem('theme') || 'light';
-        document.documentElement.setAttribute('data-theme', theme);
-        // document.body.setAttribute('data-theme', theme);
-    </script>
+        const theme = localStorage.getItem('theme');
+        if (theme) document.documentElement.setAttribute('theme', theme);
+      </script>
 </head>
-<body class="{{.theme}}" data-theme="{{.theme}}">
+<body class="{{.theme}}" theme="{{.theme}}">
     {{ template "header.html" . }}
     <div class="container">
         <h1 class="center-align">Settings</h1>
@@ -117,10 +115,6 @@ <h6>IP Address(es) of the Certificate Manager</h6>
         </div>
     </div>
 
-    <!-- Materialize JavaScript -->
-    <script src="/static/materialize/materialize.js"></script>
-    <!-- Custom JavaScript -->
-    <script src="/static/script.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // Initialize Materialize components
@@ -270,9 +264,13 @@ <h6>IP Address(es) of the Certificate Manager</h6>
             });
         }
 
-        document.addEventListener('DOMContentLoaded', function() {
-            // M.updateTextFields();
-        });
+        // document.addEventListener('DOMContentLoaded', function() {
+        //     M.updateTextFields();
+        // });
     </script>
+    <!-- Materialize JavaScript -->
+    <script src="/static/materialize/materialize.js"></script>
+    <!-- Custom JavaScript -->
+    <script src="/static/script.js"></script>
 </body>
 </html>