feat: add theme auto

dewanakl · Oct 15, 2024 · bc3beb5 · bc3beb5
1 parent 817cc02
commit bc3beb5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/dashboard.html b/dashboard.html
@@ -41,7 +41,9 @@
     <link rel="stylesheet" href="./css/dashboard.css">
 </head>
 
-<body data-url="https://api.ulems.my.id/">
+<!-- Data theme ['auto', 'dark', 'light'] -->
+
+<body data-url="https://api.ulems.my.id/" data-theme="auto">
 
     <!-- Nav bottom -->
     <nav class="navbar bg-light navbar-expand fixed-bottom rounded-top-4 border-top d-md-none d-lg-none d-xl-none p-0">

diff --git a/index.html b/index.html
@@ -68,8 +68,9 @@
 </head>
 
 <!-- If not using comments, you can remove the data-key and data-url attributes -->
+<!-- Data theme ['auto', 'dark', 'light'] -->
 
-<body data-key="bfb9cfea33ab7ae21a315fbd6f065a815d3e20ff2f007aa2ca" data-url="https://api.ulems.my.id/" style="overflow-y: hidden;">
+<body data-key="bfb9cfea33ab7ae21a315fbd6f065a815d3e20ff2f007aa2ca" data-url="https://api.ulems.my.id/" data-theme="auto" style="overflow-y: hidden;">
 
     <!-- Navbar Bottom -->
     <nav class="navbar bg-dark navbar-expand fixed-bottom rounded-top-4 border-top p-0" id="navbar-menu">

diff --git a/js/theme.js b/js/theme.js
@@ -5,6 +5,7 @@ export const theme = (() => {
     const THEME_DARK = 'dark';
     const THEME_LIGHT = 'light';
 
+    let isAuto = false;
     const theme = storage('theme');
 
     const onLight = () => {
@@ -132,6 +133,10 @@ export const theme = (() => {
     };
 
     const showButtonChangeTheme = () => {
+        if (!isAuto) {
+            return;
+        }
+
         document.getElementById('button-theme').style.display = 'block';
     };
 
@@ -144,6 +149,18 @@ export const theme = (() => {
             }
         }
 
+        switch (document.body.getAttribute('data-theme')) {
+            case 'dark':
+                theme.set('active', THEME_DARK);
+                break;
+            case 'light':
+                theme.set('active', THEME_LIGHT);
+                break;
+            default:
+                isAuto = true;
+                break;
+        }
+
         if (isDarkMode()) {
             onDark();
         } else {
@@ -153,6 +170,10 @@ export const theme = (() => {
         const toggle = document.getElementById('darkMode');
         if (toggle) {
             toggle.checked = isDarkMode();
+
+            if (!isAuto) {
+                toggle.parentElement.remove();
+            }
         }
     };