kanshan/megrez
1
0
Fork 0
mirror of https://github.com/XShengTech/MEGREZ.git synced 2026-01-14 09:07:16 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Feat] ✨ Add Auto Dark Mode

Browse Source
This commit is contained in:
Harry-zklcdc 2025-03-17 13:39:20 +08:00
parent 42de9caf52
commit a24fb8e8ad
1 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/layout/composables/layout.js
View File

@ -4,10 +4,36 @@ const layoutConfig = reactive({
preset: 'Aura',
primary: 'blue',
surface: null,
darkTheme: false,
darkTheme: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
menuMode: 'static'
});
// Listen for changes to the prefers-color-scheme media query
if (window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
layoutConfig.darkTheme = e.matches;
toggleDarkMode();
});
}
const toggleDarkMode = () => {
if (!document.startViewTransition) {
executeDarkModeToggle();
return;
}
document.startViewTransition(() => executeDarkModeToggle(event));
};
if (layoutConfig.darkTheme) {
toggleDarkMode()
}
const executeDarkModeToggle = () => {
layoutConfig.darkTheme = !layoutConfig.darkTheme;
document.documentElement.classList.toggle('app-dark');
};
const layoutState = reactive({
staticMenuDesktopInactive: false,
overlayMenuActive: false,
@ -39,21 +65,6 @@ export function useLayout() {
layoutConfig.menuMode = mode;
};
const toggleDarkMode = () => {
if (!document.startViewTransition) {
executeDarkModeToggle();
return;
}
document.startViewTransition(() => executeDarkModeToggle(event));
};
const executeDarkModeToggle = () => {
layoutConfig.darkTheme = !layoutConfig.darkTheme;
document.documentElement.classList.toggle('app-dark');
};
const onMenuToggle = () => {
if (layoutConfig.menuMode === 'overlay') {
layoutState.overlayMenuActive = !layoutState.overlayMenuActive;