diff --git a/packages/components/src/theme/ThemeProvider.tsx b/packages/components/src/theme/ThemeProvider.tsx index d5d4cd1c2f..95d1bd617e 100644 --- a/packages/components/src/theme/ThemeProvider.tsx +++ b/packages/components/src/theme/ThemeProvider.tsx @@ -47,6 +47,7 @@ export function ThemeProvider({ const [selectedThemeKey, setSelectedThemeKey] = useState( () => getThemePreloadData()?.themeKey ?? DEFAULT_DARK_THEME_KEY ); + (window as any).setSelectedThemeKey = setSelectedThemeKey; // Calculate active themes once a non-null themes array is provided. const activeThemes = useMemo( diff --git a/packages/golden-layout/scss/goldenlayout-dark-theme.scss b/packages/golden-layout/scss/goldenlayout-dark-theme.scss index 6fcbcfda7c..2e17c49f7b 100644 --- a/packages/golden-layout/scss/goldenlayout-dark-theme.scss +++ b/packages/golden-layout/scss/goldenlayout-dark-theme.scss @@ -252,7 +252,12 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab { // Icon to PopOut Pane, so move it to a different Browser Window .lm_popout { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=); + // Leaving this inline since it is a PNG. We should convert it to a 16px + // SVG like other icons and move to a css variable so it can be overridden. + @include icon-image-mask( + url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII='), + auto + ); } // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container