From 8923c99f7a389ce4c030f86af2e69cdd12dd466a Mon Sep 17 00:00:00 2001 From: chrisnov-it Date: Tue, 23 Jun 2026 13:06:56 +0800 Subject: [PATCH] Add dark mode support with persistent toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Tailwind CDN configured with darkMode: 'class' - Dark mode toggle in header (sun/moon icon), persisted via localStorage - base.html: sidebar, header, search, nav, profile — all dark: variants - index.html: stat cards, chart containers, activities, bot list — all dark: variants - style.css: dark scrollbar styling - Prevents flash by checking localStorage before page render Co-Authored-By: Claude --- static/css/style.css | 8 ++++- static/js/main.js | 20 ++++++++++++ templates/base.html | 76 ++++++++++++++++++++++++++------------------ templates/index.html | 48 ++++++++++++++-------------- 4 files changed, 96 insertions(+), 56 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index f41fb6a..dd45f10 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,4 +1,10 @@ .sidebar { transition: all 0.3s ease; } .sidebar.collapsed { width: 70px; } .sidebar.collapsed .sidebar-text, .sidebar.collapsed .logo-text { display: none; } - .sidebar.collapsed .nav-item { justify-content: center; } \ No newline at end of file + .sidebar.collapsed .nav-item { justify-content: center; } + .sidebar.collapsed .nav-item i.w-5 { width: auto; } + + /* Dark mode scrollbar */ + .dark .overflow-auto::-webkit-scrollbar { width: 6px; } + .dark .overflow-auto::-webkit-scrollbar-track { background: #1e293b; } + .dark .overflow-auto::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; } \ No newline at end of file diff --git a/static/js/main.js b/static/js/main.js index e85aac0..d1c21fb 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,5 +1,25 @@ // static/js/main.js +// --- Dark Mode Toggle --- +(function initDarkMode() { + const isDark = localStorage.getItem('dark-mode') === 'true'; + const toggle = document.getElementById('dark-mode-toggle'); + const icon = document.getElementById('dark-mode-icon'); + + if (toggle && icon) { + // Set initial icon + icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon'; + icon.style.color = isDark ? '#fbbf24' : ''; + + toggle.addEventListener('click', function() { + const isCurrentlyDark = document.documentElement.classList.toggle('dark'); + localStorage.setItem('dark-mode', isCurrentlyDark); + icon.className = isCurrentlyDark ? 'fas fa-sun' : 'fas fa-moon'; + icon.style.color = isCurrentlyDark ? '#fbbf24' : ''; + }); + } +})(); + document.addEventListener('DOMContentLoaded', function() { // --- Logika untuk Sidebar Toggle --- const sidebarToggle = document.getElementById('sidebar-toggle'); diff --git a/templates/base.html b/templates/base.html index 5119cb5..7103fb9 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,6 +5,11 @@ {% block title %}Dashboard{% endblock %} - QuantumBotX + @@ -13,7 +18,13 @@ {% block head_extra %}{% endblock %} - + + +