Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
May 21, 2024

Conversation

ryan953
Copy link
Member

@ryan953 ryan953 commented May 20, 2024

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:
SCR-20240520-mhiz

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 before light false light after light false light
prefers-color-scheme: light emulate: false theme: dark before light false dark after light false dark
prefers-color-scheme: light emulate: true theme: light before light true light after light true light
prefers-color-scheme: light emulate: true theme: dark before light true dark after light true dark
prefers-color-scheme: dark emulate: false theme: light before dark false light after dark false light
prefers-color-scheme: dark emulate: false theme: dark before dark false dark after dark false dark
prefers-color-scheme: dark emulate: true theme: light before dark true light after dark true light
prefers-color-scheme: dark emulate: true theme: dark before dark true dark after dark true dark

References:

@ryan953 ryan953 requested a review from a team as a code owner May 20, 2024 20:45
Copy link
Contributor

github-actions bot commented May 20, 2024

size-limit report 📦

Path Size
@sentry/browser 21.72 KB (0%)
@sentry/browser (incl. Tracing) 32.88 KB (0%)
@sentry/browser (incl. Tracing, Replay) 68.23 KB (0%)
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 61.61 KB (0%)
@sentry/browser (incl. Tracing, Replay with Canvas) 72.27 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) 84.3 KB (+0.04% 🔺)
@sentry/browser (incl. Feedback) 37.71 KB (+0.09% 🔺)
@sentry/browser (incl. sendFeedback) 26.29 KB (0%)
@sentry/browser (incl. FeedbackAsync) 30.69 KB (+0.1% 🔺)
@sentry/react 24.41 KB (0%)
@sentry/react (incl. Tracing) 35.87 KB (0%)
@sentry/vue 25.66 KB (0%)
@sentry/vue (incl. Tracing) 34.69 KB (0%)
@sentry/svelte 21.86 KB (0%)
CDN Bundle 24.26 KB (0%)
CDN Bundle (incl. Tracing) 34.31 KB (0%)
CDN Bundle (incl. Tracing, Replay) 68 KB (0%)
CDN Bundle (incl. Tracing, Replay, Feedback) 73 KB (+0.05% 🔺)
CDN Bundle - uncompressed 71.33 KB (0%)
CDN Bundle (incl. Tracing) - uncompressed 101.74 KB (0%)
CDN Bundle (incl. Tracing, Replay) - uncompressed 211.36 KB (0%)
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 223.72 KB (+0.03% 🔺)
@sentry/nextjs (client) 35.09 KB (0%)
@sentry/sveltekit (client) 33.46 KB (0%)
@sentry/node 134.17 KB (+0.01% 🔺)
@sentry/aws-serverless 128.18 KB (+0.01% 🔺)

@ryan953 ryan953 changed the title Ryan953/fix feedback border color fix(feedback): Improve feedback border color in dark-mode, and prevent auto-dark mode when a theme is picked May 20, 2024
@ryan953 ryan953 force-pushed the ryan953/fix-feedback-border-color branch from ceeb439 to 1930ff8 Compare May 20, 2024 20:58
@ryan953 ryan953 requested a review from Jesse-Box May 21, 2024 13:32
@@ -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(180, 180, 180, 0.25)',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

235, 230, 239, 0.15

@ryan953 ryan953 requested a review from Jesse-Box May 21, 2024 13:44
@ryan953 ryan953 dismissed Jesse-Box’s stale review May 21, 2024 17:36

Updated to use the new colors!

@ryan953 ryan953 merged commit f3c8a86 into develop May 21, 2024
95 checks passed
@ryan953 ryan953 deleted the ryan953/fix-feedback-border-color branch May 21, 2024 18:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants