Command Palette: Maintain page state when changing theme (#59787) (#5…

…9841)

* use same function as the change theme keybindings

* rename toggleTheme service to just theme

(cherry picked from commit 46adfb5)

public/app/core/services/keybindingSrv.ts

@@ -24,7 +24,7 @@ import { AppChromeService } from '../components/AppChrome/AppChromeService';
 import { HelpModal } from '../components/help/HelpModal';
 import { contextSrv } from '../core';
 
-import { toggleTheme } from './toggleTheme';
+import { toggleTheme } from './theme';
 import { withFocusedPanel } from './withFocusedPanelId';
 
 export class KeybindingSrv {

public/app/core/services/toggleTheme.ts → public/app/core/services/theme.ts

@@ -7,11 +7,10 @@ import { contextSrv } from '../core';
 
 import { PreferencesService } from './PreferencesService';
 
-export async function toggleTheme(runtimeOnly: boolean) {
-  const currentTheme = config.theme2;
+export async function changeTheme(mode: 'dark' | 'light', runtimeOnly?: boolean) {
   const newTheme = createTheme({
     colors: {
-      mode: currentTheme.isDark ? 'light' : 'dark',
+      mode: mode,
     },
   });
 
@@ -55,3 +54,8 @@ export async function toggleTheme(runtimeOnly: boolean) {
     theme: newTheme.colors.mode,
   });
 }
+
+export async function toggleTheme(runtimeOnly: boolean) {
+  const currentTheme = config.theme2;
+  changeTheme(currentTheme.isDark ? 'light' : 'dark', runtimeOnly);
+}

public/app/features/commandPalette/actions/global.static.actions.ts

@@ -3,6 +3,7 @@ import { flatMapDeep } from 'lodash';
 
 import { NavModelItem } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
+import { changeTheme } from 'app/core/services/theme';
 
 import { alertingCommandPaletteStaticActions } from './alerting.static.actions';
 
@@ -40,21 +41,15 @@ export default (navBarTree: NavModelItem[]) => {
       name: 'Dark',
       keywords: 'dark theme',
       section: '',
-      perform: () => {
-        locationService.push({ search: '?theme=dark' });
-        location.reload();
-      },
+      perform: () => changeTheme('dark'),
       parent: 'preferences/theme',
     },
     {
       id: 'preferences/light-theme',
       name: 'Light',
       keywords: 'light theme',
       section: '',
-      perform: () => {
-        locationService.push({ search: '?theme=light' });
-        location.reload();
-      },
+      perform: () => changeTheme('light'),
       parent: 'preferences/theme',
     },
   ];