theme switcher + svelte upgrade

packages/web/package.json

@@ -45,7 +45,7 @@
     "rollup-plugin-terser": "^7.0.0",
     "sirv-cli": "^1.0.0",
     "sql-formatter": "^2.3.3",
-    "svelte": "^3.43.0",
+    "svelte": "^3.46.4",
     "svelte-check": "^1.0.0",
     "svelte-markdown": "^0.1.4",
     "svelte-preprocess": "^4.9.5",

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>

yarn.lock

@@ -10151,10 +10151,10 @@ svelte-select@^4.4.7:
   resolved "https://registry.yarnpkg.com/svelte-select/-/svelte-select-4.4.7.tgz#fc85414af070487d68e438f7249c653178860af3"
   integrity sha512-fIf9Z8rPI6F8naHZ9wjXT0Pv5gLyhdHAFkHFJnCfVVfELE8e82uOoF0xEVQP6Kir+b4Q5yOvNAzZ61WbSU6A0A==
 
-svelte@^3.43.0:
-  version "3.43.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.43.0.tgz#d28d06ec523bf0cea3de15558a3241c339a85762"
-  integrity sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==
+svelte@^3.46.4:
+  version "3.46.4"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.46.4.tgz#0c46bc4a3e20a2617a1b7dc43a722f9d6c084a38"
+  integrity sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==
 
 symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   version "3.2.4"