From bc3beb54e8e02c7e811de6a30ef5790d8555e03d Mon Sep 17 00:00:00 2001
From: dewanakl <dewanakretarta29@gmail.com>
Date: Tue, 15 Oct 2024 16:59:40 +0700
Subject: [PATCH] feat: add theme auto

---
 dashboard.html |  4 +++-
 index.html     |  3 ++-
 js/theme.js    | 21 +++++++++++++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/dashboard.html b/dashboard.html
index 23feba6..916e40b 100644
--- 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
index c32a66c..129f374 100644
--- 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
index c4a761c..9cd20ac 100644
--- 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();
+            }
         }
     };
 
