diff --git a/.stylelintrc.js b/.stylelintrc.js
index 5616533984ae3..e41cb17d84111 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -44,5 +44,6 @@ module.exports = {
         'scss/at-extend-no-missing-placeholder': null,
         'scss/comment-no-empty': null,
         'order/order': ['dollar-variables', 'custom-properties', 'declarations', 'rules', 'at-rules'],
+        'color-function-notation': ['modern', { ignore: ['with-var-inside'] }],
     },
 }
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss
index af8bf0fd4f102..1ac9aca5439e6 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.scss
+++ b/frontend/src/scenes/surveys/SurveyAppearance.scss
@@ -121,13 +121,13 @@
 .description {
     margin-top: 5px;
     font-size: 13px;
-    color: rgba(var(--textColor), 0.6);
+    color: rgba(var(--survey-text-color), 0.6);
 
     a {
-        color: rgb(var(--textColor));
+        color: rgb(var(--survey-text-color));
 
         &:hover {
-            color: rgba(var(--textColor), 0.6);
+            color: rgba(var(--survey-text-color), 0.6);
         }
     }
 }
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
index 363318fe95f35..785ed7e91ef25 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -306,7 +306,7 @@ export function BaseAppearance({
                     backgroundColor: appearance.backgroundColor,
                     border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                     color: textColor,
-                    '--textColor': getTextColorComponents(textColor),
+                    '--survey-text-color': getTextColorComponents(textColor),
                 } as React.CSSProperties
             }
         >