From c8f7aec7ec0f6f22b0d692b1f987790409580829 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Mon, 20 Apr 2026 19:43:30 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20teinter=20backgrounds=20dark=20mode=20a?=
 =?UTF-8?q?vec=20couleur=20primaire=20th=C3=A8me=20via=20color-mix()=20pou?=
 =?UTF-8?q?r=20diff=C3=A9renciation=20visuelle=20entre=20th=C3=A8mes=20(DE?=
 =?UTF-8?q?FAULT/GitHub/NavyElegance/Dracula),=20augmenter=20ratio=20prima?=
 =?UTF-8?q?ry=20dans=20--tile-bg/border/hover=20(14%/45%/30%=20vs=200%/30%?=
 =?UTF-8?q?/18%),=20ajouter=20tokens=20--tile-*=20light=20mode=20(6%/14%/3?=
 =?UTF-8?q?5%=20primary=20mix=20+=20shadow-sm/md),=20appliquer=20tint=208%?=
 =?UTF-8?q?=20primary=20sur=20body.view-notes/todo/archive=20backgrounds,?=
 =?UTF-8?q?=20et=20remplacer=20--bg-body=20hardcod=C3=A9=20par=20transpare?=
 =?UTF-8?q?nt=20dans=20.content-container=20pour=20h=C3=A9ritage=20backgro?=
 =?UTF-8?q?und=20teint=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/css/custom_views.css |  6 +++---
 shaarli-pro/css/style.css        | 25 ++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/shaarli-pro/css/custom_views.css b/shaarli-pro/css/custom_views.css
index e97c697..1acf61e 100644
--- a/shaarli-pro/css/custom_views.css
+++ b/shaarli-pro/css/custom_views.css
@@ -28,7 +28,7 @@
 /* --- TODO VIEW --- */
 body.view-todo .content-container {
     padding: 2rem;
-    background-color: var(--bg-body);
+    background-color: transparent;
     min-height: 100vh;
     /* Adjust for header */
 }
@@ -143,7 +143,7 @@ body.view-todo #linklist {
 body.view-notes .content-container,
 body.view-archive .content-container {
     padding: 2rem;
-    background-color: var(--bg-body);
+    background-color: transparent;
     min-height: 100vh;
 }
 
@@ -382,7 +382,7 @@ body.view-archive .content-container {
 
 /* Ensure archive view uses same background as notes view */
 body.view-archive .content-container {
-    background-color: var(--bg-body) !important;
+    background-color: transparent !important;
 }
 
 /* Archive Title */
diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
index 060ac84..2179a9a 100644
--- a/shaarli-pro/css/style.css
+++ b/shaarli-pro/css/style.css
@@ -4611,13 +4611,32 @@ table {
 }
 
 [data-theme="dark"] {
-    --tile-bg: var(--surface-variant, var(--bg-card));
-    --tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 82%, var(--primary) 18%);
-    --tile-border: color-mix(in srgb, var(--outline-variant, var(--border)) 70%, var(--text-main) 30%);
+    /* Tint surfaces with theme primary so each theme (DEFAULT, GITHUB,
+       NAVY_ELEGANCE, DRACULA, ...) is visually distinct even though all
+       dark themes share very similar navy/charcoal neutrals. */
+    --tile-bg: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 86%, var(--primary) 14%);
+    --tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 70%, var(--primary) 30%);
+    --tile-border: color-mix(in srgb, var(--outline-variant, var(--border)) 55%, var(--primary) 45%);
     --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
     --tile-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.55);
 }
 
+[data-theme="light"] {
+    --tile-bg: color-mix(in srgb, var(--bg-card) 94%, var(--primary) 6%);
+    --tile-bg-hover: color-mix(in srgb, var(--bg-card) 86%, var(--primary) 14%);
+    --tile-border: color-mix(in srgb, var(--border) 65%, var(--primary) 35%);
+    --tile-shadow: var(--shadow-sm);
+    --tile-shadow-hover: var(--shadow-md);
+}
+
+/* Theme-tinted page background for Notes / Tâches / Archive views
+   (was pure --bg-body = near-black and felt disconnected from the theme). */
+body.view-notes,
+body.view-todo,
+body.view-archive {
+    background-color: color-mix(in srgb, var(--bg-body) 92%, var(--primary) 8%);
+}
+
 /* Grid & list cards */
 .link-outer {
     background: var(--tile-bg);