The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
grafana/public/app/core/services/toggleTheme.ts

55 lines
1.6 KiB

import { createTheme } from '@grafana/data';
import { ThemeChangedEvent } from '@grafana/runtime';
import appEvents from '../app_events';
import { config } from '../config';
import { contextSrv } from '../core';
import { PreferencesService } from './PreferencesService';
export async function toggleTheme(runtimeOnly: boolean) {
const currentTheme = config.theme;
const newTheme = createTheme({
colors: {
mode: currentTheme.isDark ? 'light' : 'dark',
},
});
appEvents.publish(new ThemeChangedEvent(newTheme));
if (runtimeOnly) {
return;
}
// Add css file for new theme
const newCssLink = document.createElement('link');
newCssLink.rel = 'stylesheet';
newCssLink.href = config.bootData.themePaths[newTheme.colors.mode];
document.body.appendChild(newCssLink);
// 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 (!contextSrv.isSignedIn) {
return;
}
// Persist new theme
const service = new PreferencesService('user');
const currentPref = await service.load();
await service.update({
...currentPref,
theme: newTheme.colors.mode,
});
}