diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index 1a36c4a31..e7a5405e8 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -425,7 +425,7 @@ div.tn-tool-dialog {
 
 /* QUICK EDIT DIALOG */
 
-.quick-edit-dialog-wrapper.tinted-dialog {
+.tinted-quick-edit-dialog {
     --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%);
diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts
index c1417d906..a1697c5f5 100644
--- a/apps/client/src/widgets/dialogs/popup_editor.ts
+++ b/apps/client/src/widgets/dialogs/popup_editor.ts
@@ -128,7 +128,7 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
         const customHue = getComputedStyle(wrapperElement).getPropertyValue("--custom-color-hue");
         if (customHue) {
             /* Apply the tinted-dialog class only if the custom color CSS class specifies a hue */
-            wrapperElement.classList.add("tinted-dialog");
+            wrapperElement.classList.add("tinted-quick-edit-dialog");
         }
 
         const activeEl = document.activeElement;