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

23
public/views/index-template.html
View File

@@ -14,9 +14,10 @@
<link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]" />
<link rel="mask-icon" href="[[.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28" />
<!-- If theme is "system", we inject the stylesheets with javascript further down the page -->
[[ if eq .Theme "light" ]]
<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/<%= htmlWebpackPlugin.files.cssChunks.light %>" />
[[ else ]]
[[ else if eq .Theme "dark" ]]
<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/<%= htmlWebpackPlugin.files.cssChunks.dark %>" />
[[ end ]]
@@ -251,6 +252,26 @@
}
};
// Set theme to match system only on startup.
// Do not react to changes in system theme after startup.
if (window.grafanaBootData.user.theme === "system") {
document.body.classList.remove("theme-system");
var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
var cssLink = document.createElement("link");
cssLink.rel = 'stylesheet';
if (darkQuery.matches) {
document.body.classList.add("theme-dark");
cssLink.href = window.grafanaBootData.themePaths.dark;
window.grafanaBootData.user.lightTheme = false;
} else {
document.body.classList.add("theme-light");
cssLink.href = window.grafanaBootData.themePaths.light;
window.grafanaBootData.user.lightTheme = true;
}
document.head.appendChild(cssLink);
}
window.__grafana_load_failed = function() {
var preloader = document.getElementsByClassName("preloader");
if (preloader.length) {