change theme from command palette

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')],
 });