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 %} - + + +