diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte index 497412c64..232068cce 100644 --- a/packages/web/src/Screen.svelte +++ b/packages/web/src/Screen.svelte @@ -12,6 +12,7 @@ visibleCommandPalette, visibleTitleBar, visibleToolbar, + getSystemTheme, } from './stores'; import TabsPanel from './tabpanel/TabsPanel.svelte'; import TabRegister from './tabpanel/TabRegister.svelte'; @@ -50,7 +51,7 @@
e.preventDefault()} diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte index e91874400..a4fb4eca9 100644 --- a/packages/web/src/settings/SettingsModal.svelte +++ b/packages/web/src/settings/SettingsModal.svelte @@ -28,6 +28,8 @@ selectedWidget, lockedDatabaseMode, visibleWidgetSideBar, + currentTheme, + getSystemTheme, } from '../stores'; import { isMac } from '../utility/common'; import getElectron from '../utility/getElectron'; @@ -280,6 +282,32 @@ ORDER BY
Application theme
+ + { + if ($currentTheme) { + $currentTheme = null; + } else { + $currentTheme = getSystemTheme(); + } + }, + }} + > + { + if (e.target['checked']) { + $currentTheme = null; + } else { + $currentTheme = getSystemTheme(); + } + }} + /> + +
{#each $extensions.themes as theme} @@ -495,16 +523,12 @@ ORDER BY label="Folder with mysql plugins (for example for authentication). Set only in case of problems" defaultValue="" /> - - + diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts index fbcb73cb2..45a7ce616 100644 --- a/packages/web/src/stores.ts +++ b/packages/web/src/stores.ts @@ -26,15 +26,19 @@ export interface TabDefinition { focused?: boolean; } -function getSystemTheme() { +export function getSystemTheme() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light'; } -export function writableWithStorage(defaultValue: T, storageName) { +export function writableWithStorage(defaultValue: T, storageName, removeCondition?: (value: T) => boolean) { const init = localStorage.getItem(storageName); const res = writable(init ? safeJsonParse(init, defaultValue, true) : defaultValue); res.subscribe(value => { - localStorage.setItem(storageName, JSON.stringify(value)); + if (removeCondition && removeCondition(value)) { + localStorage.removeItem(storageName); + } else { + localStorage.setItem(storageName, JSON.stringify(value)); + } }); return res; } @@ -104,8 +108,8 @@ export const extensions = writable(null); export const visibleCommandPalette = writable(null); export const commands = writable({}); export const currentTheme = getElectron() - ? writableSettingsValue(getSystemTheme(), 'currentTheme') - : writableWithStorage(getSystemTheme(), 'currentTheme'); + ? writableSettingsValue(null, 'currentTheme') + : writableWithStorage(null, 'currentTheme', x => x == null); export const currentEditorTheme = getElectron() ? writableSettingsValue(null, 'currentEditorTheme') : writableWithStorage(null, 'currentEditorTheme'); @@ -197,12 +201,21 @@ export const connectionAppObjectSearchSettings = writableWithStorage( 'connectionAppObjectSearchSettings2' ); -export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) => - $extensions?.themes?.find(x => x.themeClassName == $currentTheme) -); +let currentThemeValue = null; +currentTheme.subscribe(value => { + currentThemeValue = 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); +}); currentThemeDefinition.subscribe(value => { - if (value?.themeType) { + if (value?.themeType && getCurrentTheme()) { localStorage.setItem('currentThemeType', value?.themeType); + } else { + localStorage.removeItem('currentThemeType'); } }); export const openedConnectionsWithTemporary = derived( diff --git a/packages/web/src/widgets/AdminPremiumPromoWidget.svelte b/packages/web/src/widgets/AdminPremiumPromoWidget.svelte index a26f494a6..b7560eeb8 100644 --- a/packages/web/src/widgets/AdminPremiumPromoWidget.svelte +++ b/packages/web/src/widgets/AdminPremiumPromoWidget.svelte @@ -14,6 +14,7 @@
  • Compare database models
  • Synchronize database structure
  • Backup & restore database
  • +
  • Advanced ER diagram settings
  • Export database model
  • AI assistant
  • libSQL, Turso, CosmosDB, Redshift support