change theme from command palette

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 {