diff --git a/public/app/core/components/help/HelpModal.tsx b/public/app/core/components/help/HelpModal.tsx index 6920e168ea2..9718205fad6 100644 --- a/public/app/core/components/help/HelpModal.tsx +++ b/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' }, diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 9706221a0e7..3920e53eb61 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -45,8 +45,8 @@ export class KeybindingSrv { this.bindGlobalEsc(); } - this.bind('t t', () => toggleTheme(false)); - this.bind('t r', () => toggleTheme(true)); + this.bind('c t', () => toggleTheme(false)); + this.bind('c r', () => toggleTheme(true)); if (process.env.NODE_ENV === 'development') { this.bind('t n', () => this.toggleNav()); diff --git a/public/app/core/services/toggleTheme.ts b/public/app/core/services/toggleTheme.ts index 6aeca20546a..ee274847ce9 100644 --- a/public/app/core/services/toggleTheme.ts +++ b/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 - const bodyLinks = document.getElementsByTagName('link'); - for (let i = 0; i < bodyLinks.length; i++) { - const link = bodyLinks[i]; - - 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); + if (link.href && link.href.includes(`build/grafana.${!newTheme.isDark ? 'dark' : 'light'}`)) { + // Remove existing link once the new css has loaded 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 + link.remove(); + } } - } + }; + document.body.appendChild(newCssLink); if (!contextSrv.isSignedIn) { return; diff --git a/public/app/features/commandPalette/actions/global.static.actions.ts b/public/app/features/commandPalette/actions/global.static.actions.ts index 4211a532ac3..7fb13a30a0f 100644 --- a/public/app/features/commandPalette/actions/global.static.actions.ts +++ b/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',