Add admin theme toggle

src/vk_parser_app/templates/base.html

@@ -11,6 +11,13 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
+  <script>
+    (function() {
+      const theme = localStorage.getItem('admin-theme') || 'dark';
+      document.documentElement.classList.toggle('dark', theme !== 'light');
+    })();
+  </script>
+  
   <!-- Tailwind CSS via CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
@@ -24,21 +31,21 @@
           },
           colors: {
             app: {
-              bg: '#0F172A',         // slate-900 (Main Background)
-              surface: '#1E293B',    // slate-800 (Cards, Sidebar)
-              surfaceHover: '#334155', // slate-700
-              border: '#334155',     // slate-700
-              borderFocus: '#475569',// slate-600
-              primary: '#3B82F6',    // blue-500
-              primaryHover: '#2563EB',// blue-600
-              textMain: '#F8FAFC',   // slate-50
-              textMuted: '#94A3B8',  // slate-400
-              success: '#10B981',    // emerald-500
-              successBg: 'rgba(16, 185, 129, 0.1)',
-              warning: '#F59E0B',    // amber-500
-              warningBg: 'rgba(245, 158, 11, 0.1)',
-              error: '#EF4444',      // red-500
-              errorBg: 'rgba(239, 68, 68, 0.1)',
+              bg: 'var(--app-bg)',
+              surface: 'var(--app-surface)',
+              surfaceHover: 'var(--app-surface-hover)',
+              border: 'var(--app-border)',
+              borderFocus: 'var(--app-border-focus)',
+              primary: 'var(--app-primary)',
+              primaryHover: 'var(--app-primary-hover)',
+              textMain: 'var(--app-text-main)',
+              textMuted: 'var(--app-text-muted)',
+              success: 'var(--app-success)',
+              successBg: 'var(--app-success-bg)',
+              warning: 'var(--app-warning)',
+              warningBg: 'var(--app-warning-bg)',
+              error: 'var(--app-error)',
+              errorBg: 'var(--app-error-bg)',
             }
           },
           boxShadow: {
@@ -56,6 +63,44 @@
   <!-- Lucide Icons -->
   <script src="https://unpkg.com/lucide@latest"></script>
 
+  <style>
+    :root {
+      --app-bg: #F8FAFC;
+      --app-surface: #FFFFFF;
+      --app-surface-hover: #E2E8F0;
+      --app-border: #CBD5E1;
+      --app-border-focus: #94A3B8;
+      --app-primary: #2563EB;
+      --app-primary-hover: #1D4ED8;
+      --app-text-main: #0F172A;
+      --app-text-muted: #64748B;
+      --app-success: #059669;
+      --app-success-bg: rgba(5, 150, 105, 0.1);
+      --app-warning: #D97706;
+      --app-warning-bg: rgba(217, 119, 6, 0.1);
+      --app-error: #DC2626;
+      --app-error-bg: rgba(220, 38, 38, 0.1);
+    }
+    .dark {
+      --app-bg: #0F172A;
+      --app-surface: #1E293B;
+      --app-surface-hover: #334155;
+      --app-border: #334155;
+      --app-border-focus: #475569;
+      --app-primary: #3B82F6;
+      --app-primary-hover: #2563EB;
+      --app-text-main: #F8FAFC;
+      --app-text-muted: #94A3B8;
+      --app-success: #10B981;
+      --app-success-bg: rgba(16, 185, 129, 0.1);
+      --app-warning: #F59E0B;
+      --app-warning-bg: rgba(245, 158, 11, 0.1);
+      --app-error: #EF4444;
+      --app-error-bg: rgba(239, 68, 68, 0.1);
+    }
+    :root:not(.dark) .text-white { color: var(--app-text-main) !important; }
+  </style>
+
   <style type="text/tailwindcss">
     @layer components {
       /* Form inputs */
@@ -200,6 +245,10 @@
     </nav>
 
     <div class="p-4 border-t border-app-border">
+      <button type="button" title="Переключить тему" class="w-full flex items-center justify-center gap-2 px-3 py-2 mb-2 rounded-lg text-sm font-medium text-app-textMuted hover:text-app-textMain hover:bg-app-surfaceHover transition-colors" onclick="toggleTheme()">
+        <i data-lucide="sun-moon" class="w-4 h-4"></i>
+        <span x-show="expanded" x-cloak>Тема</span>
+      </button>
       <div class="flex items-center gap-3 px-3 py-2 mb-2" :class="expanded ? '' : 'justify-center'">
         <div class="w-8 h-8 rounded-full bg-app-primary/20 flex items-center justify-center text-app-primary font-bold text-sm flex-shrink-0">
           {{ user.login[0]|upper }}
@@ -224,10 +273,15 @@
     <div class="flex items-center gap-2 font-bold text-app-textMain">
       {{ app_title or "Редакторская" }}
     </div>
+    <div class="flex items-center gap-1">
+      <button class="btn btn-ghost btn-icon" type="button" onclick="toggleTheme()" title="Тема">
+        <i data-lucide="sun-moon" class="w-5 h-5"></i>
+      </button>
       <button class="btn btn-ghost btn-icon" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
         <i data-lucide="menu" class="w-6 h-6"></i>
       </button>
     </div>
+  </div>
 
   <!-- Mobile Menu Dropdown -->
   <div id="mobile-menu" class="hidden md:hidden fixed top-16 left-0 right-0 bg-app-surface border-b border-app-border z-40 p-4 space-y-2 shadow-lg">
@@ -254,6 +308,11 @@
   </main>
 
   <script>
+    function toggleTheme() {
+      const light = document.documentElement.classList.toggle('dark') === false;
+      localStorage.setItem('admin-theme', light ? 'light' : 'dark');
+    }
+
     // Initialize Lucide icons
     lucide.createIcons();