From 52b68c7a0885e8e8ad1ab1f15daf0a6efdc05eba Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Mon, 20 Apr 2026 11:27:53 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20compl=C3=A9ter=20syst=C3=A8me=20th?=
 =?UTF-8?q?=C3=A8mes=20avec=20variables=20CSS=20s=C3=A9mantiques=20=C3=A9t?=
 =?UTF-8?q?endues=20(--primary-hover/--primary-light/--bg-body/--bg-sideba?=
 =?UTF-8?q?r/--bg-card/--bg-card-hover/--text-main/--text-secondary/--text?=
 =?UTF-8?q?-muted/--border/--border-light/--header-bg/--header-text/--tag-?=
 =?UTF-8?q?*/--overlay-bg/--selection-bg/--selection-border/--success/--da?=
 =?UTF-8?q?nger/--warning/--info)=20pour=20tous=20les=2014=20th=C3=A8mes?=
 =?UTF-8?q?=20(DEFAULT/GitHub/Linear/Spotify/Notion/Discord/Dracula/OneDar?=
 =?UTF-8?q?k/TokyoNight/Nord/NightOwl/Anthracite/Cyberpunk/NavyElegance/Ea?=
 =?UTF-8?q?rthy)=20en=20modes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/css/style.css  |    9 +-
 shaarli-pro/css/themes.css | 1214 ++++++++++++++++++++++++++++++++++++
 shaarli-pro/includes.html  |    2 +-
 3 files changed, 1220 insertions(+), 5 deletions(-)

diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
index 1341609..38d05cc 100644
--- a/shaarli-pro/css/style.css
+++ b/shaarli-pro/css/style.css
@@ -1576,7 +1576,7 @@ body.view-notes .paging {
 .link-readlater-badge {
     position: absolute;
     top: 0.75rem;
-    right: 2.9rem;
+    right: 3.5rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -4496,11 +4496,12 @@ table {
 }
 
 .view-compact .link-tag-list {
-    grid-column: 2;
-    grid-row: 1 / span 2;
+    grid-column: 1;
+    grid-row: 3;
     gap: 0.35rem;
-    align-self: center;
+    align-self: start;
     overflow: visible;
+    flex-wrap: wrap;
 }
 
 .view-compact .link-tag,
diff --git a/shaarli-pro/css/themes.css b/shaarli-pro/css/themes.css
index 56c7abd..a832f9d 100644
--- a/shaarli-pro/css/themes.css
+++ b/shaarli-pro/css/themes.css
@@ -20,11 +20,18 @@
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  
+  --success: #10b981;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --info: #3b82f6;
 }
 
 /* 1. DEFAULT (ShaarIt) - DARK (Par défaut si pas de light) */
 :root, :root[data-theme-id="DEFAULT"] {
   --primary: #00D4AA;
+  --primary-hover: #00B894;
+  --primary-light: rgba(0, 212, 170, 0.15);
   --on-primary: #0A1628;
   --primary-container: #243447;
   --on-primary-container: #4EECC4;
@@ -39,25 +46,52 @@
   
   --background: #0A1628;
   --on-background: #E2E8F0;
+  --bg-body: #0A1628;
+  --bg-sidebar: #0D1B2A;
+  --bg-card: #0D1B2A;
+  --bg-card-hover: #1B2838;
   
   --surface: #0D1B2A;
   --on-surface: #E2E8F0;
+  --text-main: #E2E8F0;
+  --text-secondary: #B0B8C4;
+  --text-muted: #94A3B8;
   
   --surface-variant: #1B2838;
   --on-surface-variant: #94A3B8;
   
   --outline: #64748B;
   --outline-variant: #2A3F54;
+  --border: #1B2838;
+  --border-light: #0D1B2A;
   
   --error: #EF4444;
   --on-error: #FFFFFF;
   --error-container: #450A0A;
   --on-error-container: #FCA5A5;
+  
+  --header-bg: #0D1B2A;
+  --header-text: #E2E8F0;
+  
+  --tag-bg: #243447;
+  --tag-text: #4EECC4;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #6EE7B7;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FCA5A5;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FCD34D;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(0, 212, 170, 0.25);
+  --selection-border: #00D4AA;
 }
 
 /* 1. DEFAULT (ShaarIt) - LIGHT */
 :root[data-theme="light"][data-theme-id="DEFAULT"] {
   --primary: #006B5A;
+  --primary-hover: #005247;
+  --primary-light: rgba(0, 107, 90, 0.15);
   --on-primary: #FFFFFF;
   --primary-container: #B2F5E6;
   --on-primary-container: #00201A;
@@ -72,25 +106,52 @@
   
   --background: #F8FAFA;
   --on-background: #1A1C1E;
+  --bg-body: #F8FAFA;
+  --bg-sidebar: #FFFFFF;
+  --bg-card: #FFFFFF;
+  --bg-card-hover: #F9FAFB;
   
   --surface: #FFFFFF;
   --on-surface: #1A1C1E;
+  --text-main: #111827;
+  --text-secondary: #6B7280;
+  --text-muted: #9CA3AF;
   
   --surface-variant: #E7F0EE;
   --on-surface-variant: #404944;
   
   --outline: #707974;
   --outline-variant: #C0C9C4;
+  --border: #E5E7EB;
+  --border-light: #F3F4F6;
   
   --error: #BA1A1A;
   --on-error: #FFFFFF;
   --error-container: #FFDAD6;
   --on-error-container: #410002;
+  
+  --header-bg: #006B5A;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #E0E7FF;
+  --tag-text: #4338CA;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(0, 107, 90, 0.15);
+  --selection-border: #006B5A;
 }
 
 /* 2. GITHUB - DARK */
 :root[data-theme-id="GITHUB"] {
   --primary: #58A6FF;
+  --primary-hover: #3B82F6;
+  --primary-light: rgba(88, 166, 255, 0.15);
   --on-primary: #0D1117;
   --primary-container: #1F2937;
   --on-primary-container: #79C0FF;
@@ -105,25 +166,52 @@
   
   --background: #0D1117;
   --on-background: #C9D1D9;
+  --bg-body: #0D1117;
+  --bg-sidebar: #161B22;
+  --bg-card: #161B22;
+  --bg-card-hover: #21262D;
   
   --surface: #161B22;
   --on-surface: #C9D1D9;
+  --text-main: #C9D1D9;
+  --text-secondary: #8B949E;
+  --text-muted: #6E7681;
   
   --surface-variant: #21262D;
   --on-surface-variant: #8B949E;
   
   --outline: #30363D;
   --outline-variant: #21262D;
+  --border: #21262D;
+  --border-light: #161B22;
   
   --error: #F85149;
   --on-error: #FFFFFF;
   --error-container: #490202;
   --on-error-container: #FFA198;
+  
+  --header-bg: #161B22;
+  --header-text: #C9D1D9;
+  
+  --tag-bg: #1C2D22;
+  --tag-text: #56D364;
+  --tag-green-bg: #1C2D22;
+  --tag-green-text: #56D364;
+  --tag-red-bg: #490202;
+  --tag-red-text: #FFA198;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FCD34D;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(88, 166, 255, 0.25);
+  --selection-border: #58A6FF;
 }
 
 /* 2. GITHUB - LIGHT */
 :root[data-theme="light"][data-theme-id="GITHUB"] {
   --primary: #0969DA;
+  --primary-hover: #0860CA;
+  --primary-light: rgba(9, 105, 218, 0.15);
   --on-primary: #FFFFFF;
   --primary-container: #DDF4FF;
   --on-primary-container: #0A3069;
@@ -138,25 +226,52 @@
   
   --background: #FFFFFF;
   --on-background: #1F2328;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F6F8FA;
+  --bg-card: #F6F8FA;
+  --bg-card-hover: #EAEEF2;
   
   --surface: #F6F8FA;
   --on-surface: #1F2328;
+  --text-main: #1F2328;
+  --text-secondary: #656D76;
+  --text-muted: #8C959F;
   
   --surface-variant: #EAEEF2;
   --on-surface-variant: #656D76;
   
   --outline: #D0D7DE;
   --outline-variant: #E1E4E8;
+  --border: #D0D7DE;
+  --border-light: #EAEEF2;
   
   --error: #CF222E;
   --on-error: #FFFFFF;
   --error-container: #FFEBE9;
   --on-error-container: #82071E;
+  
+  --header-bg: #0969DA;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #DDF4FF;
+  --tag-text: #0969DA;
+  --tag-green-bg: #DAFBE1;
+  --tag-green-text: #1A7F37;
+  --tag-red-bg: #FFEBE9;
+  --tag-red-text: #CF222E;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(9, 105, 218, 0.15);
+  --selection-border: #0969DA;
 }
 
 /* 3. LINEAR - DARK */
 :root[data-theme-id="LINEAR"] {
   --primary: #5E6AD2;
+  --primary-hover: #4F5AC0;
+  --primary-light: rgba(94, 106, 210, 0.15);
   --on-primary: #FFFFFF;
   --primary-container: #2A2B3D;
   --on-primary-container: #8B8FE8;
@@ -171,25 +286,52 @@
   
   --background: #12131A;
   --on-background: #EEEFF2;
+  --bg-body: #12131A;
+  --bg-sidebar: #1B1C24;
+  --bg-card: #1B1C24;
+  --bg-card-hover: #22232E;
   
   --surface: #1B1C24;
   --on-surface: #EEEFF2;
+  --text-main: #EEEFF2;
+  --text-secondary: #A0A5B0;
+  --text-muted: #8A8F98;
   
   --surface-variant: #22232E;
   --on-surface-variant: #8A8F98;
   
   --outline: #3B3D4A;
   --outline-variant: #2A2B3D;
+  --border: #22232E;
+  --border-light: #1B1C24;
   
   --error: #EB5757;
   --on-error: #FFFFFF;
   --error-container: #3D1515;
   --on-error-container: #FF9B9B;
+  
+  --header-bg: #1B1C24;
+  --header-text: #EEEFF2;
+  
+  --tag-bg: #2A2B3D;
+  --tag-text: #8B8FE8;
+  --tag-green-bg: #1E2A1E;
+  --tag-green-text: #7DC4FF;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FF9B9B;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FCD34D;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(94, 106, 210, 0.25);
+  --selection-border: #5E6AD2;
 }
 
 /* 4. SPOTIFY - DARK */
 :root[data-theme-id="SPOTIFY"] {
   --primary: #1DB954;
+  --primary-hover: #1aa34a;
+  --primary-light: rgba(29, 185, 84, 0.15);
   --on-primary: #000000;
   --primary-container: #1A3D27;
   --on-primary-container: #1ED760;
@@ -202,22 +344,49 @@
   
   --background: #000000;
   --on-background: #FFFFFF;
+  --bg-body: #000000;
+  --bg-sidebar: #121212;
+  --bg-card: #121212;
+  --bg-card-hover: #1A1A1A;
   
   --surface: #121212;
   --on-surface: #FFFFFF;
+  --text-main: #FFFFFF;
+  --text-secondary: #B3B3B3;
+  --text-muted: #999999;
   
   --surface-variant: #1A1A1A;
   --on-surface-variant: #B3B3B3;
   
   --outline: #333333;
   --outline-variant: #282828;
+  --border: #1A1A1A;
+  --border-light: #121212;
   
   --error: #E22134;
+  
+  --header-bg: #121212;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #1A3D27;
+  --tag-text: #1ED760;
+  --tag-green-bg: #1A3D27;
+  --tag-green-text: #1ED760;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FCA5A5;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FCD34D;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(29, 185, 84, 0.25);
+  --selection-border: #1DB954;
 }
 
 /* 5. NOTION - DARK */
 :root[data-theme-id="NOTION"] {
   --primary: #529CCA;
+  --primary-hover: #4488BB;
+  --primary-light: rgba(82, 156, 202, 0.15);
   --on-primary: #191919;
   
   --secondary: #E07A5F;
@@ -228,19 +397,49 @@
   
   --background: #191919;
   --on-background: #E0E0E0;
+  --bg-body: #191919;
+  --bg-sidebar: #202020;
+  --bg-card: #202020;
+  --bg-card-hover: #2B2B2B;
   
   --surface: #202020;
   --on-surface: #E0E0E0;
+  --text-main: #E0E0E0;
+  --text-secondary: #B0B0B0;
+  --text-muted: #9B9B9B;
   
   --surface-variant: #2B2B2B;
   --on-surface-variant: #9B9B9B;
   
   --outline: #3E3E3E;
+  --outline-variant: #2B2B2B;
+  --border: #2B2B2B;
+  --border-light: #202020;
+  
+  --error: #EF4444;
+  
+  --header-bg: #202020;
+  --header-text: #E0E0E0;
+  
+  --tag-bg: #2B2B2B;
+  --tag-text: #81B29A;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #6EE7B7;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FCA5A5;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FCD34D;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(82, 156, 202, 0.25);
+  --selection-border: #529CCA;
 }
 
 /* 6. DISCORD - DARK */
 :root[data-theme-id="DISCORD"] {
   --primary: #5865F2;
+  --primary-hover: #4752C4;
+  --primary-light: rgba(88, 101, 242, 0.15);
   --on-primary: #FFFFFF;
   
   --secondary: #57F287;
@@ -251,19 +450,49 @@
   
   --background: #313338;
   --on-background: #DBDEE1;
+  --bg-body: #313338;
+  --bg-sidebar: #2B2D31;
+  --bg-card: #2B2D31;
+  --bg-card-hover: #383A40;
   
   --surface: #2B2D31;
   --on-surface: #DBDEE1;
+  --text-main: #DBDEE1;
+  --text-secondary: #949BA4;
+  --text-muted: #B5BAC1;
   
   --surface-variant: #383A40;
   --on-surface-variant: #B5BAC1;
   
   --outline: #4E5058;
+  --outline-variant: #383A40;
+  --border: #383A40;
+  --border-light: #2B2D31;
+  
+  --error: #ED4245;
+  
+  --header-bg: #2B2D31;
+  --header-text: #DBDEE1;
+  
+  --tag-bg: #383A40;
+  --tag-text: #57F287;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #6EE7B7;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FCA5A5;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FCD34D;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(88, 101, 242, 0.25);
+  --selection-border: #5865F2;
 }
 
 /* 7. DRACULA - DARK */
 :root[data-theme-id="DRACULA"] {
   --primary: #BD93F9;
+  --primary-hover: #A878E8;
+  --primary-light: rgba(189, 147, 249, 0.15);
   --on-primary: #21222C;
   
   --secondary: #50FA7B;
@@ -274,19 +503,49 @@
   
   --background: #282A36;
   --on-background: #F8F8F2;
+  --bg-body: #282A36;
+  --bg-sidebar: #21222C;
+  --bg-card: #21222C;
+  --bg-card-hover: #343746;
   
   --surface: #21222C;
   --on-surface: #F8F8F2;
+  --text-main: #F8F8F2;
+  --text-secondary: #D0D0D0;
+  --text-muted: #BFBFBF;
   
   --surface-variant: #343746;
   --on-surface-variant: #BFBFBF;
   
   --outline: #6272A4;
+  --outline-variant: #343746;
+  --border: #343746;
+  --border-light: #21222C;
+  
+  --error: #FF5555;
+  
+  --header-bg: #21222C;
+  --header-text: #F8F8F2;
+  
+  --tag-bg: #343746;
+  --tag-text: #BD93F9;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #50FA7B;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FF79C6;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #F1FA8C;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(189, 147, 249, 0.25);
+  --selection-border: #BD93F9;
 }
 
 /* 8. ONE DARK PRO - DARK */
 :root[data-theme-id="ONE_DARK_PRO"] {
   --primary: #61AFEF;
+  --primary-hover: #4A9FDF;
+  --primary-light: rgba(97, 175, 239, 0.15);
   --on-primary: #1E2127;
   
   --secondary: #98C379;
@@ -297,19 +556,49 @@
   
   --background: #282C34;
   --on-background: #ABB2BF;
+  --bg-body: #282C34;
+  --bg-sidebar: #21252B;
+  --bg-card: #21252B;
+  --bg-card-hover: #2C313A;
   
   --surface: #21252B;
   --on-surface: #ABB2BF;
+  --text-main: #ABB2BF;
+  --text-secondary: #9BA0A8;
+  --text-muted: #8B929E;
   
   --surface-variant: #2C313A;
   --on-surface-variant: #8B929E;
   
   --outline: #3E4452;
+  --outline-variant: #2C313A;
+  --border: #2C313A;
+  --border-light: #21252B;
+  
+  --error: #E06C75;
+  
+  --header-bg: #21252B;
+  --header-text: #ABB2BF;
+  
+  --tag-bg: #2C313A;
+  --tag-text: #61AFEF;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #98C379;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #E06C75;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #E5C07B;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(97, 175, 239, 0.25);
+  --selection-border: #61AFEF;
 }
 
 /* 9. TOKYO NIGHT - DARK */
 :root[data-theme-id="TOKYO_NIGHT"] {
   --primary: #7AA2F7;
+  --primary-hover: #6A92E7;
+  --primary-light: rgba(122, 162, 247, 0.15);
   --on-primary: #1A1B26;
   
   --secondary: #9ECE6A;
@@ -320,19 +609,49 @@
   
   --background: #1A1B26;
   --on-background: #C0CAF5;
+  --bg-body: #1A1B26;
+  --bg-sidebar: #16171F;
+  --bg-card: #16171F;
+  --bg-card-hover: #24283B;
   
   --surface: #16171F;
   --on-surface: #C0CAF5;
+  --text-main: #C0CAF5;
+  --text-secondary: #A9B1D6;
+  --text-muted: #9AA5CE;
   
   --surface-variant: #24283B;
   --on-surface-variant: #9AA5CE;
   
   --outline: #3B4261;
+  --outline-variant: #24283B;
+  --border: #24283B;
+  --border-light: #16171F;
+  
+  --error: #F7768E;
+  
+  --header-bg: #16171F;
+  --header-text: #C0CAF5;
+  
+  --tag-bg: #24283B;
+  --tag-text: #7AA2F7;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #9ECE6A;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #F7768E;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #E0AF68;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(122, 162, 247, 0.25);
+  --selection-border: #7AA2F7;
 }
 
 /* 10. NORD - DARK */
 :root[data-theme-id="NORD"] {
   --primary: #88C0D0;
+  --primary-hover: #7AB0C0;
+  --primary-light: rgba(136, 192, 208, 0.15);
   --on-primary: #2E3440;
   
   --secondary: #A3BE8C;
@@ -343,19 +662,49 @@
   
   --background: #2E3440;
   --on-background: #ECEFF4;
+  --bg-body: #2E3440;
+  --bg-sidebar: #3B4252;
+  --bg-card: #3B4252;
+  --bg-card-hover: #434C5E;
   
   --surface: #3B4252;
   --on-surface: #D8DEE9;
+  --text-main: #ECEFF4;
+  --text-secondary: #D8DEE9;
+  --text-muted: #D8DEE9;
   
   --surface-variant: #434C5E;
   --on-surface-variant: #D8DEE9;
   
   --outline: #4C566A;
+  --outline-variant: #434C5E;
+  --border: #434C5E;
+  --border-light: #3B4252;
+  
+  --error: #BF616A;
+  
+  --header-bg: #3B4252;
+  --header-text: #ECEFF4;
+  
+  --tag-bg: #434C5E;
+  --tag-text: #88C0D0;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #A3BE8C;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #BF616A;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #EBCB8B;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(136, 192, 208, 0.25);
+  --selection-border: #88C0D0;
 }
 
 /* 11. NIGHT OWL - DARK */
 :root[data-theme-id="NIGHT_OWL"] {
   --primary: #7FDBCA;
+  --primary-hover: #6FCBBA;
+  --primary-light: rgba(127, 219, 202, 0.15);
   --on-primary: #011627;
   
   --secondary: #ADDB67;
@@ -366,19 +715,49 @@
   
   --background: #011627;
   --on-background: #D6DEEB;
+  --bg-body: #011627;
+  --bg-sidebar: #0B2942;
+  --bg-card: #0B2942;
+  --bg-card-hover: #112B45;
   
   --surface: #0B2942;
   --on-surface: #D6DEEB;
+  --text-main: #D6DEEB;
+  --text-secondary: #B8C5D6;
+  --text-muted: #9FAFC2;
   
   --surface-variant: #112B45;
   --on-surface-variant: #9FAFC2;
   
   --outline: #1D3B58;
+  --outline-variant: #112B45;
+  --border: #112B45;
+  --border-light: #0B2942;
+  
+  --error: #EF5350;
+  
+  --header-bg: #0B2942;
+  --header-text: #D6DEEB;
+  
+  --tag-bg: #112B45;
+  --tag-text: #7FDBCA;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #ADDB67;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #EF5350;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FCD34D;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(127, 219, 202, 0.25);
+  --selection-border: #7FDBCA;
 }
 
 /* 12. ANTHRACITE - DARK */
 :root[data-theme-id="ANTHRACITE"] {
   --primary: #BB86FC;
+  --primary-hover: #AA75EB;
+  --primary-light: rgba(187, 134, 252, 0.15);
   --on-primary: #121212;
   
   --secondary: #03DAC6;
@@ -389,19 +768,49 @@
   
   --background: #121212;
   --on-background: #E1E1E1;
+  --bg-body: #121212;
+  --bg-sidebar: #1E1E1E;
+  --bg-card: #1E1E1E;
+  --bg-card-hover: #2C2C2C;
   
   --surface: #1E1E1E;
   --on-surface: #E1E1E1;
+  --text-main: #E1E1E1;
+  --text-secondary: #C0C0C0;
+  --text-muted: #AAAAAA;
   
   --surface-variant: #2C2C2C;
   --on-surface-variant: #AAAAAA;
   
   --outline: #3D3D3D;
+  --outline-variant: #2C2C2C;
+  --border: #2C2C2C;
+  --border-light: #1E1E1E;
+  
+  --error: #CF6679;
+  
+  --header-bg: #1E1E1E;
+  --header-text: #E1E1E1;
+  
+  --tag-bg: #2C2C2C;
+  --tag-text: #BB86FC;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #03DAC6;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #CF6679;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FCD34D;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(187, 134, 252, 0.25);
+  --selection-border: #BB86FC;
 }
 
 /* 13. CYBERPUNK - DARK */
 :root[data-theme-id="CYBERPUNK"] {
   --primary: #00FFFF;
+  --primary-hover: #00DDDD;
+  --primary-light: rgba(0, 255, 255, 0.15);
   --on-primary: #0A0A14;
   
   --secondary: #FF00FF;
@@ -412,19 +821,49 @@
   
   --background: #0A0A14;
   --on-background: #E0E0F0;
+  --bg-body: #0A0A14;
+  --bg-sidebar: #12121E;
+  --bg-card: #12121E;
+  --bg-card-hover: #1A1A2E;
   
   --surface: #12121E;
   --on-surface: #E0E0F0;
+  --text-main: #E0E0F0;
+  --text-secondary: #C0C0D0;
+  --text-muted: #A0A0C0;
   
   --surface-variant: #1A1A2E;
   --on-surface-variant: #A0A0C0;
   
   --outline: #2A2A44;
+  --outline-variant: #1A1A2E;
+  --border: #1A1A2E;
+  --border-light: #12121E;
+  
+  --error: #FF0055;
+  
+  --header-bg: #12121E;
+  --header-text: #E0E0F0;
+  
+  --tag-bg: #1A1A2E;
+  --tag-text: #00FFFF;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #00FF00;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FF0055;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #FFFF00;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(0, 255, 255, 0.25);
+  --selection-border: #00FFFF;
 }
 
 /* 14. NAVY ELEGANCE - DARK */
 :root[data-theme-id="NAVY_ELEGANCE"] {
   --primary: #D4AF37;
+  --primary-hover: #C49F27;
+  --primary-light: rgba(212, 175, 55, 0.15);
   --on-primary: #0B1929;
   
   --secondary: #C0C0C0;
@@ -435,19 +874,49 @@
   
   --background: #0B1929;
   --on-background: #E0E4EA;
+  --bg-body: #0B1929;
+  --bg-sidebar: #0F2035;
+  --bg-card: #0F2035;
+  --bg-card-hover: #162A42;
   
   --surface: #0F2035;
   --on-surface: #E0E4EA;
+  --text-main: #E0E4EA;
+  --text-secondary: #B8BFCC;
+  --text-muted: #A0AABB;
   
   --surface-variant: #162A42;
   --on-surface-variant: #A0AABB;
   
   --outline: #1E3550;
+  --outline-variant: #162A42;
+  --border: #162A42;
+  --border-light: #0F2035;
+  
+  --error: #EF4444;
+  
+  --header-bg: #0F2035;
+  --header-text: #E0E4EA;
+  
+  --tag-bg: #162A42;
+  --tag-text: #D4AF37;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #87CEEB;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FCA5A5;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #D4AF37;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(212, 175, 55, 0.25);
+  --selection-border: #D4AF37;
 }
 
 /* 15. EARTHY - DARK */
 :root[data-theme-id="EARTHY"] {
   --primary: #81C784;
+  --primary-hover: #71B774;
+  --primary-light: rgba(129, 199, 132, 0.15);
   --on-primary: #1A1510;
   
   --secondary: #D4A574;
@@ -458,12 +927,757 @@
   
   --background: #1A1510;
   --on-background: #E0D8CF;
+  --bg-body: #1A1510;
+  --bg-sidebar: #231E18;
+  --bg-card: #231E18;
+  --bg-card-hover: #2E2720;
   
   --surface: #231E18;
   --on-surface: #E0D8CF;
+  --text-main: #E0D8CF;
+  --text-secondary: #C8BFB6;
+  --text-muted: #ADA49A;
   
   --surface-variant: #2E2720;
   --on-surface-variant: #ADA49A;
   
   --outline: #3D342B;
+  --outline-variant: #2E2720;
+  --border: #2E2720;
+  --border-light: #231E18;
+  
+  --error: #EF4444;
+  
+  --header-bg: #231E18;
+  --header-text: #E0D8CF;
+  
+  --tag-bg: #2E2720;
+  --tag-text: #81C784;
+  --tag-green-bg: #1B3D2A;
+  --tag-green-text: #A5D6A7;
+  --tag-red-bg: #3D1515;
+  --tag-red-text: #FCA5A5;
+  --tag-yellow-bg: #3D2A15;
+  --tag-yellow-text: #D4A574;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.7);
+  --selection-bg: rgba(129, 199, 132, 0.25);
+  --selection-border: #81C784;
+}
+
+/* 3. LINEAR - LIGHT */
+:root[data-theme="light"][data-theme-id="LINEAR"] {
+  --primary: #3B3D4A;
+  --primary-hover: #2A2B3D;
+  --primary-light: rgba(59, 61, 74, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #E8EAFF;
+  --on-primary-container: #1A1C2A;
+  
+  --secondary: #1E5A96;
+  --on-secondary: #FFFFFF;
+  --secondary-container: #D0E4FF;
+  --on-secondary-container: #001D3A;
+  
+  --tertiary: #B8860B;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #12131A;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F7;
+  --bg-card: #F5F5F7;
+  --bg-card-hover: #EEEFF2;
+  
+  --surface: #F5F5F7;
+  --on-surface: #12131A;
+  --text-main: #12131A;
+  --text-secondary: #5A5C68;
+  --text-muted: #8A8F98;
+  
+  --surface-variant: #EEEFF2;
+  --on-surface-variant: #5A5C68;
+  
+  --outline: #8A8F98;
+  --outline-variant: #D0D1D9;
+  --border: #D0D1D9;
+  --border-light: #EEEFF2;
+  
+  --error: #EB5757;
+  
+  --header-bg: #3B3D4A;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #E8EAFF;
+  --tag-text: #3B3D4A;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(59, 61, 74, 0.15);
+  --selection-border: #3B3D4A;
+}
+
+/* 4. SPOTIFY - LIGHT */
+:root[data-theme="light"][data-theme-id="SPOTIFY"] {
+  --primary: #1DB954;
+  --primary-hover: #1aa34a;
+  --primary-light: rgba(29, 185, 84, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #D1FAE5;
+  --on-primary-container: #0A2A15;
+  
+  --secondary: #1DB954;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #B3B3B3;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #191919;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #191919;
+  --text-main: #191919;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #E22134;
+  
+  --header-bg: #1DB954;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #D1FAE5;
+  --tag-text: #1DB954;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #1DB954;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(29, 185, 84, 0.15);
+  --selection-border: #1DB954;
+}
+
+/* 5. NOTION - LIGHT */
+:root[data-theme="light"][data-theme-id="NOTION"] {
+  --primary: #529CCA;
+  --primary-hover: #4488BB;
+  --primary-light: rgba(82, 156, 202, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #D0E8FF;
+  --on-primary-container: #001E36;
+  
+  --secondary: #E07A5F;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #81B29A;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #191919;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #191919;
+  --text-main: #191919;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #EF4444;
+  
+  --header-bg: #529CCA;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #D0E8FF;
+  --tag-text: #529CCA;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(82, 156, 202, 0.15);
+  --selection-border: #529CCA;
+}
+
+/* 6. DISCORD - LIGHT */
+:root[data-theme="light"][data-theme-id="DISCORD"] {
+  --primary: #5865F2;
+  --primary-hover: #4752C4;
+  --primary-light: rgba(88, 101, 242, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #DDF4FF;
+  --on-primary-container: #001D3A;
+  
+  --secondary: #57F287;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #FEE75C;
+  --on-tertiary: #1E2124;
+  
+  --background: #FFFFFF;
+  --on-background: #1E2124;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #1E2124;
+  --text-main: #1E2124;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #ED4245;
+  
+  --header-bg: #5865F2;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #DDF4FF;
+  --tag-text: #5865F2;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(88, 101, 242, 0.15);
+  --selection-border: #5865F2;
+}
+
+/* 7. DRACULA - LIGHT */
+:root[data-theme="light"][data-theme-id="DRACULA"] {
+  --primary: #BD93F9;
+  --primary-hover: #A878E8;
+  --primary-light: rgba(189, 147, 249, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #E8D5FF;
+  --on-primary-container: #2A0A4A;
+  
+  --secondary: #50FA7B;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #FF79C6;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #21222C;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #21222C;
+  --text-main: #21222C;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #FF5555;
+  
+  --header-bg: #BD93F9;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #E8D5FF;
+  --tag-text: #BD93F9;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(189, 147, 249, 0.15);
+  --selection-border: #BD93F9;
+}
+
+/* 8. ONE DARK PRO - LIGHT */
+:root[data-theme="light"][data-theme-id="ONE_DARK_PRO"] {
+  --primary: #61AFEF;
+  --primary-hover: #4A9FDF;
+  --primary-light: rgba(97, 175, 239, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #D0E8FF;
+  --on-primary-container: #001E36;
+  
+  --secondary: #98C379;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #E5C07B;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #1E2127;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #1E2127;
+  --text-main: #1E2127;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #E06C75;
+  
+  --header-bg: #61AFEF;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #D0E8FF;
+  --tag-text: #61AFEF;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(97, 175, 239, 0.15);
+  --selection-border: #61AFEF;
+}
+
+/* 9. TOKYO NIGHT - LIGHT */
+:root[data-theme="light"][data-theme-id="TOKYO_NIGHT"] {
+  --primary: #7AA2F7;
+  --primary-hover: #6A92E7;
+  --primary-light: rgba(122, 162, 247, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #D0E8FF;
+  --on-primary-container: #001E36;
+  
+  --secondary: #9ECE6A;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #BB9AF7;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #1A1B26;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #1A1B26;
+  --text-main: #1A1B26;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #F7768E;
+  
+  --header-bg: #7AA2F7;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #D0E8FF;
+  --tag-text: #7AA2F7;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(122, 162, 247, 0.15);
+  --selection-border: #7AA2F7;
+}
+
+/* 10. NORD - LIGHT */
+:root[data-theme="light"][data-theme-id="NORD"] {
+  --primary: #88C0D0;
+  --primary-hover: #7AB0C0;
+  --primary-light: rgba(136, 192, 208, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #D0E8FF;
+  --on-primary-container: #001E36;
+  
+  --secondary: #A3BE8C;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #EBCB8B;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #2E3440;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #2E3440;
+  --text-main: #2E3440;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #BF616A;
+  
+  --header-bg: #88C0D0;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #D0E8FF;
+  --tag-text: #88C0D0;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(136, 192, 208, 0.15);
+  --selection-border: #88C0D0;
+}
+
+/* 11. NIGHT OWL - LIGHT */
+:root[data-theme="light"][data-theme-id="NIGHT_OWL"] {
+  --primary: #7FDBCA;
+  --primary-hover: #6FCBBA;
+  --primary-light: rgba(127, 219, 202, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #D0E8FF;
+  --on-primary-container: #001E36;
+  
+  --secondary: #ADDB67;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #C792EA;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #011627;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #011627;
+  --text-main: #011627;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #EF5350;
+  
+  --header-bg: #7FDBCA;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #D0E8FF;
+  --tag-text: #7FDBCA;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(127, 219, 202, 0.15);
+  --selection-border: #7FDBCA;
+}
+
+/* 12. ANTHRACITE - LIGHT */
+:root[data-theme="light"][data-theme-id="ANTHRACITE"] {
+  --primary: #BB86FC;
+  --primary-hover: #AA75EB;
+  --primary-light: rgba(187, 134, 252, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #E8D5FF;
+  --on-primary-container: #2A0A4A;
+  
+  --secondary: #03DAC6;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #CF6679;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #121212;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #121212;
+  --text-main: #121212;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #CF6679;
+  
+  --header-bg: #BB86FC;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #E8D5FF;
+  --tag-text: #BB86FC;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(187, 134, 252, 0.15);
+  --selection-border: #BB86FC;
+}
+
+/* 13. CYBERPUNK - LIGHT */
+:root[data-theme="light"][data-theme-id="CYBERPUNK"] {
+  --primary: #00FFFF;
+  --primary-hover: #00DDDD;
+  --primary-light: rgba(0, 255, 255, 0.15);
+  --on-primary: #0A0A14;
+  --primary-container: #D0F0FF;
+  --on-primary-container: #001A1A;
+  
+  --secondary: #FF00FF;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #FFFF00;
+  --on-tertiary: #0A0A14;
+  
+  --background: #FFFFFF;
+  --on-background: #0A0A14;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #0A0A14;
+  --text-main: #0A0A14;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #FF0055;
+  
+  --header-bg: #00FFFF;
+  --header-text: #0A0A14;
+  
+  --tag-bg: #D0F0FF;
+  --tag-text: #00FFFF;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(0, 255, 255, 0.15);
+  --selection-border: #00FFFF;
+}
+
+/* 14. NAVY ELEGANCE - LIGHT */
+:root[data-theme="light"][data-theme-id="NAVY_ELEGANCE"] {
+  --primary: #D4AF37;
+  --primary-hover: #C49F27;
+  --primary-light: rgba(212, 175, 55, 0.15);
+  --on-primary: #0B1929;
+  --primary-container: #FFF8E1;
+  --on-primary-container: #3D2A15;
+  
+  --secondary: #C0C0C0;
+  --on-secondary: #0B1929;
+  
+  --tertiary: #87CEEB;
+  --on-tertiary: #0B1929;
+  
+  --background: #FFFFFF;
+  --on-background: #0B1929;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #0B1929;
+  --text-main: #0B1929;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #EF4444;
+  
+  --header-bg: #D4AF37;
+  --header-text: #0B1929;
+  
+  --tag-bg: #FFF8E1;
+  --tag-text: #D4AF37;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(212, 175, 55, 0.15);
+  --selection-border: #D4AF37;
+}
+
+/* 15. EARTHY - LIGHT */
+:root[data-theme="light"][data-theme-id="EARTHY"] {
+  --primary: #81C784;
+  --primary-hover: #71B774;
+  --primary-light: rgba(129, 199, 132, 0.15);
+  --on-primary: #FFFFFF;
+  --primary-container: #D1FAE5;
+  --on-primary-container: #0A2A15;
+  
+  --secondary: #D4A574;
+  --on-secondary: #FFFFFF;
+  
+  --tertiary: #A5D6A7;
+  --on-tertiary: #FFFFFF;
+  
+  --background: #FFFFFF;
+  --on-background: #1A1510;
+  --bg-body: #FFFFFF;
+  --bg-sidebar: #F5F5F5;
+  --bg-card: #F5F5F5;
+  --bg-card-hover: #EEEEEE;
+  
+  --surface: #F5F5F5;
+  --on-surface: #1A1510;
+  --text-main: #1A1510;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  
+  --surface-variant: #EEEEEE;
+  --on-surface-variant: #999999;
+  
+  --outline: #CCCCCC;
+  --outline-variant: #DDDDDD;
+  --border: #DDDDDD;
+  --border-light: #EEEEEE;
+  
+  --error: #EF4444;
+  
+  --header-bg: #81C784;
+  --header-text: #FFFFFF;
+  
+  --tag-bg: #D1FAE5;
+  --tag-text: #81C784;
+  --tag-green-bg: #D1FAE5;
+  --tag-green-text: #065F46;
+  --tag-red-bg: #FEE2E2;
+  --tag-red-text: #991B1B;
+  --tag-yellow-bg: #FEF3C7;
+  --tag-yellow-text: #92400E;
+  
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --selection-bg: rgba(129, 199, 132, 0.15);
+  --selection-border: #81C784;
 }
diff --git a/shaarli-pro/includes.html b/shaarli-pro/includes.html
index f6d07af..e06e58f 100644
--- a/shaarli-pro/includes.html
+++ b/shaarli-pro/includes.html
@@ -35,8 +35,8 @@
 </script>
 
 <!-- Professional Theme CSS -->
-<link type="text/css" rel="stylesheet" href="{$base_path}/{function="ltrim($asset_path, '/')"}/css/themes.css?v=1.0.0" />
 <link type="text/css" rel="stylesheet" href="{$base_path}/{function="ltrim($asset_path, '/')"}/css/style.css?v=1.0.4" />
+<link type="text/css" rel="stylesheet" href="{$base_path}/{function="ltrim($asset_path, '/')"}/css/themes.css?v=1.0.0" />
 <link type="text/css" rel="stylesheet" href="{$base_path}/{function="ltrim($asset_path, '/')"}/css/custom_views.css?v=1.0.5" />
 {if="$pageName=='editlink' || $pageName=='addlink' || $pageName=='editlinkbatch'"}
 <link type="text/css" rel="stylesheet" href="{$base_path}/{function="ltrim($asset_path, '/')"}/css/awesomplete.css?v=1.0.4" />