From de9314a271a303828acbf9de3a8b90bf1b8f8820 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 19 Oct 2025 17:39:21 +0300
Subject: [PATCH] client/note tree item tinting: optimize

---
 apps/client/src/stylesheets/theme-dark.css       | 2 +-
 apps/client/src/stylesheets/theme-light.css      | 2 +-
 apps/client/src/stylesheets/theme-next-dark.css  | 2 +-
 apps/client/src/stylesheets/theme-next-light.css | 2 +-
 apps/client/src/widgets/note_tree.ts             | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-dark.css b/apps/client/src/stylesheets/theme-dark.css
index 01bd125ec..0a622d97d 100644
--- a/apps/client/src/stylesheets/theme-dark.css
+++ b/apps/client/src/stylesheets/theme-dark.css
@@ -82,7 +82,7 @@ body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
 
-#left-pane span.fancytree-node {
+#left-pane .fancytree-node.tinted {
     --custom-color: var(--dark-theme-custom-color);
 }
 
diff --git a/apps/client/src/stylesheets/theme-light.css b/apps/client/src/stylesheets/theme-light.css
index 55203712e..a07b9799f 100644
--- a/apps/client/src/stylesheets/theme-light.css
+++ b/apps/client/src/stylesheets/theme-light.css
@@ -82,6 +82,6 @@ html {
     --native-titlebar-background: #ffffff00;
 }
 
-#left-pane span.fancytree-node {
+#left-pane .fancytree-node.tinted {
     --custom-color: var(--light-theme-custom-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 a584fcab1..8b15e7676 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -268,7 +268,7 @@
  * Dark color scheme tweaks
  */
 
-#left-pane span.fancytree-node {
+#left-pane .fancytree-node.tinted {
     --custom-color: var(--dark-theme-custom-color);
 
     /* The background color of the active item in the note tree.
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 47d81f7a8..30f4e1c3a 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -263,7 +263,7 @@
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
 }
 
-#left-pane span.fancytree-node {
+#left-pane .fancytree-node.tinted {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
diff --git a/apps/client/src/widgets/note_tree.ts b/apps/client/src/widgets/note_tree.ts
index f4f600929..f1c2ca736 100644
--- a/apps/client/src/widgets/note_tree.ts
+++ b/apps/client/src/widgets/note_tree.ts
@@ -905,7 +905,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         const colorClass = note.getColorClass();
 
         if (colorClass) {
-            extraClasses.push(colorClass);
+            extraClasses.push(...["tinted", colorClass]);
         }
 
         return extraClasses.join(" ");