IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Document theme toggle keybinding (#59031)

Browse Source 
* make theme toggle keybinding dev only

* fix bug + add support for theme change keybinding
This commit is contained in:
Ashley Harrison 2022-11-22 14:01:51 +00:00 committed by GitHub
parent 42baad837a
commit 6f26668a9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/components/help/HelpModal.tsx
View File

@ -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' },

4
public/app/core/services/keybindingSrv.ts
View File

@ -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());

28
public/app/core/services/toggleTheme.ts
View File

@ -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;

1
public/app/features/commandPalette/actions/global.static.actions.ts
View File

@ -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',