mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-25 06:35:45 +02:00
🔀 Merge pull request #1770 from vishwamartur/add-auto-theme-switch
Add auto dark/light theme switch based on OS preference Fixes #825
This commit is contained in:
commit
a03047693f
10
src/App.vue
10
src/App.vue
@ -155,11 +155,21 @@ export default {
|
||||
e.preventDefault();
|
||||
return 'You may have unsaved edits. Are you sure you want to exit the page?';
|
||||
},
|
||||
/* Detect and apply theme based on OS preference */
|
||||
applyThemeBasedOnOSPreference() {
|
||||
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const osTheme = prefersDark ? this.appConfig.nightTheme : this.appConfig.dayTheme;
|
||||
if (osTheme) {
|
||||
this.$store.commit(Keys.SET_THEME, osTheme);
|
||||
this.updateTheme(osTheme);
|
||||
}
|
||||
},
|
||||
},
|
||||
/* Basic initialization tasks on app load */
|
||||
async mounted() {
|
||||
await this.$store.dispatch(Keys.INITIALIZE_CONFIG); // Initialize config before moving on
|
||||
this.applyLanguage(); // Apply users local language
|
||||
this.applyThemeBasedOnOSPreference(); // Apply theme based on OS preference
|
||||
this.hideSplash(); // Hide the splash screen, if visible
|
||||
if (this.appConfig.customCss) { // Inject users custom CSS, if present
|
||||
const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
|
||||
|
@ -136,6 +136,14 @@ const ThemingMixin = {
|
||||
} else if (hasExternal) {
|
||||
this.applyRemoteTheme(this.externalThemes[initialTheme]);
|
||||
}
|
||||
|
||||
// Detect OS theme preference and apply the corresponding theme
|
||||
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const osTheme = prefersDark ? this.appConfig.nightTheme : this.appConfig.dayTheme;
|
||||
if (osTheme) {
|
||||
this.$store.commit(Keys.SET_THEME, osTheme);
|
||||
this.updateTheme(osTheme);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user