Basic palette selector

src/lib/settings.ts

@@ -1,10 +1,13 @@
 import { persisted } from "svelte-persisted-store";
+import type themes from "./ui/themes.ts";
 
 export type SettingsStore = {
   name: string;
+  theme: keyof typeof themes;
 };
 
 /** A persisted store for settings of the current user. */
 export const settings = persisted<SettingsStore>("sshx-settings-store", {
   name: "",
+  theme: "defaultDark",
 });

src/lib/ui/ChooseName.svelte

@@ -7,7 +7,10 @@
   let value = "";
 
   function handleSubmit() {
-    settings.set({ ...settings, name: value });
+    settings.update((curSettings) => ({
+      ...curSettings,
+      name: value,
+    }));
   }
 </script>
 

src/lib/ui/Settings.svelte

@@ -12,6 +12,17 @@
     initialized = true;
     nameValue = $settings.name;
   }
+
+  import themes from "./themes";
+  let themeOptions = Object.keys(themes);
+  let selectedTheme = $settings.theme || themeOptions[0];
+
+  function handleThemeChange() {
+    settings.update((curSettings) => ({
+      ...curSettings,
+      theme: selectedTheme,
+    }));
+  }
 </script>
 
 <OverlayMenu
@@ -37,7 +48,10 @@
           maxlength="50"
           on:input={() => {
             if (nameValue.length >= 2) {
-              settings.set({ ...$settings, name: nameValue });
+              settings.update((curSettings) => ({
+                ...curSettings,
+                name: nameValue,
+              }));
             }
           }}
         />
@@ -48,7 +62,17 @@
         <p class="font-medium mb-2">Color palette</p>
         <p class="text-sm text-zinc-400">Color scheme for text in terminals.</p>
       </div>
-      <div class="text-red-500">Coming soon</div>
+      <div>
+        <select
+          class="w-52 px-3 py-1.5 rounded-md bg-zinc-700 outline-none focus:ring-2 focus:ring-indigo-500"
+          bind:value={selectedTheme}
+          on:change={handleThemeChange}
+        >
+          {#each themeOptions as themeName}
+            <option value={themeName}>{themeName}</option>
+          {/each}
+        </select>
+      </div>
     </div>
     <div class="item">
       <div class="flex-1">

src/lib/ui/XTerm.svelte

@@ -44,8 +44,6 @@
   import CircleButtons from "./CircleButtons.svelte";
   import { TypeAheadAddon } from "$lib/typeahead";
 
-  const theme = themes.defaultDark;
-
   /** Used to determine Cmd versus Ctrl keyboard shortcuts. */
   const isMac = browser && navigator.platform.startsWith("Mac");
 
@@ -68,6 +66,16 @@
   export let termEl: HTMLDivElement = null as any; // suppress "missing prop" warning
   let term: Terminal | null = null;
 
+  import { settings } from "$lib/settings";
+  import type { ITheme } from "xterm";
+
+  let theme: ITheme = themes.defaultDark;
+
+  $: if ($settings.theme && term) {
+    theme = themes[$settings.theme];
+    term.options.theme = themes[$settings.theme];
+  }
+
   let loaded = false;
   let focused = false;
   let currentTitle = "Remote Terminal";

src/lib/ui/themes.ts

@@ -50,4 +50,190 @@ export const hybrid: ITheme = {
   brightWhite: "#c5c8c6",
 };
 
-export default { defaultDark, hybrid };
+/** Below themes are converted from https://github.com/alacritty/alacritty-theme/. */
+export const rosePine: ITheme = {
+  foreground: "#e0def4",
+  background: "#191724",
+
+  cursor: "#524f67",
+
+  black: "#26233a",
+  red: "#eb6f92",
+  green: "#31748f",
+  yellow: "#f6c177",
+  blue: "#9ccfd8",
+  magenta: "#c4a7e7",
+  cyan: "#ebbcba",
+  white: "#e0def4",
+
+  brightBlack: "#6e6a86",
+  brightRed: "#eb6f92",
+  brightGreen: "#31748f",
+  brightYellow: "#f6c177",
+  brightBlue: "#9ccfd8",
+  brightMagenta: "#c4a7e7",
+  brightCyan: "#ebbcba",
+  brightWhite: "#e0def4",
+};
+
+export const nord: ITheme = {
+  foreground: "#d8dee9",
+  background: "#2e3440",
+  black: "#3b4252",
+  red: "#bf616a",
+  green: "#a3be8c",
+  yellow: "#ebcb8b",
+  blue: "#81a1c1",
+  magenta: "#b48ead",
+  cyan: "#88c0d0",
+  white: "#e5e9f0",
+  brightBlack: "#4c566a",
+  brightRed: "#bf616a",
+  brightGreen: "#a3be8c",
+  brightYellow: "#ebcb8b",
+  brightBlue: "#81a1c1",
+  brightMagenta: "#b48ead",
+  brightCyan: "#8fbcbb",
+  brightWhite: "#eceff4",
+};
+
+export const ubuntu: ITheme = {
+  foreground: "#eeeeec",
+  background: "#300a24",
+  black: "#2e3436",
+  red: "#cc0000",
+  green: "#4e9a06",
+  yellow: "#c4a000",
+  blue: "#3465a4",
+  magenta: "#75507b",
+  cyan: "#06989a",
+  white: "#d3d7cf",
+  brightBlack: "#555753",
+  brightRed: "#ef2929",
+  brightGreen: "#8ae234",
+  brightYellow: "#fce94f",
+  brightBlue: "#729fcf",
+  brightMagenta: "#ad7fa8",
+  brightCyan: "#34e2e2",
+  brightWhite: "#eeeeec",
+};
+
+export const dracula: ITheme = {
+  foreground: "#f8f8f2",
+  background: "#282a36",
+  black: "#000000",
+  red: "#ff5555",
+  green: "#50fa7b",
+  yellow: "#f1fa8c",
+  blue: "#bd93f9",
+  magenta: "#ff79c6",
+  cyan: "#8be9fd",
+  white: "#bbbbbb",
+  brightBlack: "#555555",
+  brightRed: "#ff5555",
+  brightGreen: "#50fa7b",
+  brightYellow: "#f1fa8c",
+  brightBlue: "#caa9fa",
+  brightMagenta: "#ff79c6",
+  brightCyan: "#8be9fd",
+  brightWhite: "#ffffff",
+};
+
+export const githubDark: ITheme = {
+  foreground: "#d1d5da",
+  background: "#24292e",
+  black: "#586069",
+  red: "#ea4a5a",
+  green: "#34d058",
+  yellow: "#ffea7f",
+  blue: "#2188ff",
+  magenta: "#b392f0",
+  cyan: "#39c5cf",
+  white: "#d1d5da",
+  brightBlack: "#959da5",
+  brightRed: "#f97583",
+  brightGreen: "#85e89d",
+  brightYellow: "#ffea7f",
+  brightBlue: "#79b8ff",
+  brightMagenta: "#b392f0",
+  brightCyan: "#56d4dd",
+  brightWhite: "#fafbfc",
+};
+
+export const gruvboxDark: ITheme = {
+  foreground: "#ebdbb2",
+  background: "#282828",
+  black: "#282828",
+  red: "#cc241d",
+  green: "#98971a",
+  yellow: "#d79921",
+  blue: "#458588",
+  magenta: "#b16286",
+  cyan: "#689d6a",
+  white: "#a89984",
+  brightBlack: "#928374",
+  brightRed: "#fb4934",
+  brightGreen: "#b8bb26",
+  brightYellow: "#fabd2f",
+  brightBlue: "#83a598",
+  brightMagenta: "#d3869b",
+  brightCyan: "#8ec07c",
+  brightWhite: "#ebdbb2",
+};
+
+export const solarizedDark: ITheme = {
+  foreground: "#839496",
+  background: "#002b36",
+  black: "#073642",
+  red: "#dc322f",
+  green: "#859900",
+  yellow: "#b58900",
+  blue: "#268bd2",
+  magenta: "#d33682",
+  cyan: "#2aa198",
+  white: "#eee8d5",
+  brightBlack: "#002b36",
+  brightRed: "#cb4b16",
+  brightGreen: "#586e75",
+  brightYellow: "#657b83",
+  brightBlue: "#839496",
+  brightMagenta: "#6c71c4",
+  brightCyan: "#93a1a1",
+  brightWhite: "#fdf6e3",
+};
+
+export const tokyoNight: ITheme = {
+  foreground: "#a9b1d6",
+  background: "#1a1b26",
+  black: "#32344a",
+  red: "#f7768e",
+  green: "#9ece6a",
+  yellow: "#e0af68",
+  blue: "#7aa2f7",
+  magenta: "#ad8ee6",
+  cyan: "#449dab",
+  white: "#787c99",
+  brightBlack: "#444b6a",
+  brightRed: "#ff7a93",
+  brightGreen: "#b9f27c",
+  brightYellow: "#ff9e64",
+  brightBlue: "#7da6ff",
+  brightMagenta: "#bb9af7",
+  brightCyan: "#0db9d7",
+  brightWhite: "#acb0d0",
+};
+
+const themes = {
+  defaultDark,
+  hybrid,
+  rosePine,
+  nord,
+  ubuntu,
+  dracula,
+  githubDark,
+  gruvboxDark,
+  solarizedDark,
+  tokyoNight,
+};
+
+export default themes;