dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-01 03:53:57 +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, visibleCommandPalette,
visibleTitleBar, visibleTitleBar,
visibleToolbar, visibleToolbar,
getSystemTheme, systemThemeStore,
} from './stores'; } from './stores';
import TabsPanel from './tabpanel/TabsPanel.svelte'; import TabsPanel from './tabpanel/TabsPanel.svelte';
import TabRegister from './tabpanel/TabRegister.svelte'; import TabRegister from './tabpanel/TabRegister.svelte';
@@ -51,7 +51,7 @@
</div> </div>
<div <div
class={`${$currentTheme ?? getSystemTheme()} ${currentThemeType} root dbgate-screen`} class={`${$currentTheme ?? $systemThemeStore} ${currentThemeType} root dbgate-screen`}
class:isElectron class:isElectron
use:dragDropFileTarget use:dragDropFileTarget
on:contextmenu={e => e.preventDefault()} on:contextmenu={e => e.preventDefault()}

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

@@ -26,8 +26,18 @@ export interface TabDefinition {
focused?: boolean; 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() { 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) { export function writableWithStorage<T>(defaultValue: T, storageName, removeCondition?: (value: T) => boolean) {
@@ -207,10 +217,13 @@ currentTheme.subscribe(value => {
}); });
export const getCurrentTheme = () => currentThemeValue; export const getCurrentTheme = () => currentThemeValue;
export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) => { export const currentThemeDefinition = derived(
const usedTheme = $currentTheme ?? getSystemTheme(); [currentTheme, extensions, systemThemeStore],
return $extensions?.themes?.find(x => x.themeClassName == usedTheme); ([$currentTheme, $extensions, $systemTheme]) => {
}); const usedTheme = $currentTheme ?? $systemTheme;
return $extensions?.themes?.find(x => x.themeClassName == usedTheme);
}
);
currentThemeDefinition.subscribe(value => { currentThemeDefinition.subscribe(value => {
if (value?.themeType && getCurrentTheme()) { if (value?.themeType && getCurrentTheme()) {
localStorage.setItem('currentThemeType', value?.themeType); localStorage.setItem('currentThemeType', value?.themeType);