diff --git a/apps/client/src/services/css_class_manager.ts b/apps/client/src/services/css_class_manager.ts
index 4c0c0f360..9c6a97aaf 100644
--- a/apps/client/src/services/css_class_manager.ts
+++ b/apps/client/src/services/css_class_manager.ts
@@ -1,7 +1,9 @@
+import clsx from "clsx";
 import {readCssVar} from "../utils/css-var";
 import Color, { ColorInstance } from "color";
 
 const registeredClasses = new Set<string>();
+const colorsWithHue = new Set<string>();
 
 // Read the color lightness limits defined in the theme as CSS variables
 
@@ -26,19 +28,23 @@ function createClassForColor(colorString: string | null) {
     if (!registeredClasses.has(className)) {
         const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
                                                    darkThemeColorMinLightness!);
+        const hue = getHue(color);
 
         $("head").append(`<style>
             .${className}, span.fancytree-active.${className} {
                 --light-theme-custom-color: ${adjustedColor.lightThemeColor};
                 --dark-theme-custom-color: ${adjustedColor.darkThemeColor};
-                --custom-color-hue: ${getHue(color) ?? 'unset'};
+                --custom-color-hue: ${hue ?? 'unset'};
             }
         </style>`);
 
         registeredClasses.add(className);
+        if (hue) {
+            colorsWithHue.add(className);
+        }
     }
 
-    return `color ${className}`;
+    return clsx(className, colorsWithHue.has(className) && "with-hue");
 }
 
 function parseColor(color: string) {
diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index 8da51004e..fbb8d1546 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -301,7 +301,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
     border-color: var(--muted-text-color) !important;
 }
 
-.quick-edit-dialog-wrapper.color {
+.quick-edit-dialog-wrapper.with-hue {
     --modal-background-color: hsl(var(--custom-color-hue), 8.8%, 11.2%);
     --modal-border-color: hsl(var(--custom-color-hue), 9.4%, 25.1%);
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index a3fc26e93..f736538a8 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -276,7 +276,7 @@
     --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
 }
 
-.quick-edit-dialog-wrapper.color {
+.quick-edit-dialog-wrapper.with-hue {
     --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%);
     --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);