IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Preferences: Add theme preference to match system theme (#61986)

Browse Source 
* user essentials mob! 🔱

lastFile:pkg/api/preferences.go

* user essentials mob! 🔱

* user essentials mob! 🔱

lastFile:packages/grafana-data/src/types/config.ts

* user essentials mob! 🔱

lastFile:public/app/core/services/echo/utils.test.ts

* user essentials mob! 🔱

* user essentials mob! 🔱

lastFile:public/views/index-template.html

* user essentials mob! 🔱

* Restore currentUser.lightTheme for backwards compat

* fix types

* Apply suggestions from code review

Co-authored-by: Christopher Moyer <35463610+chri2547@users.noreply.github.com>

* cleanup

* cleanup

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: Christopher Moyer <35463610+chri2547@users.noreply.github.com>
This commit is contained in:
Josh Hunt
2023-01-30 09:51:51 +00:00
committed by GitHub
parent be7b90bbd1
commit d51e7ec7ef
18 changed files with 79 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-data/src/types/config.ts
View File

@@ -117,7 +117,7 @@ export interface CurrentUserDTO {
login: string;
email: string;
name: string;
lightTheme: boolean;
theme: string; // dark | light | system
orgCount: number;
orgId: number;
orgName: string;
@@ -129,6 +129,9 @@ export interface CurrentUserDTO {
locale: string;
language: string;
permissions?: Record<string, boolean>;
/** @deprecated Use theme instead */
lightTheme: boolean;
}
/** Contains essential user and config info

17
packages/grafana-runtime/src/config.ts
View File

@@ -149,6 +149,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
constructor(options: GrafanaBootConfig) {
this.bootData = options.bootData;
this.bootData.user.lightTheme = getThemeMode(options) === 'light';
this.isPublicDashboardView = options.bootData.settings.isPublicDashboardView;
const defaults = {
@@ -189,8 +190,24 @@ export class GrafanaBootConfig implements GrafanaConfig {
}
}
function getThemeMode(config: GrafanaBootConfig) {
let mode: 'light' | 'dark' = 'dark';
const themePref = config.bootData.user.theme;
if (themePref === 'light' || themePref === 'dark') {
mode = themePref;
} else if (themePref === 'system') {
const mediaResult = window.matchMedia('(prefers-color-scheme: dark)');
mode = mediaResult.matches ? 'dark' : 'light';
}
return mode;
}
function getThemeCustomizations(config: GrafanaBootConfig) {
// if/when we remove CurrentUserDTO.lightTheme, change this to use getThemeMode instead
const mode = config.bootData.user.lightTheme ? 'light' : 'dark';
const themeOptions: NewThemeOptions = {
colors: { mode },
};