From d3703273c0ae55793f58d16cfdd1176f00d6f46a Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 12 Dec 2022 14:53:29 +0000
Subject: [PATCH] Command Palette: Maintain page state when changing theme
 (#59787) (#59841)

* use same function as the change theme keybindings

* rename toggleTheme service to just theme

(cherry picked from commit 46adfb596ddb09e6d003e4845eb4a3be6473f8f6)
---
 public/app/core/services/keybindingSrv.ts             |  2 +-
 public/app/core/services/{toggleTheme.ts => theme.ts} | 10 +++++++---
 .../commandPalette/actions/global.static.actions.ts   | 11 +++--------
 3 files changed, 11 insertions(+), 12 deletions(-)
 rename public/app/core/services/{toggleTheme.ts => theme.ts} (90%)

diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
index 3920e53eb61..39d935f07fc 100644
--- a/public/app/core/services/keybindingSrv.ts
+++ b/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 {
diff --git a/public/app/core/services/toggleTheme.ts b/public/app/core/services/theme.ts
similarity index 90%
rename from public/app/core/services/toggleTheme.ts
rename to public/app/core/services/theme.ts
index ee274847ce9..98d91b3837d 100644
--- a/public/app/core/services/toggleTheme.ts
+++ b/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);
+}
diff --git a/public/app/features/commandPalette/actions/global.static.actions.ts b/public/app/features/commandPalette/actions/global.static.actions.ts
index 7fb13a30a0f..ccc9269413c 100644
--- a/public/app/features/commandPalette/actions/global.static.actions.ts
+++ b/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,10 +41,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',
     },
     {
@@ -51,10 +49,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',
     },
   ];