fix(feedback): Improve feedback border color in dark-mode, and prevent auto-dark mode when a theme is picked (#12126)

If the developer sets `theme: 'dark'` or `theme: 'light'` in their
sentry config, then we should prevent the browser from applying
auto-dark mode to the widget. That mode guesses at the correct color to
use, and sometimes gets it wrong

Also, I've picked a better color for the border in dark mode.

There are a few states to test:
- OS is light/dark (flows into `prefers-color-scheme` media query)
- Emulate Dark true/false
- SDK config light/dark

which refer to these 2 settings inside the chrome devtools:
<img width="398" alt="SCR-20240520-mhiz"
src="https://github.com/getsentry/sentry-javascript/assets/187460/40391ea6-11dc-479d-8464-349e96c2b0ce">

Note:images show a slightly different border than what's implemented. 

| OS Config | Emulate Config | SDK Config | Before | After |
| --- | --- | --- | --- | --- |
| prefers-color-scheme: light | emulate: false | theme: light | <img
width="312" alt="before light false light"
src="https://github.com/getsentry/sentry-javascript/assets/187460/9102a046-381a-4a28-bf72-ffe28e94cc7d">
| <img width="305" alt="after light false light"
src="https://github.com/getsentry/sentry-javascript/assets/187460/61fc16f9-29c0-4e4a-ac24-71fc12b29325">
|
| prefers-color-scheme: light | emulate: false | theme: dark | <img
width="307" alt="before light false dark"
src="https://github.com/getsentry/sentry-javascript/assets/187460/c1465d70-c0b6-4384-9ac2-13eb876e4a5b">
| <img width="301" alt="after light false dark"
src="https://github.com/getsentry/sentry-javascript/assets/187460/1c815105-c1ce-4681-b6da-719ae11f4406">
|
| prefers-color-scheme: light | emulate: true | theme: light | <img
width="303" alt="before light true light"
src="https://github.com/getsentry/sentry-javascript/assets/187460/30d90b6f-df99-4ea8-b1ff-a15a5486a91e">
| <img width="296" alt="after light true light"
src="https://github.com/getsentry/sentry-javascript/assets/187460/a3097c0e-1a63-4f49-b794-80ddcc7bfaf4">
|
| prefers-color-scheme: light | emulate: true | theme: dark | <img
width="307" alt="before light true dark"
src="https://github.com/getsentry/sentry-javascript/assets/187460/3cae1240-f810-4a4a-971a-15cf67f048d7">
| <img width="301" alt="after light true dark"
src="https://github.com/getsentry/sentry-javascript/assets/187460/95161791-05ea-4deb-9adc-4151a2db0afa">
|
| prefers-color-scheme: dark | emulate: false | theme: light | <img
width="299" alt="before dark false light"
src="https://github.com/getsentry/sentry-javascript/assets/187460/bfbc33c1-8cc2-457b-8f46-61a9fc141c2c">
| <img width="303" alt="after dark false light"
src="https://github.com/getsentry/sentry-javascript/assets/187460/02839776-41cd-46ba-ba6a-ac8f723db16c">
|
| prefers-color-scheme: dark | emulate: false | theme: dark | <img
width="305" alt="before dark false dark"
src="https://github.com/getsentry/sentry-javascript/assets/187460/9e42bf3a-c685-4a63-9f4c-82da932ebe4d">
| <img width="302" alt="after dark false dark"
src="https://github.com/getsentry/sentry-javascript/assets/187460/66c8b988-04d6-4de7-8418-8279d1af5326">
|
| prefers-color-scheme: dark | emulate: true | theme: light | <img
width="299" alt="before dark true light"
src="https://github.com/getsentry/sentry-javascript/assets/187460/b5a5ab64-69a0-4939-a7ae-ec94806f423e">
| <img width="302" alt="after dark true light"
src="https://github.com/getsentry/sentry-javascript/assets/187460/f4adfbf8-cce3-4e07-8c9a-e723a1b73d4e">
|
| prefers-color-scheme: dark | emulate: true | theme: dark | <img
width="302" alt="before dark true dark"
src="https://github.com/getsentry/sentry-javascript/assets/187460/0e9cccae-ee8a-457c-9fb3-6b228e9d4089">
| <img width="311" alt="after dark true dark"
src="https://github.com/getsentry/sentry-javascript/assets/187460/24d9cf3e-0b72-4eaf-bf42-2738bb9d09b0">
|

References: 
- https://developer.chrome.com/blog/auto-dark-theme
-
https://developer.chrome.com/docs/devtools/rendering/emulate-css#emulate_css_media_feature_prefers-color-scheme

Author: ryan953

packages/feedback/src/core/createMainStyles.ts

@@ -27,7 +27,7 @@ const DEFAULT_DARK: InternalTheme = {
   accentBackground: PURPLE,
   successColor: '#2da98c',
   errorColor: '#f55459',
-  border: '1.5px solid rgba(41, 35, 47, 0.5)',
+  border: '1.5px solid rgba(235, 230, 239, 0.15)',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
   outline: '1px auto var(--accent-background)',
   interactiveFilter: 'brightness(150%)',
@@ -66,6 +66,8 @@ export function createMainStyles({ colorScheme, themeDark, themeLight }: Feedbac
   font-family: var(--font-family);
   font-size: var(--font-size);
 
+  ${colorScheme !== 'system' ? 'color-scheme: only light;' : ''}
+
   ${getThemedCssVariables(
     colorScheme === 'dark' ? { ...DEFAULT_DARK, ...themeDark } : { ...DEFAULT_LIGHT, ...themeLight },
   )}