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/__snapshots__/components-compact-list--compact-list--dark.png b/frontend/__snapshots__/components-compact-list--compact-list--dark.png
index 4e59c6ed124d7..688c0cfdbddc3 100644
Binary files a/frontend/__snapshots__/components-compact-list--compact-list--dark.png and b/frontend/__snapshots__/components-compact-list--compact-list--dark.png differ
diff --git a/frontend/__snapshots__/components-compact-list--compact-list--light.png b/frontend/__snapshots__/components-compact-list--compact-list--light.png
index 7262e239a2f83..6fe382c462e4f 100644
Binary files a/frontend/__snapshots__/components-compact-list--compact-list--light.png and b/frontend/__snapshots__/components-compact-list--compact-list--light.png differ
diff --git a/frontend/__snapshots__/components-empty-message--empty-message--dark.png b/frontend/__snapshots__/components-empty-message--empty-message--dark.png
index 1b032e2b24efe..5bf720047b592 100644
Binary files a/frontend/__snapshots__/components-empty-message--empty-message--dark.png and b/frontend/__snapshots__/components-empty-message--empty-message--dark.png differ
diff --git a/frontend/__snapshots__/components-empty-message--empty-message--light.png b/frontend/__snapshots__/components-empty-message--empty-message--light.png
index ec99d1cde51e2..fbd6c235ce79f 100644
Binary files a/frontend/__snapshots__/components-empty-message--empty-message--light.png and b/frontend/__snapshots__/components-empty-message--empty-message--light.png differ
diff --git a/frontend/__snapshots__/components-empty-message--empty-message.png b/frontend/__snapshots__/components-empty-message--empty-message.png
new file mode 100644
index 0000000000000..c4aaf18e67979
Binary files /dev/null and b/frontend/__snapshots__/components-empty-message--empty-message.png differ
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--dark.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--dark.png
index 1815da231cb61..2fd0df3d4599f 100644
Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--dark.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--dark.png differ
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--light.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--light.png
index 72ea9710e6bba..aac284dfb17c8 100644
Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--light.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--light.png differ
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png
new file mode 100644
index 0000000000000..b01fe436e2052
Binary files /dev/null and b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png differ
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base--dark.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base--dark.png
index 463c3d9a4f95a..f047072695572 100644
Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-base--dark.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-base--dark.png differ
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base--light.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base--light.png
index 13b184832020f..64867a9377dec 100644
Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-base--light.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-base--light.png differ
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png
new file mode 100644
index 0000000000000..c13cc546a518e
Binary files /dev/null and b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png differ
diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--dark.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--dark.png
index 4cf25e41f2a40..db71c88a90c8d 100644
Binary files a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--dark.png and b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--dark.png differ
diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--light.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--light.png
index feb0cfca160fb..43a53cbdae5c2 100644
Binary files a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--light.png and b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--light.png differ
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss
index 7da24c3955ad3..1ac9aca5439e6 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.scss
+++ b/frontend/src/scenes/surveys/SurveyAppearance.scss
@@ -121,7 +121,15 @@
 .description {
     margin-top: 5px;
     font-size: 13px;
-    opacity: 0.6;
+    color: rgba(var(--survey-text-color), 0.6);
+
+    a {
+        color: rgb(var(--survey-text-color));
+
+        &:hover {
+            color: rgba(var(--survey-text-color), 0.6);
+        }
+    }
 }
 
 .ratings-number {
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
index dbf5349ad3f8f..697fa7b661d2b 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -23,6 +23,7 @@ import {
     check,
     dissatisfiedEmoji,
     getTextColor,
+    getTextColorComponents,
     neutralEmoji,
     posthogLogoSVG,
     satisfiedEmoji,
@@ -285,7 +286,7 @@ export function BaseAppearance({
     preview?: boolean
     isWidgetSurvey?: boolean
 }): JSX.Element {
-    const [textColor, setTextColor] = useState('black')
+    const [textColor, setTextColor] = useState<'white' | 'black'>('black')
     const ref = useRef(null)
 
     useEffect(() => {
@@ -300,11 +301,14 @@ export function BaseAppearance({
             ref={ref}
             className={`survey-form ${isWidgetSurvey ? 'widget-survey' : ''}`}
             // eslint-disable-next-line react/forbid-dom-props
-            style={{
-                backgroundColor: appearance.backgroundColor,
-                border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
-                color: textColor,
-            }}
+            style={
+                {
+                    backgroundColor: appearance.backgroundColor,
+                    border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
+                    color: textColor,
+                    '--survey-text-color': getTextColorComponents(textColor),
+                } as React.CSSProperties
+            }
         >
             <div className="survey-box">
                 {!preview && (
diff --git a/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx b/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
index 36ab91e0ed681..fe973bbff140a 100644
--- a/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
@@ -101,7 +101,7 @@ export const posthogLogoSVG = (
         </defs>
     </svg>
 )
-export function getTextColor(el: never): string {
+export function getTextColor(el: Element): 'white' | 'black' {
     const backgroundColor = window.getComputedStyle(el).backgroundColor
     if (backgroundColor === 'rgba(0, 0, 0, 0)') {
         return 'black'
@@ -116,6 +116,10 @@ export function getTextColor(el: never): string {
         hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))
     return hsp > 127.5 ? 'black' : 'white'
 }
+/** Return the rgb-components for usage within css rgb(). */
+export function getTextColorComponents(color: 'white' | 'black'): string {
+    return color === 'white' ? '255, 255, 255' : '0, 0, 0'
+}
 
 export function PresentationTypeCard({
     title,