feat(feedback): Add theming #4677

antonis · 2025-03-21T12:17:41Z

📢 Type of change

Bugfix
New feature
Enhancement
Refactoring

Based on #4378

📜 Description

Adds theming options similar to JS

      Sentry.feedbackIntegration({
        colorScheme: 'system',
        themeLight: {
          foreground: '#ff0000',
          background: '#00ff00',
        },
        themeDark: {
          foreground: '#00ff00',
          background: '#ff0000',
        },
      }),

Demo Video

Screen.Recording.2025-03-28.at.3.42.32.PM.mov

Light	Dark

💡 Motivation and Context

💚 How did you test it?

Sample app

📝 Checklist

I added tests to verify changes
No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
I updated the docs if needed.
I updated the wizard if needed.
All tests passing
No breaking changes

🔮 Next steps

github-actions · 2025-03-21T12:18:21Z

	Messages
📖	Do not forget to update Sentry-docs with your feature once the pull request gets approved.

Generated by 🚫 dangerJS against 6c63d03

github-actions · 2025-03-21T12:28:57Z

Android (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	472.51 ms	472.11 ms	-0.40 ms
Size	17.75 MiB	20.13 MiB	2.39 MiB

Baseline results on branch: antonis/4358-Feedback-Form-Autoinject-Button

Startup times

Revision	Plain	With Sentry	Diff
`6a56df9`	421.08 ms	410.56 ms	-10.52 ms
`e028035`	390.98 ms	404.22 ms	13.25 ms
`6c9bb06`	432.38 ms	435.92 ms	3.54 ms
`36c9278`	462.35 ms	443.98 ms	-18.37 ms
`b383cbc`	427.42 ms	427.17 ms	-0.25 ms
`fab77ad`	424.86 ms	423.73 ms	-1.13 ms
`bc8d4a8`	398.20 ms	392.78 ms	-5.42 ms
`6b05100`	459.60 ms	442.80 ms	-16.80 ms
`4f8eb0b`	458.57 ms	467.82 ms	9.24 ms
`4a07b14`	433.17 ms	449.08 ms	15.91 ms

App size

Revision	Plain	With Sentry	Diff
`6a56df9`	17.74 MiB	20.11 MiB	2.37 MiB
`e028035`	17.75 MiB	20.13 MiB	2.38 MiB
`6c9bb06`	17.75 MiB	20.12 MiB	2.38 MiB
`36c9278`	17.74 MiB	20.10 MiB	2.37 MiB
`b383cbc`	17.75 MiB	20.12 MiB	2.37 MiB
`fab77ad`	17.75 MiB	20.12 MiB	2.37 MiB
`bc8d4a8`	17.75 MiB	20.12 MiB	2.37 MiB
`6b05100`	17.74 MiB	20.11 MiB	2.37 MiB
`4f8eb0b`	17.75 MiB	20.12 MiB	2.37 MiB
`4a07b14`	17.75 MiB	20.12 MiB	2.38 MiB

Previous results on branch: antonis/feedback-theme

Startup times

Revision	Plain	With Sentry	Diff
`6c3f839`	427.58 ms	413.10 ms	-14.48 ms
`cb89989`	398.12 ms	393.85 ms	-4.27 ms

App size

Revision	Plain	With Sentry	Diff
`6c3f839`	17.75 MiB	20.13 MiB	2.38 MiB
`cb89989`	17.75 MiB	20.13 MiB	2.38 MiB

github-actions · 2025-03-21T12:38:28Z

Android (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	388.04 ms	378.62 ms	-9.42 ms
Size	7.15 MiB	8.40 MiB	1.25 MiB

Baseline results on branch: antonis/4358-Feedback-Form-Autoinject-Button

Startup times

Revision	Plain	With Sentry	Diff
`b70633e`+dirty	368.44 ms	411.94 ms	43.50 ms
`6c9bb06`+dirty	400.80 ms	429.53 ms	28.73 ms
`39fa70e`+dirty	411.65 ms	423.04 ms	11.39 ms
`1169f78`+dirty	380.79 ms	360.83 ms	-19.95 ms
`6a56df9`+dirty	384.17 ms	404.35 ms	20.18 ms
`4a07b14`+dirty	285.76 ms	300.74 ms	14.98 ms
`fab77ad`+dirty	394.53 ms	407.42 ms	12.89 ms
`6b05100`+dirty	390.82 ms	408.63 ms	17.81 ms
`e681e44`+dirty	396.96 ms	422.58 ms	25.62 ms
`e028035`+dirty	386.08 ms	389.80 ms	3.72 ms

App size

Revision	Plain	With Sentry	Diff
`b70633e`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`6c9bb06`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`39fa70e`+dirty	7.15 MiB	8.40 MiB	1.25 MiB
`1169f78`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`6a56df9`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`4a07b14`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`fab77ad`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`6b05100`+dirty	7.15 MiB	8.38 MiB	1.24 MiB
`e681e44`+dirty	7.15 MiB	8.40 MiB	1.25 MiB
`e028035`+dirty	7.15 MiB	8.40 MiB	1.25 MiB

Previous results on branch: antonis/feedback-theme

Startup times

Revision	Plain	With Sentry	Diff
`cb89989`+dirty	377.51 ms	371.22 ms	-6.29 ms
`6c3f839`+dirty	392.94 ms	409.02 ms	16.08 ms

App size

Revision	Plain	With Sentry	Diff
`cb89989`+dirty	7.15 MiB	8.40 MiB	1.25 MiB
`6c3f839`+dirty	7.15 MiB	8.40 MiB	1.25 MiB

github-actions · 2025-03-21T12:41:58Z

iOS (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1211.25 ms	1214.10 ms	2.85 ms
Size	2.63 MiB	3.77 MiB	1.14 MiB

Baseline results on branch: antonis/4358-Feedback-Form-Autoinject-Button

Startup times

Revision	Plain	With Sentry	Diff
`2617630`+dirty	1232.52 ms	1240.78 ms	8.26 ms
`e028035`+dirty	1222.20 ms	1224.64 ms	2.44 ms
`b383cbc`+dirty	1214.57 ms	1220.48 ms	5.91 ms
`36c9278`+dirty	1227.37 ms	1229.80 ms	2.43 ms
`39fa70e`+dirty	1225.16 ms	1228.71 ms	3.55 ms
`6a56df9`+dirty	1227.91 ms	1218.66 ms	-9.26 ms
`6b05100`+dirty	1242.04 ms	1241.65 ms	-0.39 ms
`4a07b14`+dirty	1221.24 ms	1215.02 ms	-6.22 ms
`1169f78`+dirty	1225.43 ms	1225.53 ms	0.10 ms
`6c9bb06`+dirty	1210.79 ms	1220.06 ms	9.27 ms

App size

Revision	Plain	With Sentry	Diff
`2617630`+dirty	2.36 MiB	3.13 MiB	783.21 KiB
`e028035`+dirty	2.63 MiB	3.77 MiB	1.13 MiB
`b383cbc`+dirty	2.63 MiB	3.75 MiB	1.12 MiB
`36c9278`+dirty	2.36 MiB	3.13 MiB	784.69 KiB
`39fa70e`+dirty	2.63 MiB	3.77 MiB	1.13 MiB
`6a56df9`+dirty	2.36 MiB	3.12 MiB	770.81 KiB
`6b05100`+dirty	2.36 MiB	3.12 MiB	770.21 KiB
`4a07b14`+dirty	2.63 MiB	3.71 MiB	1.08 MiB
`1169f78`+dirty	2.63 MiB	3.76 MiB	1.13 MiB
`6c9bb06`+dirty	2.63 MiB	3.71 MiB	1.08 MiB

Previous results on branch: antonis/feedback-theme

Startup times

Revision	Plain	With Sentry	Diff
`cb89989`+dirty	1225.84 ms	1223.33 ms	-2.51 ms
`6c3f839`+dirty	1224.98 ms	1227.81 ms	2.83 ms

App size

Revision	Plain	With Sentry	Diff
`cb89989`+dirty	2.63 MiB	3.77 MiB	1.13 MiB
`6c3f839`+dirty	2.63 MiB	3.77 MiB	1.13 MiB

github-actions · 2025-03-21T12:53:31Z

iOS (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1215.82 ms	1227.36 ms	11.54 ms
Size	3.19 MiB	4.34 MiB	1.15 MiB

Baseline results on branch: antonis/4358-Feedback-Form-Autoinject-Button

Startup times

Revision	Plain	With Sentry	Diff
`2617630`+dirty	1236.02 ms	1243.86 ms	7.84 ms
`e028035`+dirty	1216.18 ms	1212.04 ms	-4.14 ms
`b383cbc`+dirty	1240.73 ms	1257.34 ms	16.61 ms
`36c9278`+dirty	1238.84 ms	1239.52 ms	0.68 ms
`39fa70e`+dirty	1228.13 ms	1232.24 ms	4.12 ms
`6a56df9`+dirty	1231.62 ms	1244.02 ms	12.40 ms
`6b05100`+dirty	1245.56 ms	1240.36 ms	-5.20 ms
`4a07b14`+dirty	1213.45 ms	1206.12 ms	-7.32 ms
`1169f78`+dirty	1234.33 ms	1230.53 ms	-3.80 ms
`6c9bb06`+dirty	1235.22 ms	1226.68 ms	-8.54 ms

App size

Revision	Plain	With Sentry	Diff
`2617630`+dirty	2.92 MiB	3.69 MiB	794.45 KiB
`e028035`+dirty	3.19 MiB	4.33 MiB	1.14 MiB
`b383cbc`+dirty	3.19 MiB	4.32 MiB	1.13 MiB
`36c9278`+dirty	2.92 MiB	3.70 MiB	796.02 KiB
`39fa70e`+dirty	3.19 MiB	4.33 MiB	1.14 MiB
`6a56df9`+dirty	2.92 MiB	3.68 MiB	783.36 KiB
`6b05100`+dirty	2.92 MiB	3.68 MiB	782.77 KiB
`4a07b14`+dirty	3.19 MiB	4.28 MiB	1.09 MiB
`1169f78`+dirty	3.19 MiB	4.32 MiB	1.14 MiB
`6c9bb06`+dirty	3.19 MiB	4.28 MiB	1.09 MiB

Previous results on branch: antonis/feedback-theme

Startup times

Revision	Plain	With Sentry	Diff
`cb89989`+dirty	1228.14 ms	1233.66 ms	5.52 ms
`6c3f839`+dirty	1229.57 ms	1231.72 ms	2.15 ms

App size

Revision	Plain	With Sentry	Diff
`cb89989`+dirty	3.19 MiB	4.33 MiB	1.15 MiB
`6c3f839`+dirty	3.19 MiB	4.33 MiB	1.15 MiB

…nis/feedback-theme

packages/core/src/js/feedback/FeedbackWidget.styles.ts

packages/core/src/js/feedback/integration.ts

krystofwoldrich · 2025-03-26T17:32:38Z

packages/core/src/js/feedback/FeedbackWidget.theme.ts

+/**
+ * Get the theme for the feedback widget based on the current color scheme
+ */
+export function getTheme(): FeedbackWidgetTheme {


The get theme is being called when the styles consts are created, which is before Sentry.init, and thus, the feedbackIntegration theme options are ignored.

I assume this might be solved in the reactive follow up, but it seems like a bug.

Thank you for the feedback @krystofwoldrich 🙇

I wasn't able to reproduce with the sample app in dev mode but I agree that this is a bug and the code needs restructuring. I'll iterate on this asap.

Recording

Screen.Recording.2025-03-27.at.12.48.50.PM.mov

Thank you for giving it a try. It might have been my machine issue, I'try it again.

I've fixed this along with adding dynamic theming support with 7a331b6

(also added a demo video at the PR description)

packages/core/src/js/feedback/FeedbackWidget.theme.ts

krystofwoldrich · 2025-03-26T17:39:54Z

Overall, it's looking good, but I've noticed some issues with customizing the theme.

We should add tests to ensure that the correct values are applied when using custom styles and custom themes.

…nis/feedback-theme # Conflicts: # CHANGELOG.md

antonis · 2025-03-28T14:12:51Z

Thank you for all your feedback @krystofwoldrich 🙇

This should be ready for another go. Note that I now also cover the dynamic theme changes on this PR with 7a331b6 as part of the refactoring discussed above.

We should add tests to ensure that the correct values are applied when using custom styles and custom themes.

I've added snapshot tests to cover this with 6c63d03

Add hardcoded dark and light color themes

df1653b

antonis mentioned this pull request Mar 21, 2025

[EPIC] Feedback Widget for React Native #4302

Open

antonis added 7 commits March 24, 2025 08:09

Rename theme options

13bf507

Update snapshot tests

0b3e4cb

Merge branch 'antonis/4358-Feedback-Form-Autoinject-Button' into anto…

0f3faa2

…nis/feedback-theme

Add theme integration options

522e24f

Adds changelog

110069c

Add comment note

3bd4682

Align with JS api

183796c

antonis marked this pull request as ready for review March 24, 2025 17:32

antonis requested review from krystofwoldrich and lucas-zimerman as code owners March 24, 2025 17:32

krystofwoldrich reviewed Mar 26, 2025

View reviewed changes

packages/core/src/js/feedback/FeedbackWidget.styles.ts Outdated Show resolved Hide resolved

krystofwoldrich reviewed Mar 26, 2025

View reviewed changes

packages/core/src/js/feedback/integration.ts Outdated Show resolved Hide resolved

krystofwoldrich reviewed Mar 26, 2025

View reviewed changes

packages/core/src/js/feedback/FeedbackWidget.theme.ts Outdated Show resolved Hide resolved

antonis added 6 commits March 27, 2025 11:17

Merge branch 'antonis/4358-Feedback-Form-Autoinject-Button' into anto…

c05fc5f

…nis/feedback-theme # Conflicts: # CHANGELOG.md

Add accentBackground and accentForeground colors

c831eee

Extract integration getter in a helper function

6e7b61b

Merge branch 'antonis/4358-Feedback-Form-Autoinject-Button' into anto…

0a37f7f

…nis/feedback-theme # Conflicts: # CHANGELOG.md

Adds dynamic theming support

7a331b6

Add snapshot tests

6c63d03

antonis requested a review from krystofwoldrich March 28, 2025 14:13

feat(feedback): Add theming #4677

Are you sure you want to change the base?

feat(feedback): Add theming #4677

Conversation

antonis commented Mar 21, 2025 • edited Loading

📢 Type of change

📜 Description

💡 Motivation and Context

💚 How did you test it?

📝 Checklist

🔮 Next steps

github-actions bot commented Mar 21, 2025 • edited Loading

github-actions bot commented Mar 21, 2025 • edited Loading

Android (legacy) Performance metrics 🚀

Baseline results on branch: antonis/4358-Feedback-Form-Autoinject-Button

Startup times

App size

Previous results on branch: antonis/feedback-theme

Startup times

App size

github-actions bot commented Mar 21, 2025 • edited Loading

Android (new) Performance metrics 🚀

Baseline results on branch: antonis/4358-Feedback-Form-Autoinject-Button

Startup times

App size

Previous results on branch: antonis/feedback-theme

Startup times

App size

github-actions bot commented Mar 21, 2025 • edited Loading

iOS (legacy) Performance metrics 🚀

Baseline results on branch: antonis/4358-Feedback-Form-Autoinject-Button

Startup times

App size

Previous results on branch: antonis/feedback-theme

Startup times

App size

github-actions bot commented Mar 21, 2025 • edited Loading

iOS (new) Performance metrics 🚀

Baseline results on branch: antonis/4358-Feedback-Form-Autoinject-Button

Startup times

App size

Previous results on branch: antonis/feedback-theme

Startup times

App size

krystofwoldrich Mar 26, 2025

Choose a reason for hiding this comment

antonis Mar 27, 2025

Choose a reason for hiding this comment

krystofwoldrich Mar 27, 2025

Choose a reason for hiding this comment

antonis Mar 28, 2025 • edited Loading

Choose a reason for hiding this comment

krystofwoldrich commented Mar 26, 2025

antonis commented Mar 28, 2025

antonis commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading

antonis Mar 28, 2025 •

edited

Loading