Chore: Document theme toggle keybinding (#59031)

* make theme toggle keybinding dev only

* fix bug + add support for theme change keybinding

public/app/core/components/help/HelpModal.tsx

@@ -12,6 +12,7 @@ const shortcuts = {
     { keys: ['esc'], description: 'Exit edit/setting views' },
     { keys: ['h'], description: 'Show all keyboard shortcuts' },
     { keys: ['mod+k'], description: 'Open command palette' },
+    { keys: ['c', 't'], description: 'Change theme' },
   ],
   Dashboard: [
     { keys: ['mod+s'], description: 'Save dashboard' },

public/app/core/services/keybindingSrv.ts

@@ -45,8 +45,8 @@ export class KeybindingSrv {
       this.bindGlobalEsc();
     }
 
-    this.bind('t t', () => toggleTheme(false));
+    this.bind('c t', () => toggleTheme(false));
-    this.bind('t r', () => toggleTheme(true));
+    this.bind('c r', () => toggleTheme(true));
 
     if (process.env.NODE_ENV === 'development') {
       this.bind('t n', () => this.toggleNav());

public/app/core/services/toggleTheme.ts

@@ -8,7 +8,7 @@ import { contextSrv } from '../core';
 import { PreferencesService } from './PreferencesService';
 
 export async function toggleTheme(runtimeOnly: boolean) {
-  const currentTheme = config.theme;
+  const currentTheme = config.theme2;
   const newTheme = createTheme({
     colors: {
       mode: currentTheme.isDark ? 'light' : 'dark',
@@ -16,6 +16,7 @@ export async function toggleTheme(runtimeOnly: boolean) {
   });
 
   appEvents.publish(new ThemeChangedEvent(newTheme));
+  config.theme2.isDark = newTheme.isDark;
 
   if (runtimeOnly) {
     return;
@@ -25,20 +26,21 @@ export async function toggleTheme(runtimeOnly: boolean) {
   const newCssLink = document.createElement('link');
   newCssLink.rel = 'stylesheet';
   newCssLink.href = config.bootData.themePaths[newTheme.colors.mode];
-  document.body.appendChild(newCssLink);
+  newCssLink.onload = () => {
+    // Remove old css file
+    const bodyLinks = document.getElementsByTagName('link');
+    for (let i = 0; i < bodyLinks.length; i++) {
+      const link = bodyLinks[i];
 
-  // Remove old css file
+      if (link.href && link.href.includes(`build/grafana.${!newTheme.isDark ? 'dark' : 'light'}`)) {
-  const bodyLinks = document.getElementsByTagName('link');
+        // Remove existing link once the new css has loaded to avoid flickering
-  for (let i = 0; i < bodyLinks.length; i++) {
+        // If we add new css at the same time we remove current one the page will be rendered without css
-    const link = bodyLinks[i];
+        // As the new css file is loading
-
+        link.remove();
-    if (link.href && link.href.indexOf(`build/grafana.${currentTheme.type}`) > 0) {
+      }
-      // Remove existing link after a 500ms to allow new css to load to avoid flickering
-      // If we add new css at the same time we remove current one the page will be rendered without css
-      // As the new css file is loading
-      setTimeout(() => link.remove(), 500);
     }
-  }
+  };
+  document.body.appendChild(newCssLink);
 
   if (!contextSrv.isSignedIn) {
     return;

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

@@ -33,6 +33,7 @@ export default (navBarTree: NavModelItem[]) => {
       name: 'Change theme...',
       keywords: 'interface color dark light',
       section: 'Preferences',
+      shortcut: ['c', 't'],
     },
     {
       id: 'preferences/dark-theme',