change theme from command palette

packages/web/public/theme-dark.css

@@ -1,4 +1,52 @@
 .theme-dark {
+  --theme-font-1: #ddd;
+  --theme-font-2: #919191;
+  --theme-font-3: #5e5e5e;
+  --theme-font-4: #2b2b2b;
+  --theme-font-hover: #8dcff8; /* blue-9 */
+  --theme-font-link: #65b7f3; /* blue-8 */
+  --theme-font-alt: #b2e58b; /* green-9 */
+
+  /* --theme-bg-0: #000;
+  --theme-bg-1: #333;
+  --theme-bg-2: #4d4d4d;
+  --theme-bg-3: #676767;
+  --theme-bg-4: #818181;
+  --theme-bg-alt: #111d2c; */
+
+  --theme-bg-0: #111;
+  --theme-bg-1: #333;
+  --theme-bg-2: #4d4d4d;
+  --theme-bg-3: #676767;
+  --theme-bg-4: #818181;
+  --theme-bg-alt: #111d2c;
+
+  --theme-bg-gold: #443111; /* gold-2 */
+  --theme-bg-orange: #442a11; /*orange-2 */
+  --theme-bg-green: #1d3712; /* green-2 */
+  --theme-bg-volcano: #441d12; /* volcano-2 */
+
+  --theme-font-inv-1: #FFFFFF;
+  --theme-font-inv-2: #b3b3b3;
+  --theme-font-inv-3: #808080;
+  --theme-font-inv-4: #4d4d4d;
+
+  --theme-bg-inv-1: #222;
+  --theme-bg-inv-2: #3c3c3c;
+  --theme-bg-inv-3: #565656;
+  --theme-bg-inv-4: #707070;
+
+  --theme-border: #555;
+
+  --theme-bg-hover: #112a45;
+  --theme-bg-selected: #15395b; /* blue-3 */
+
+  --theme-bg-statusbar-inv: blue;
+
+
+
+
+
   --theme-icon-blue: #3c9ae8;
   --theme-icon-green: #8fd460;
   --theme-icon-red: #e84749;

packages/web/src/Screen.svelte

@@ -7,7 +7,7 @@
   import CommandPalette from './commands/CommandPalette.svelte';
 </script>
 
-<div class={$currentTheme}>
+<div class={`${$currentTheme} root`}>
   <div class="iconbar">
     <WidgetIconPanel />
   </div>
@@ -31,6 +31,9 @@
 </div>
 
 <style>
+  .root {
+    color: var(--theme-font-1);
+  }
   .iconbar {
     position: fixed;
     left: 0;
@@ -53,7 +56,7 @@
     left: var(--dim-widget-icon-size);
     bottom: var(--dim-statusbar-height);
     width: var(--dim-left-panel-width);
-    background-color: var(--theme-bg-2);
+    background-color: var(--theme-bg-1);
     display: flex;
   }
   .tabs {

packages/web/src/commands/CommandPalette.svelte

@@ -19,6 +19,7 @@
   let domInput;
   let parentCommand;
   let filter = '';
+
   $: selectedIndex = true ? 0 : filter;
 
   onMount(() => domInput.focus());
@@ -64,7 +65,7 @@
     width: 500px;
     max-height: 500px;
     background: var(--theme-bg-2);
-    padding: 4px;
+    padding: 5px;
   }
   .search {
     display: flex;
@@ -73,7 +74,7 @@
     width: 100%;
   }
   .command {
-    padding: 3px;
+    padding: 5px;
   }
   .command:hover {
     background: var(--theme-bg-3);

packages/web/src/commands/stdCommands.ts

@@ -1,17 +1,23 @@
 import { currentTheme } from '../stores';
 import registerCommand from './registerCommand';
+import { get } from 'svelte/store';
+
+function themeCommand(text, css) {
+  return {
+    text: text,
+    onClick: () => currentTheme.set(css),
+    // onPreview: () => {
+    //   const old = get(currentTheme);
+    //   currentTheme.set(css);
+    //   return ok => {
+    //     if (!ok) currentTheme.set(old);
+    //   };
+    // },
+  };
+}
 
 registerCommand({
   id: 'theme.changeTheme',
   text: 'Theme: Change',
-  getSubCommands: () => [
-    {
-      text: 'Light',
-      onClick: () => currentTheme.set('theme-light'),
-    },
-    {
-        text: 'Dark',
-        onClick: () => currentTheme.set('theme-dark'),
-      },
-    ],
+  getSubCommands: () => [themeCommand('Light', 'theme-light'), themeCommand('Dark', 'theme-dark')],
 });

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -16,7 +16,7 @@
     padding: 5px;
     font-weight: bold;
     text-transform: uppercase;
-    background-color: var(--theme-bg-4);
+    background-color: var(--theme-bg-2);
     border: 1px solid var(--theme-border);
   }
   .title:hover {