Skip to content

feat(feedback): Add setTheme() to dynamically update feedback widget color scheme#19430

Open
chargome wants to merge 4 commits intodevelopfrom
cg/feedback-theme-toggle
Open

feat(feedback): Add setTheme() to dynamically update feedback widget color scheme#19430
chargome wants to merge 4 commits intodevelopfrom
cg/feedback-theme-toggle

Conversation

@chargome
Copy link
Member

@chargome chargome commented Feb 19, 2026

Adds a setTheme(colorScheme: 'light' | 'dark' | 'system') method to the feedback integration, allowing applications to update the widget's color scheme at runtime without re-initializing the integration.

closes #19257

@chargome chargome self-assigned this Feb 19, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Feb 19, 2026

size-limit report 📦

Path Size % Change Change
@sentry/browser 25.61 kB - -
@sentry/browser - with treeshaking flags 24.12 kB - -
@sentry/browser (incl. Tracing) 42.42 kB - -
@sentry/browser (incl. Tracing, Profiling) 47.08 kB - -
@sentry/browser (incl. Tracing, Replay) 81.24 kB - -
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 70.86 kB - -
@sentry/browser (incl. Tracing, Replay with Canvas) 85.93 kB - -
@sentry/browser (incl. Tracing, Replay, Feedback) 98.19 kB +0.11% +101 B 🔺
@sentry/browser (incl. Feedback) 42.42 kB +0.22% +91 B 🔺
@sentry/browser (incl. sendFeedback) 30.28 kB - -
@sentry/browser (incl. FeedbackAsync) 35.34 kB +0.17% +57 B 🔺
@sentry/browser (incl. Metrics) 26.78 kB - -
@sentry/browser (incl. Logs) 26.92 kB - -
@sentry/browser (incl. Metrics & Logs) 27.6 kB - -
@sentry/react 27.37 kB - -
@sentry/react (incl. Tracing) 44.76 kB - -
@sentry/vue 30.06 kB - -
@sentry/vue (incl. Tracing) 44.26 kB - -
@sentry/svelte 25.64 kB - -
CDN Bundle 28.16 kB - -
CDN Bundle (incl. Tracing) 43.25 kB - -
CDN Bundle (incl. Logs, Metrics) 29 kB - -
CDN Bundle (incl. Tracing, Logs, Metrics) 44.09 kB - -
CDN Bundle (incl. Replay, Logs, Metrics) 68.08 kB - -
CDN Bundle (incl. Tracing, Replay) 80.12 kB - -
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) 80.99 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback) 85.64 kB +0.1% +78 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) 86.52 kB +0.07% +60 B 🔺
CDN Bundle - uncompressed 82.33 kB - -
CDN Bundle (incl. Tracing) - uncompressed 128.05 kB - -
CDN Bundle (incl. Logs, Metrics) - uncompressed 85.17 kB - -
CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed 130.88 kB - -
CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed 208.83 kB - -
CDN Bundle (incl. Tracing, Replay) - uncompressed 244.93 kB - -
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed 247.75 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 257.84 kB +0.05% +112 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed 260.65 kB +0.05% +112 B 🔺
@sentry/nextjs (client) 47.17 kB - -
@sentry/sveltekit (client) 42.88 kB - -
@sentry/node-core 52.18 kB +0.02% +8 B 🔺
@sentry/node 166.54 kB +0.01% +7 B 🔺
@sentry/node - without tracing 93.97 kB +0.02% +10 B 🔺
@sentry/aws-serverless 109.47 kB +0.01% +7 B 🔺

View base workflow run

@github-actions
Copy link
Contributor

github-actions bot commented Feb 19, 2026

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

Scenario Requests/s % of Baseline Prev. Requests/s Change %
GET Baseline 8,750 - 11,689 -25%
GET With Sentry 1,578 18% 1,949 -19%
GET With Sentry (error only) 5,859 67% 7,606 -23%
POST Baseline 1,166 - 1,295 -10%
POST With Sentry 554 48% 617 -10%
POST With Sentry (error only) 1,026 88% 1,098 -7%
MYSQL Baseline 3,213 - 3,497 -8%
MYSQL With Sentry 337 10% 450 -25%
MYSQL With Sentry (error only) 2,573 80% 2,970 -13%

View base workflow run

@chargome chargome requested a review from andreiborza February 19, 2026 18:02
@chargome chargome marked this pull request as ready for review February 19, 2026 18:02
@chargome chargome requested a review from a team as a code owner February 19, 2026 18:02
setTheme(colorScheme: 'light' | 'dark' | 'system'): void {
_options.colorScheme = colorScheme;
if (_shadow) {
const existingStyle = _shadow.querySelector('style');
Copy link
Member

@ryan953 ryan953 Feb 19, 2026

Choose a reason for hiding this comment

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

careful with this! i think multiple styles can be added into the shadow root, base stuff for the button, and then more and more as the modal gets opened

edit: yeah checkout this: https://github.com/getsentry/sentry-javascript/blob/develop/packages/feedback/src/modal/integration.tsx#L39-L44 it's a 2nd <style> inserted

Copy link
Member Author

@chargome chargome Feb 20, 2026

Choose a reason for hiding this comment

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

Fixed by storing a direct reference to the main style element (_mainStyle) when it's created in _createShadow, instead of relying on querySelector('style'). Would this work?

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.

Able to toggle theme of Feedback integration without page reload

2 participants

Comments