dark theme detect, startup with dark theme

packages/web/src/stores.ts

@@ -26,6 +26,10 @@ export interface TabDefinition {
   focused?: boolean;
 }
 
+function getSystemTheme() {
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light';
+}
+
 export function writableWithStorage<T>(defaultValue: T, storageName) {
   const init = localStorage.getItem(storageName);
   const res = writable<T>(init ? safeJsonParse(init, defaultValue, true) : defaultValue);
@@ -100,8 +104,8 @@ export const extensions = writable<ExtensionsDirectory>(null);
 export const visibleCommandPalette = writable(null);
 export const commands = writable({});
 export const currentTheme = getElectron()
-  ? writableSettingsValue('theme-light', 'currentTheme')
-  : writableWithStorage('theme-light', 'currentTheme');
+  ? writableSettingsValue(getSystemTheme(), 'currentTheme')
+  : writableWithStorage(getSystemTheme(), 'currentTheme');
 export const currentEditorTheme = getElectron()
   ? writableSettingsValue(null, 'currentEditorTheme')
   : writableWithStorage(null, 'currentEditorTheme');
@@ -194,8 +198,13 @@ export const connectionAppObjectSearchSettings = writableWithStorage(
 );
 
 export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) =>
-  $extensions.themes.find(x => x.themeClassName == $currentTheme)
+  $extensions?.themes?.find(x => x.themeClassName == $currentTheme)
 );
+currentThemeDefinition.subscribe(value => {
+  if (value?.themeType) {
+    localStorage.setItem('currentThemeType', value?.themeType);
+  }
+});
 export const openedConnectionsWithTemporary = derived(
   [openedConnections, temporaryOpenedConnections, openedSingleDatabaseConnections],
   ([$openedConnections, $temporaryOpenedConnections, $openedSingleDatabaseConnections]) =>

packages/web/src/widgets/AppStartInfo.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   export let message;
+
+  const isDark =
+    localStorage.getItem('currentThemeType') === 'dark' ||
+    (!localStorage.getItem('currentThemeType') &&
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
 </script>
 
-<div class="starting-dbgate">
+<div class="starting-dbgate" class:isDark>
   <div class="inner-flex">
     <div class="lds-ellipsis">
       <div />
@@ -15,21 +21,34 @@
 </div>
 
 <style>
+  @media (prefers-color-scheme: dark) {
+    #starting-dbgate {
+      background-color: #111;
+      color: #e3e3e3;
+    }
+  }
   .lds-ellipsis {
     display: inline-block;
     position: relative;
     width: 80px;
     height: 80px;
   }
+  .isDark {
+    background-color: #111;
+    color: #e3e3e3;
+  }
   .lds-ellipsis div {
     position: absolute;
     top: 33px;
     width: 13px;
     height: 13px;
     border-radius: 50%;
-    background: #000;
+    background: #262626;
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
   }
+  .isDark .lds-ellipsis div {
+    background: #e3e3e3;
+  }
   .lds-ellipsis div:nth-child(1) {
     left: 8px;
     animation: lds-ellipsis1 0.6s infinite;