Pass theme colours to Widget Preview on querystring in the same format as DevTools #5702

Activity

1. DanTup

   added this to the v3.120.0 milestone on Sep 16, 2025
2. DanTup

   added

   is enhancementAn enhancement or improvement that should be listed in release notes but is not a bug fix.An enhancement or improvement that should be listed in release notes but is not a bug fix.

   in flutterRelates to running Flutter appsRelates to running Flutter apps

   in flutter widget previewRelates to the embedded Flutter widget previewRelates to the embedded Flutter widget preview

   on Sep 16, 2025
3. DanTup commented on Sep 17, 2025

   

   DanTup

   on Sep 17, 2025

   MemberAuthor

   More actions

   @bkonyi for DevTools, we support sending updated theme info via postMessage so that if the VS Code theme changes, we can update DevTools without refreshing and losing any state. Should we do the same here?

   eg. we pass on QS for initial load, but then postMessage for updates:

   function sendTheme() {
   	const devToolsFrame = document.getElementById('devToolsFrame');
   	const theme = getTheme();
   	devToolsFrame.contentWindow.postMessage({
   		method: 'editor.themeChanged',
   		params: {
   			kind: 'themeChanged',
   			theme: theme,
   		}
   	}, "*");
   }
   
   function getTheme() {
   	const isDarkMode = !document.body.classList.contains('vscode-light');
   	const backgroundColor = currentBackgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-background');
   	const foregroundColor = getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-foreground');
   
   	return {
   		isDarkMode: isDarkMode,
   		backgroundColor: backgroundColor,
   		foregroundColor: foregroundColor,
   	};
   }

   And the initial querystring looks like:

   const theme = getTheme();
   const themeKind = theme.isDarkMode ? 'dark' : 'light';
   // Don't include # in colors
   // https://github.com/flutter/flutter/issues/155992
   let url = \`\${message.urls.viewUrl}&theme=\${themeKind}&backgroundColor=\${encodeURIComponent(theme.backgroundColor?.replace('#', ''))}&foregroundColor=\${encodeURIComponent(theme.foregroundColor?.replace('#', ''))}\`;
4. DanTup

   added a commit that references this issue on Sep 22, 2025

   Pass theme info to Widget Preview + support auth frame bouncing

   ...

   2c64c81
5. DanTup commented on Sep 22, 2025

   

   DanTup

   on Sep 22, 2025

   MemberAuthor

   More actions

   Looks like there's no explicit background on the previewer, so the background from the sidebar already passes through.

   theme.mp4

   However I'm still making the change noted above, so we'll pass bg/fg colors + theme kind (dark/light) on the querystring initially, and then postMessage any changes to the frame.
6. bkonyi commented on Sep 22, 2025

   

   bkonyi

   on Sep 22, 2025

   More actions

   Ah, good catch! I didn't realize that. Either way, it'll still be good to have these colors to use for determining theming of the previewer elements.

   👍React with 👍1Reacted by Danny Tuppeny
7. DanTup commented on Sep 22, 2025

   

   DanTup

   on Sep 22, 2025

   MemberAuthor

   More actions

   It might also be useful for the user to be able to override the dark/light theme from the editor temporarily so they can review both themes without having to change their VS Code theme.
8. DanTup

   closed this as completedin #5715on Sep 22, 2025