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(" ");