diff --git a/redisinsight/ui/src/components/config/Config.tsx b/redisinsight/ui/src/components/config/Config.tsx index 010824456b..9269bf2746 100644 --- a/redisinsight/ui/src/components/config/Config.tsx +++ b/redisinsight/ui/src/components/config/Config.tsx @@ -1,15 +1,11 @@ -import { useEffect } from 'react' +import { useContext, useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useLocation } from 'react-router-dom' import { isNumber } from 'lodash' import { BrowserStorageItem, FeatureFlags, Theme } from 'uiSrc/constants' import { BuildType } from 'uiSrc/constants/env' import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting' -import { - localStorageService, - setObjectStorage, - themeService, -} from 'uiSrc/services' +import { localStorageService, setObjectStorage } from 'uiSrc/services' import { appFeatureFlagsFeaturesSelector, @@ -44,6 +40,7 @@ import { fetchProfile } from 'uiSrc/slices/oauth/cloud' import { fetchDBSettings } from 'uiSrc/slices/app/db-settings' import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { DatabaseSettingsData } from 'uiSrc/slices/interfaces' +import { ThemeContext } from 'uiSrc/contexts/themeContext' const SETTINGS_PAGE_PATH = '/settings' const Config = () => { @@ -54,6 +51,7 @@ const Config = () => { [FeatureFlags.cloudSso]: cloudSsoFeature, [FeatureFlags.envDependent]: envDependentFeature, } = useSelector(appFeatureFlagsFeaturesSelector) + const { changeTheme } = useContext(ThemeContext) const { pathname } = useLocation() const dispatch = useDispatch() @@ -211,7 +209,7 @@ const Config = () => { const checkAndSetTheme = () => { const theme = config?.theme if (theme && localStorageService.get(BrowserStorageItem.theme) !== theme) - themeService.applyTheme(theme as Theme) + changeTheme(theme) } return null diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx index 8ec8389d3c..62eae330a2 100644 --- a/redisinsight/ui/src/contexts/themeContext.tsx +++ b/redisinsight/ui/src/contexts/themeContext.tsx @@ -26,6 +26,14 @@ interface Props { const THEME_NAMES = THEMES.map(({ value }) => value) +const getQueryTheme = () => { + const queryThemeParam = new URLSearchParams(window.location.search) + .get('theme') + ?.toUpperCase() + + return THEMES.find(({ value }) => value === queryThemeParam)?.value +} + export const defaultState = { theme: DEFAULT_THEME || Theme.System, usingSystemTheme: @@ -41,14 +49,20 @@ export class ThemeProvider extends React.Component { constructor(props: any) { super(props) + const queryTheme = getQueryTheme() const storedThemeValue = localStorageService.get(BrowserStorageItem.theme) - const theme = - !storedThemeValue || !THEME_NAMES.includes(storedThemeValue) - ? defaultState.theme - : storedThemeValue + + let theme = defaultState.theme + + if (queryTheme) { + theme = queryTheme + } else if (storedThemeValue && THEME_NAMES.includes(storedThemeValue)) { + theme = storedThemeValue + } + const usingSystemTheme = theme === Theme.System - themeService.applyTheme(theme) + themeService.applyTheme(theme as Theme) this.state = { theme: theme === Theme.System ? this.getSystemTheme() : theme,