🔀 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:
Alicia Sykes 2025-07-19 06:07:09 +01:00 committed by GitHub
commit a03047693f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 0 deletions

View File

@ -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, '');

View File

@ -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);
}
},
},
};