diff --git a/apps/client/src/services/css_class_manager.ts b/apps/client/src/services/css_class_manager.ts
index fc839c9b1..ff0270cf3 100644
--- a/apps/client/src/services/css_class_manager.ts
+++ b/apps/client/src/services/css_class_manager.ts
@@ -30,9 +30,8 @@ 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};
+                --custom-color-hue: ${getHue(color) ?? 'unset'};
             }
         </style>`);
 
@@ -66,18 +65,15 @@ function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: numb
     // For the dark theme, limit the minimum lightness
     const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex();
 
-    let darkThemeBackgroundColor = "unset";
-    let lightThemeBackgroundColor = "unset";
+    return {lightThemeColor, darkThemeColor};
+}
 
+/** Returns the hue of the specified color, or undefined if the color is grayscale. */
+function getHue(color: ColorInstance) {
     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: 37, l: 89, alpha: 1}).hexa();
+    if (hslColor.saturationl() > 0) {
+        return hslColor.hue();
     }
-
-    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 95e6dccd8..01bd125ec 100644
--- a/apps/client/src/stylesheets/theme-dark.css
+++ b/apps/client/src/stylesheets/theme-dark.css
@@ -84,7 +84,6 @@ 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 933f5bfe6..55203712e 100644
--- a/apps/client/src/stylesheets/theme-light.css
+++ b/apps/client/src/stylesheets/theme-light.css
@@ -84,5 +84,4 @@ 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 b9a66da0d..a584fcab1 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -270,7 +270,11 @@
 
 #left-pane span.fancytree-node {
     --custom-color: var(--dark-theme-custom-color);
-    --custom-bg-color: var(--dark-theme-custom-bg-color);
+
+    /* The background color of the active item in the note tree.
+     * The --custom-color-hue variable contains the hue of the user-selected note color.
+     * This value is unset for gray tones. */
+    --custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
 }
 
 body ::-webkit-calendar-picker-indicator {
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 0df203dfd..47d81f7a8 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -261,5 +261,13 @@
     --ck-editor-toolbar-button-on-color: black;
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
-
 }
+
+#left-pane span.fancytree-node {
+    --custom-color: var(--light-theme-custom-color);
+
+    /* The background color of the active item in the note tree.
+     * The --custom-color-hue variable contains the hue of the user-selected note color.
+     * This value is unset for gray tones. */
+    --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
+}
\ No newline at end of file