From 75a79775f4fc939f4bff5f9287dda8ca2ce3a6a4 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 19 Oct 2025 03:28:34 +0300
Subject: [PATCH] client/note tree: tint the active item background according
 to the item's custom color

---
 apps/client/src/services/css_class_manager.ts  | 18 +++++++++++++++---
 apps/client/src/stylesheets/theme-dark.css     |  1 +
 apps/client/src/stylesheets/theme-light.css    |  1 +
 .../client/src/stylesheets/theme-next-dark.css |  1 +
 .../src/stylesheets/theme-next/shell.css       |  2 +-
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/services/css_class_manager.ts b/apps/client/src/services/css_class_manager.ts
index f148707c2..ad4ac1a41 100644
--- a/apps/client/src/services/css_class_manager.ts
+++ b/apps/client/src/services/css_class_manager.ts
@@ -34,7 +34,9 @@ function createClassForColor(colorString: string | null) {
         $("head").append(`<style>
             .${className}, span.fancytree-active.${className} {
                 --light-theme-custom-color: ${adjustedColor.lightThemeColor};
+                --light-theme-custom-bg-color: ${adjustedColor.lightThemeBackgroundColor};
                 --dark-theme-custom-color: ${adjustedColor.darkThemeColor};
+                --dark-theme-custom-bg-color: ${adjustedColor.darkThemeBackgroundColor};
             }
         </style>`);
 
@@ -59,8 +61,7 @@ function parseColor(color: string) {
  * according to the lightThemeMaxLightness and darkThemeMinLightness parameters.
  */
 function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) {
-    let labColor = color.lab();
-
+    const labColor = color.lab();
     const lightness = labColor.l();
 
     // For the light theme, limit the maximum lightness
@@ -69,7 +70,18 @@ function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: numb
     // For the dark theme, limit the minimum lightness
     const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex();
 
-    return {lightThemeColor, darkThemeColor};
+    let darkThemeBackgroundColor = "unset";
+    let lightThemeBackgroundColor = "unset";
+    
+    const hslColor = color.hsl();
+    const hue = hslColor.hue();
+
+    if (color.saturationl() > 0) {
+        darkThemeBackgroundColor = Color({h: hue, s: 20, l: 33, alpha: .4}).hexa();
+        lightThemeBackgroundColor = Color({h: hue, s: 100, l: 25, alpha: .1}).hexa();
+    }
+
+    return {lightThemeColor, lightThemeBackgroundColor, darkThemeColor, darkThemeBackgroundColor};
 }
 
 export default {
diff --git a/apps/client/src/stylesheets/theme-dark.css b/apps/client/src/stylesheets/theme-dark.css
index 01bd125ec..95e6dccd8 100644
--- a/apps/client/src/stylesheets/theme-dark.css
+++ b/apps/client/src/stylesheets/theme-dark.css
@@ -84,6 +84,7 @@ body ::-webkit-calendar-picker-indicator {
 
 #left-pane span.fancytree-node {
     --custom-color: var(--dark-theme-custom-color);
+    --custom-bg-color: var(--dark-theme-custom-bg-color);
 }
 
 .excalidraw.theme--dark {
diff --git a/apps/client/src/stylesheets/theme-light.css b/apps/client/src/stylesheets/theme-light.css
index 55203712e..933f5bfe6 100644
--- a/apps/client/src/stylesheets/theme-light.css
+++ b/apps/client/src/stylesheets/theme-light.css
@@ -84,4 +84,5 @@ html {
 
 #left-pane span.fancytree-node {
     --custom-color: var(--light-theme-custom-color);
+    --custom-bg-color: var(--light-theme-custom-bg-color);
 }
\ No newline at end of file
diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index b2192a2a0..b9a66da0d 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -270,6 +270,7 @@
 
 #left-pane span.fancytree-node {
     --custom-color: var(--dark-theme-custom-color);
+    --custom-bg-color: var(--dark-theme-custom-bg-color);
 }
 
 body ::-webkit-calendar-picker-indicator {
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index ff0245ab2..b6bd38789 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -658,7 +658,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     inset-inline-start: var(--left-pane-item-selected-shadow-size);
     bottom: var(--left-pane-item-selected-shadow-size);
     inset-inline-end: var(--left-pane-item-selected-shadow-size);
-    background: var(--left-pane-item-selected-background) !important;
+    background: var(--custom-bg-color, var(--left-pane-item-selected-background)) !important;
     box-shadow: var(--left-pane-item-selected-shadow);
     border-radius: 6px;
     animation: left-pane-item-select 200ms ease-out;