From 87a94892da841ba79b2d2ad8cbbbbca503c7a7dc Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 30 Dec 2025 17:43:10 -0800
Subject: [PATCH] fix(feedback): Fix cases where the outline of inputs were
 wrong

When the integration had "colorScheme: "dark"," then we include css for
both light and dark mode. But some properties, like `outline` don't need
to be specified, the system does it for us. However, setting
`color-scheme: only light` meant that the light-mode outlines were used
in all cases.

This changes things so that we have the correct values for
`color-scheme` if a specific value is picked. This ensures that the
`outline` and `:focus` colors set by the system are correct in all cases.

Test Plan:
I tested with my system set to each of: light, dark, automatic
And then with the integration setting set to each of: `colorScheme:
'light'`, `colorScheme: 'dark'` and `colorScheme: 'system'`.
To test i just opened up the feedback widget and clicked to focus an
input box.
---
 packages/feedback/src/core/createMainStyles.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/feedback/src/core/createMainStyles.ts b/packages/feedback/src/core/createMainStyles.ts
index 6ed6e2e357d8..36d38e62740a 100644
--- a/packages/feedback/src/core/createMainStyles.ts
+++ b/packages/feedback/src/core/createMainStyles.ts
@@ -71,7 +71,7 @@ export function createMainStyles({
   font-family: var(--font-family);
   font-size: var(--font-size);
 
-  ${colorScheme !== 'system' ? 'color-scheme: only light;' : ''}
+  ${colorScheme !== 'system' ? `color-scheme: only ${colorScheme};` : ''}
 
   ${getThemedCssVariables(
     colorScheme === 'dark' ? { ...DEFAULT_DARK, ...themeDark } : { ...DEFAULT_LIGHT, ...themeLight },
@@ -83,12 +83,13 @@ ${
     ? `
 @media (prefers-color-scheme: dark) {
   :host {
+    color-scheme: only dark;
+
     ${getThemedCssVariables({ ...DEFAULT_DARK, ...themeDark })}
   }
 }`
     : ''
 }
-}
 `;
 
   if (styleNonce) {