theme switcher + svelte upgrade

packages/web/src/settings/SettingsModal.svelte

@@ -11,7 +11,9 @@
 
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
+  import { extensions } from '../stores';
   import getElectron from '../utility/getElectron';
+  import ThemeSkeleton from './ThemeSkeleton.svelte';
 
   const electron = getElectron();
   let restartWarning = false;
@@ -70,6 +72,14 @@
             disabled={values['connection.autoRefresh'] === false}
           />
         </svelte:fragment>
+        <svelte:fragment slot="2">
+          <div class="heading">Application theme</div>
+          <div class="themes">
+            {#each $extensions.themes as theme}
+              <ThemeSkeleton {theme} />
+            {/each}
+          </div>
+        </svelte:fragment>
       </TabControl>
     </FormValues>
 
@@ -87,4 +97,9 @@
     margin-left: var(--dim-large-form-margin);
     margin-top: var(--dim-large-form-margin);
   }
+
+  .themes {
+    overflow-x: scroll;
+    display: flex;
+  }
 </style>

packages/web/src/settings/ThemeSkeleton.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { ThemeDefinition } from 'dbgate-types';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { currentTheme } from '../stores';
+
+  export let theme: ThemeDefinition;
+  // export let theme;
+
+  function getThemeStyle(val: ThemeDefinition) {
+    return `<style id="themePlugin">${val.themeCss}</style>`;
+  }
+</script>
+
+{#if theme.themeCss}
+  {@html getThemeStyle(theme)}
+{/if}
+
+<div
+  style={theme?.themeCss || ''}
+  class={`container ${theme.themeClassName}`}
+  on:click={() => {
+    $currentTheme = theme.themeClassName;
+  }}
+>
+  <div class="iconbar">
+    <div class="icon">
+      <FontIcon icon="icon database" />
+    </div>
+    <div class="icon"><FontIcon icon="icon file" /></div>
+    <div class="icon"><FontIcon icon="icon history" /></div>
+    <div class="icon"><FontIcon icon="icon archive" /></div>
+    <div class="icon"><FontIcon icon="icon plugin" /></div>
+  </div>
+
+  <div class="titlebar" />
+
+  <div class="content">
+    <div class:current={$currentTheme == theme.themeClassName}>
+      {theme.themeName}
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    position: relative;
+    height: 150px;
+    width: 200px;
+    min-height: 150px;
+    min-width: 200px;
+    margin: 10px;
+    cursor: pointer;
+  }
+  .iconbar {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 30px;
+    background: var(--theme-bg-inv-1);
+    color: var(--theme-font-inv-2);
+  }
+  .titlebar {
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 10px;
+    background: var(--theme-bg-2);
+  }
+  .content {
+    position: absolute;
+    display: flex;
+    left: 30px;
+    top: 10px;
+    bottom: 0;
+    right: 0;
+    background: var(--theme-bg-1);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--theme-font-1);
+  }
+  .current {
+    font-weight: bold;
+  }
+  .icon {
+    margin: 5px 0px;
+  }
+</style>