From 46adfb596ddb09e6d003e4845eb4a3be6473f8f6 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 5 Dec 2022 16:12:56 +0000
Subject: [PATCH] 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             |  2 +-
 public/app/core/services/{toggleTheme.ts => theme.ts} | 10 +++++++---
 .../commandPalette/actions/global.static.actions.tsx  | 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.tsx b/public/app/features/commandPalette/actions/global.static.actions.tsx
index 505b89fb798..d376a93b461 100644
--- a/public/app/features/commandPalette/actions/global.static.actions.tsx
+++ b/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',
     },
   ];