ability to use dark mode from system #1084

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 @@
 </div>
 
 <div
-  class={`${$currentTheme} ${currentThemeType} root dbgate-screen`}
+  class={`${$currentTheme ?? getSystemTheme()} ${currentThemeType} root dbgate-screen`}
   class:isElectron
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}

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
 
         <svelte:fragment slot="3">
           <div class="heading">Application theme</div>
+
+          <FormFieldTemplateLarge
+            label="Use system theme"
+            type="checkbox"
+            labelProps={{
+              onClick: () => {
+                if ($currentTheme) {
+                  $currentTheme = null;
+                } else {
+                  $currentTheme = getSystemTheme();
+                }
+              },
+            }}
+          >
+            <CheckboxField
+              checked={!$currentTheme}
+              on:change={e => {
+                if (e.target['checked']) {
+                  $currentTheme = null;
+                } else {
+                  $currentTheme = getSystemTheme();
+                }
+              }}
+            />
+          </FormFieldTemplateLarge>
+
           <div class="themes">
             {#each $extensions.themes as theme}
               <ThemeSkeleton {theme} />
@@ -495,16 +523,12 @@ ORDER BY
             label="Folder with mysql plugins (for example for authentication). Set only in case of problems"
             defaultValue=""
           />
-         <FormTextField
+          <FormTextField
             name="externalTools.pg_dump"
             label="pg_dump (backup PostgreSQL database)"
             defaultValue="pg_dump"
           />
-          <FormTextField
-            name="externalTools.psql"
-            label="psql (restore PostgreSQL database)"
-            defaultValue="psql"
-          />
+          <FormTextField name="externalTools.psql" label="psql (restore PostgreSQL database)" defaultValue="psql" />
         </svelte:fragment>
       </TabControl>
     </FormValues>

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<T>(defaultValue: T, storageName) {
+export function writableWithStorage<T>(defaultValue: T, storageName, removeCondition?: (value: T) => boolean) {
   const init = localStorage.getItem(storageName);
   const res = writable<T>(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<ExtensionsDirectory>(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(

packages/web/src/widgets/AdminPremiumPromoWidget.svelte

@@ -14,6 +14,7 @@
     <li>Compare database models</li>
     <li>Synchronize database structure</li>
     <li>Backup &amp; restore database</li>
+    <li>Advanced ER diagram settings</li>
     <li>Export database model</li>
     <li>AI assistant</li>
     <li>libSQL, Turso, CosmosDB, Redshift support</li>