dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-24 00:16:00 +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

4
packages/web/src/Screen.svelte
View File

@@ -12,7 +12,7 @@
visibleCommandPalette,
visibleTitleBar,
visibleToolbar,
getSystemTheme,
systemThemeStore,
} from './stores';
import TabsPanel from './tabpanel/TabsPanel.svelte';
import TabRegister from './tabpanel/TabRegister.svelte';
@@ -51,7 +51,7 @@
</div>
<div
class={`${$currentTheme ?? getSystemTheme()} ${currentThemeType} root dbgate-screen`}
class={`${$currentTheme ?? $systemThemeStore} ${currentThemeType} root dbgate-screen`}
class:isElectron
use:dragDropFileTarget
on:contextmenu={e => e.preventDefault()}

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);