update admin light/dark mode

2026-06-13 00:31:36 +07:00
parent 2c123f5af2
commit 1c96173d55
28 changed files with 2703 additions and 775 deletions
@@ -5,6 +5,32 @@
 <div class="toast-container" id="toastContainer"></div>

 <script>
+// ── Theme toggle ──
+(function() {
+    const html = document.documentElement;
+    const saved = localStorage.getItem('portal-theme') || 'dark';
+    setUserTheme(saved);
+    document.addEventListener('DOMContentLoaded', function() {
+        const btn  = document.getElementById('userThemeToggle');
+        const icon = document.getElementById('userThemeIcon');
+        if (!btn) return;
+        btn.addEventListener('click', () => {
+            const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+            setUserTheme(next);
+            localStorage.setItem('portal-theme', next);
+        });
+        function updateIcon() {
+            if (icon) icon.className = html.getAttribute('data-theme') === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+        }
+        updateIcon();
+    });
+    function setUserTheme(t) {
+        html.setAttribute('data-theme', t);
+        const icon = document.getElementById('userThemeIcon');
+        if (icon) icon.className = t === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+    }
+})();
+
 // ── Clock ──
 function updateClock() {
    const now = new Date();
@@ -1,4 +1,4 @@
-<?php
+<?php
 /**
 * User Layout — sidebar + topbar (read-only mode, beda style dari admin)
 * Variables expected from parent: $pageTitle, $activeNav
@@ -7,7 +7,7 @@ $user = currentUser();
 $initial = strtoupper(substr($user['nama_lengkap'] ?: $user['username'], 0, 1));
 ?>
 <!DOCTYPE html>
-<html lang="id">
+<html lang="id" data-theme="dark">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -80,6 +80,12 @@ $initial = strtoupper(substr($user['nama_lengkap'] ?: $user['username'], 0, 1));
            <span class="badge badge-success" style="font-size:0.7rem;padding:5px 10px;">
                <i class="fas fa-eye"></i> Mode Baca
            </span>
+            <button class="btn btn-ghost btn-sm" id="userThemeToggle" title="Toggle tema" aria-label="Toggle dark/light mode" style="padding:8px 10px;">
+                <i class="fas fa-moon" id="userThemeIcon"></i>
+            </button>
+            <a href="<?= app_url('../portal.html') ?>" class="btn btn-ghost btn-sm" title="Kembali ke Portal WebGIS">
+                <i class="fas fa-home"></i> Portal
+            </a>
        </div>
    </div>
    <div class="admin-content">