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

* use same function as the change theme keybindings

* rename toggleTheme service to just theme

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/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.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { isIconName, NavModelItem } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { Icon } from '@grafana/ui';
+import { changeTheme } from 'app/core/services/theme';
 
 const SECTION_PAGES = 'Pages';
 const SECTION_ACTIONS = 'Actions';
@@ -82,10 +83,7 @@ export default (navBarTree: NavModelItem[]) => {
       name: 'Dark',
       keywords: 'dark theme',
       section: '',
-      perform: () => {
-        locationService.push({ search: '?theme=dark' });
-        location.reload();
-      },
+      perform: () => changeTheme('dark'),
       parent: 'preferences/theme',
     },
     {
@@ -93,10 +91,7 @@ export default (navBarTree: NavModelItem[]) => {
       name: 'Light',
       keywords: 'light theme',
       section: '',
-      perform: () => {
-        locationService.push({ search: '?theme=light' });
-        location.reload();
-      },
+      perform: () => changeTheme('light'),
       parent: 'preferences/theme',
     },
   ];