dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-28 18:46:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

real-time system theme switch #1084

Browse Source
This commit is contained in:
SPRINX0\prochazka
2025-04-02 10:52:17 +02:00
parent 8b1da33ffe
commit 68ef50ca46
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/web/src/stores.ts
View File

@@ -26,8 +26,18 @@ export interface TabDefinition {
focused?: boolean;
}
const darkModeMediaQuery = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
const systemThemeStore = writable(darkModeMediaQuery?.matches ? 'theme-dark' : 'theme-light');
if (darkModeMediaQuery) {
darkModeMediaQuery.addEventListener('change', e => {
systemThemeStore.set(e.matches ? 'theme-dark' : 'theme-light');
});
}
export function getSystemTheme() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light';
return darkModeMediaQuery?.matches ? 'theme-dark' : 'theme-light';
}
export function writableWithStorage<T>(defaultValue: T, storageName, removeCondition?: (value: T) => boolean) {
@@ -207,10 +217,13 @@ currentTheme.subscribe(value => {
});
export const getCurrentTheme = () => currentThemeValue;
export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) => {
const usedTheme = $currentTheme ?? getSystemTheme();
return $extensions?.themes?.find(x => x.themeClassName == usedTheme);
});
export const currentThemeDefinition = derived(
[currentTheme, extensions, systemThemeStore],
([$currentTheme, $extensions, $systemTheme]) => {
const usedTheme = $currentTheme ?? $systemTheme;
return $extensions?.themes?.find(x => x.themeClassName == usedTheme);
}
);
currentThemeDefinition.subscribe(value => {
if (value?.themeType && getCurrentTheme()) {
localStorage.setItem('currentThemeType', value?.themeType);