Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: dark menubar color on modal (#13102)

Browse source
This commit is contained in:
Michael Geers 2024-03-22 22:55:37 +01:00 • committed by GitHub
parent 67fa7c5d89
commit 8370a3cde9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/js/components/Site.vue
View file

@ -103,10 +103,10 @@ export default {
},
computed: {
batteryConfigured: function () {
return this.battery?.length;
return this.battery?.length > 0;
},
pvConfigured: function () {
return this.pv?.length;
return this.pv?.length > 0;
},
energyflow: function () {
return this.collectProps(Energyflow);

36
assets/js/theme.js
View file

@ -23,19 +23,27 @@ export function setThemePreference(theme) {
updateTheme();
}
function updateTheme() {
let theme = getThemePreference();
if (theme === THEME_AUTO) {
theme = darkModeMatcher?.matches ? THEME_DARK : THEME_LIGHT;
}
// update iOS title bar color
function setMetaThemeColor(theme) {
const themeColors = { light: "#f3f3f7", dark: "#020318" };
const $metaThemeColor = document.querySelector("meta[name=theme-color]");
if ($metaThemeColor) {
$metaThemeColor.setAttribute("content", themeColors[theme]);
}
}
function getCurrentTheme() {
let theme = getThemePreference();
if (theme === THEME_AUTO) {
theme = darkModeMatcher?.matches ? THEME_DARK : THEME_LIGHT;
}
return theme;
}
function updateTheme() {
const theme = getCurrentTheme();
// update iOS title bar color
setMetaThemeColor(theme);
// toggle the class on html root
const $html = document.querySelector("html");
@ -46,7 +54,19 @@ function updateTheme() {
}, 100);
}
function updateMetaThemeForBackdrop() {
const $backdrop = document.querySelector("[data-bs-backdrop=true][aria-modal=true]");
// dark if there is a backdrop, otherwise use the current theme
const theme = $backdrop ? THEME_DARK : getCurrentTheme();
console.log("backdrop", theme);
setMetaThemeColor(theme);
}
export function watchThemeChanges() {
darkModeMatcher?.addEventListener("change", updateTheme);
updateTheme();
// listen for modal backdrops
document.addEventListener("shown.bs.modal", updateMetaThemeForBackdrop);
document.addEventListener("hidden.bs.modal", updateMetaThemeForBackdrop);
}