Merge pull request #286 from EdouardVanbelle/refactor/dark-theme

static/css/components/buttons.css

@@ -97,7 +97,7 @@
 }
 
 .toggle-btn.active {
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-border);
     color: var(--color-accent);
     box-shadow: 0 1px 3px var(--color-shadow);
 }

static/css/components/dialogs.css

@@ -144,7 +144,7 @@
     border: 2px solid var(--color-border);
     border-radius: 10px;
     font-size: 14px;
-    background: var(--color-bg-hover);
+    background: var(--color-bg-input);
     color: var(--color-text-heading);
     transition: all 0.15s ease;
     outline: none;
@@ -386,7 +386,7 @@
 }
 
 .move-breadcrumb-item:hover {
-    background: var(--color-border);
+    background: var(--color-bg-hover);
     color: var(--color-text-heading);
 }
 
@@ -415,7 +415,7 @@
 }
 
 .folder-select-item:hover {
-    background-color: var(--color-bg-muted);
+    background-color: var(--color-bg-hover);
 }
 
 .folder-select-item.selected {

static/css/components/languageSelector.css

@@ -64,22 +64,6 @@
     z-index: 1000;
 }
 
-/* Custom scrollbar */
-.language-selector-dropdown::-webkit-scrollbar {
-    width: 6px;
-}
-.language-selector-dropdown::-webkit-scrollbar-track {
-    background: transparent;
-    margin: 8px 0;
-}
-.language-selector-dropdown::-webkit-scrollbar-thumb {
-    background-color: var(--color-border-medium);
-    border-radius: 3px;
-}
-.language-selector-dropdown::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-text-placeholder);
-}
-
 .language-selector.open .language-selector-dropdown {
     opacity: 1;
     visibility: visible;
@@ -98,7 +82,7 @@
 }
 
 .language-option:hover {
-    background-color: var(--color-bg-alt);
+    background-color: var(--color-bg-hover);
 }
 
 .language-option.active {

static/css/components/userMenu.css

@@ -226,7 +226,7 @@
 }
 
 .user-menu-admin {
-    color: var(--color-primary-hover);
+    color: var(--color-primary);
 }
 
 .user-menu-admin i {
@@ -253,7 +253,7 @@
 
 .role-badge-admin {
     background: var(--color-info-surface);
-    color: var(--color-primary-hover);
+    color: var(--color-primary);
 }
 
 .role-badge i {

static/css/layout/content.css

@@ -1,3 +1,20 @@
+/* ── Scrollbar ── */
+
+::-webkit-scrollbar {
+    width: 6px;
+}
+::-webkit-scrollbar-track {
+    background: var(--color-bg-surface);
+}
+::-webkit-scrollbar-thumb {
+    background: var(--color-accent);
+    border-radius: 3px;
+}
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-accent) var(--color-bg-surface);
+}
+
 /* Content area */
 .content-area {
     flex-grow: 1;

static/css/layout/topbar.css

@@ -77,7 +77,7 @@
     padding: 12px 50px 12px 44px;
     border-radius: 12px;
     border: 2px solid var(--color-border);
-    background-color: var(--color-bg-hover);
+    background-color: var(--color-bg-input);
     font-size: 14px;
     height: 46px;
     color: var(--color-text-heading);

static/css/views/admin.css

@@ -145,26 +145,7 @@ body {
 }
 .user-last-login-cell {
     font-size: 12px;
-    color: var(--color-text-faint);
-}
-
-/* ── Scrollbar ── */
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background: var(--color-shadow-md);
-    border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: var(--color-shadow-2xl);
-}
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-shadow-md) transparent;
+    color: var(--color-text);
 }
 
 /* ── Top Header Bar ── */
@@ -441,7 +422,7 @@ table {
 th {
     text-align: left;
     padding: 12px 16px;
-    background: var(--color-bg-hover);
+    background: var(--color-bg-subtle);
     color: var(--color-text-faint);
     font-size: 11px;
     text-transform: uppercase;
@@ -459,7 +440,7 @@ tr:last-child td {
     border-bottom: none;
 }
 tr:hover {
-    background: var(--color-bg-off-white);
+    background: var(--color-bg-hover);
 }
 .user-info {
     display: flex;

static/css/views/auth.css

@@ -439,23 +439,6 @@
     padding: 6px;
 }
 
-.lang-picker-list::-webkit-scrollbar {
-    width: 6px;
-}
-
-.lang-picker-list::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.lang-picker-list::-webkit-scrollbar-thumb {
-    background: var(--color-border);
-    border-radius: 3px;
-}
-
-.lang-picker-list::-webkit-scrollbar-thumb:hover {
-    background: var(--color-text-faint);
-}
-
 /* Language item in dropdown */
 .lang-picker-item {
     display: flex;

static/css/views/profile.css

@@ -27,22 +27,6 @@ body {
 
 /* #main-content and #auth-error start hidden via .hidden class */
 
-/* ── Scrollbar ── */
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background: var(--color-shadow-md);
-    border-radius: 4px;
-}
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-shadow-md) transparent;
-}
-
 /* ── Header ── */
 .profile-header {
     background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);
@@ -198,7 +182,7 @@ body {
 }
 .info-item {
     padding: 16px;
-    background: var(--color-bg-hover);
+    background: var(--color-bg-alt);
     border-radius: 12px;
     border: 1px solid var(--color-border);
 }
@@ -305,11 +289,14 @@ body {
     border: 2px solid var(--color-border);
     border-radius: 10px;
     font-size: 14px;
-    background: var(--color-bg-hover);
+    background: var(--color-bg-input);
     transition: all 0.2s;
     font-family: inherit;
     color: var(--color-text-heading);
 }
+.form-group input:hover {
+    background: var(--color-bg-surface);
+}
 .form-group input:focus {
     outline: none;
     border-color: var(--color-accent);
@@ -639,11 +626,16 @@ body {
     border: 2px solid var(--color-border);
     border-radius: 10px;
     font-size: 14px;
-    background: var(--color-bg-hover);
+    background: var(--color-bg-input);
     transition: all 0.2s;
     font-family: inherit;
     color: var(--color-text-heading);
 }
+
+.app-pw-create input:hover {
+    background: var(--color-bg-surface);
+}
+
 .app-pw-create input:focus {
     outline: none;
     border-color: var(--color-accent);

static/css/views/shared.css

@@ -219,6 +219,7 @@
     padding: 15px;
     border-bottom: 1px solid var(--color-border-xfaint);
     vertical-align: middle;
+    color: var(--color-text);
 }
 
 .shared-item-name {