More themes!

src-web/components/Overlay.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
+import React from 'react';
 import { Portal } from './Portal';
 
 interface Props {
@@ -47,6 +48,12 @@ export function Overlay({
               )}
             />
             {children}
+
+            {/* Show draggable region at the top */}
+            {/* TODO: Figure out tauri drag region and also make clickable still */}
+            {variant === 'default' && (
+              <div data-tauri-drag-region className="absolute top-0 left-0 h-md right-0" />
+            )}
           </motion.div>
         </FocusTrap>
       )}

src-web/components/Settings/SettingsAppearance.tsx

@@ -1,3 +1,4 @@
+import { invoke } from '@tauri-apps/api/core';
 import React from 'react';
 import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
 import { useResolvedAppearance } from '../../hooks/useResolvedAppearance';
@@ -8,8 +9,10 @@ import { useUpdateSettings } from '../../hooks/useUpdateSettings';
 import { trackEvent } from '../../lib/analytics';
 import { isThemeDark } from '../../lib/theme/window';
 import type { ButtonProps } from '../core/Button';
+import { Button } from '../core/Button';
 import { Editor } from '../core/Editor';
 import type { IconProps } from '../core/Icon';
+import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
 import type { SelectOption } from '../core/Select';
 import { Select } from '../core/Select';
@@ -116,7 +119,7 @@ export function SettingsAppearance() {
       </div>
       <VStack
         space={3}
-        className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded"
+        className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
       >
         <div className="text-sm text-fg font-bold">
           Theme Preview <span className="text-fg-subtle">({appearance})</span>
@@ -157,6 +160,18 @@ export function SettingsAppearance() {
           contentType="application/javascript"
         />
       </VStack>
+      <Button
+        color="secondary"
+        variant="border"
+        size="sm"
+        className="mr-auto"
+        rightSlot={<Icon icon="externalLink" />}
+        onClick={async () => {
+          await invoke('cmd_new_window', { url: window.location.pathname });
+        }}
+      >
+        Open Preview Window
+      </Button>
     </VStack>
   );
 }

src-web/components/Workspace.tsx

@@ -209,10 +209,10 @@ export default function Workspace() {
 }
 
 interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
-function HeaderSize({ className, style, ...props }: HeaderSizeProps) {
+export function HeaderSize({ className, style, ...props }: HeaderSizeProps) {
   const platform = useOsInfo();
   const fullscreen = useIsFullscreen();
   const stoplightsVisible = platform?.osType === 'macos' && !fullscreen;

src-web/hooks/useThemes.ts

@@ -1,8 +1,8 @@
-import { yaakDark, yaakLight, yaakThemes } from '../lib/theme/themes';
+import { defaultDarkTheme, defaultLightTheme, yaakThemes } from '../lib/theme/themes';
 
 export function useThemes() {
-  const dark = yaakDark;
+  const dark = defaultDarkTheme;
-  const light = yaakLight;
+  const light = defaultLightTheme;
 
   const otherThemes = yaakThemes
     .filter((t) => t.id !== dark.id && t.id !== light.id)

src-web/lib/theme/themes.ts

@@ -1,384 +1,18 @@
-import { Color } from './color';
+import { catppuccin } from './themes/catppuccin';
-import type { YaakTheme } from './window';
+import { github } from './themes/github';
-
+import { monokaiPro } from './themes/monokai-pro';
-export const yaakLight: YaakTheme = {
+import { relaxing } from './themes/relaxing';
-  id: 'yaak-light',
+import { rosePine } from './themes/rose-pine';
-  name: 'Yaak',
+import { yaak, yaakDark, yaakLight } from './themes/yaak';
-  background: new Color('hsl(216,24%,100%)', 'light'),
-  backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
-  backgroundHighlightSecondary: new Color('hsl(216,24%,87%)', 'light'),
-  foreground: new Color('hsl(219,23%,15%)', 'light'),
-  foregroundSubtle: new Color('hsl(219,23%,15%)', 'light').lower(0.3),
-  foregroundSubtler: new Color('hsl(219,23%,15%)', 'light').lower(0.5),
-  colors: {
-    primary: new Color('hsl(266,100%,70%)', 'light'),
-    secondary: new Color('hsl(220,24%,59%)', 'light'),
-    info: new Color('hsl(206,100%,48%)', 'light'),
-    success: new Color('hsl(155,95%,33%)', 'light'),
-    notice: new Color('hsl(45,100%,41%)', 'light'),
-    warning: new Color('hsl(30,100%,43%)', 'light'),
-    danger: new Color('hsl(335,75%,57%)', 'light'),
-  },
-  components: {
-    sidebar: {
-      background: new Color('hsl(216,24%,97%)', 'light'),
-      backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
-      backgroundHighlightSecondary: new Color('hsl(216,24%,90%)', 'light'),
-    },
-  },
-};
-
-export const yaakDark: YaakTheme = {
-  id: 'yaak-dark',
-  name: 'Yaak',
-  background: new Color('hsl(244,23%,13%)', 'dark'),
-  backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
-  backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
-  foreground: new Color('hsl(245,23%,86%)', 'dark'),
-  foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
-  foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'),
-
-  colors: {
-    primary: new Color('hsl(266,100%,79%)', 'dark'),
-    secondary: new Color('hsl(245,23%,60%)', 'dark'),
-    info: new Color('hsl(206,100%,63%)', 'dark'),
-    success: new Color('hsl(150,99%,44%)', 'dark'),
-    notice: new Color('hsl(48,80%,63%)', 'dark'),
-    warning: new Color('hsl(28,100%,61%)', 'dark'),
-    danger: new Color('hsl(342,90%,68%)', 'dark'),
-  },
-
-  components: {
-    button: {
-      colors: {
-        primary: new Color('hsl(266,100%,79%)', 'dark').lower(0.1),
-        secondary: new Color('hsl(245,23%,60%)', 'dark').lower(0.1),
-        info: new Color('hsl(206,100%,63%)', 'dark').lower(0.1),
-        success: new Color('hsl(150,99%,44%)', 'dark').lower(0.1),
-        notice: new Color('hsl(48,80%,63%)', 'dark').lower(0.1),
-        warning: new Color('hsl(28,100%,61%)', 'dark').lower(0.1),
-        danger: new Color('hsl(342,90%,68%)', 'dark').lower(0.1),
-      },
-    },
-    input: {
-      backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
-    },
-    dialog: {
-      backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
-    },
-    sidebar: {
-      background: new Color('hsl(243,23%,16%)', 'dark'),
-      backgroundHighlight: new Color('hsl(244,23%,22%)', 'dark'),
-    },
-    responsePane: {
-      background: new Color('hsl(243,23%,16%)', 'dark'),
-      backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08),
-    },
-    appHeader: {
-      background: new Color('hsl(244,23%,12%)', 'dark'),
-      backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.1),
-    },
-  },
-};
-
-const monokaiProOctagon: YaakTheme = {
-  id: 'monokai-pro-octagon',
-  name: 'Monokai Pro Octagon',
-  background: new Color('#282a3a', 'dark'),
-  foreground: new Color('#eaf2f1', 'dark'),
-  foregroundSubtle: new Color('#b2b9bd', 'dark'),
-  foregroundSubtler: new Color('#767b81', 'dark'),
-
-  colors: {
-    primary: new Color('#c39ac9', 'dark'),
-    secondary: new Color('#b2b9bd', 'dark'),
-    info: new Color('#9cd1bb', 'dark'),
-    success: new Color('#bad761', 'dark'),
-    notice: new Color('#ffd76d', 'dark'),
-    warning: new Color('#ff9b5e', 'dark'),
-    danger: new Color('#ff657a', 'dark'),
-  },
-
-  components: {
-    appHeader: {
-      background: new Color('#1e1f2b', 'dark'),
-      foreground: new Color('#b2b9bd', 'dark'),
-      foregroundSubtle: new Color('#767b81', 'dark'),
-      foregroundSubtler: new Color('#696d77', 'dark'),
-    },
-    button: {
-      colors: {
-        primary: new Color('#c39ac9', 'dark').lower(0.1).desaturate(0.1),
-        secondary: new Color('#b2b9bd', 'dark').lower(0.1).desaturate(0.1),
-        info: new Color('#9cd1bb', 'dark').lower(0.1).desaturate(0.1),
-        success: new Color('#bad761', 'dark').lower(0.1).desaturate(0.1),
-        notice: new Color('#ffd76d', 'dark').lower(0.1).desaturate(0.1),
-        warning: new Color('#ff9b5e', 'dark').lower(0.1).desaturate(0.1),
-        danger: new Color('#ff657a', 'dark').lower(0.1).desaturate(0.1),
-      },
-    },
-  },
-};
-
-const catppuccinLatte: YaakTheme = {
-  name: 'Catppuccin Latte',
-  id: 'catppuccin-light',
-  background: new Color('#eff1f5', 'light'),
-  foreground: new Color('#4c4f69', 'dark'),
-  foregroundSubtle: new Color('#6c6f85', 'light'),
-  foregroundSubtler: new Color('#8c8fa1', 'light'),
-  colors: {
-    primary: new Color('#8839ef', 'light'),
-    secondary: new Color('#6c6f85', 'light'),
-    info: new Color('#7287fd', 'light'),
-    success: new Color('#179299', 'light'),
-    notice: new Color('#df8e1d', 'light'),
-    warning: new Color('#fe640b', 'light'),
-    danger: new Color('#e64553', 'light'),
-  },
-  components: {
-    sidebar: {
-      background: new Color('#e6e9ef', 'light'),
-      backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05),
-      foregroundSubtler: new Color('#7287fd', 'light'),
-    },
-    appHeader: {
-      background: new Color('#dce0e8', 'light'),
-      backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05),
-      foregroundSubtler: new Color('#7287fd', 'light'),
-    },
-  },
-};
-
-const catppuccinMocha: YaakTheme = {
-  name: 'Catppuccin Mocha',
-  id: 'catppuccin-mocha',
-  background: new Color('#181825', 'dark'),
-  foreground: new Color('#cdd6f4', 'dark'),
-  foregroundSubtle: new Color('#a6adc8', 'dark'),
-  foregroundSubtler: new Color('#7f849c', 'dark'),
-  colors: {
-    primary: new Color('#c6a0f6', 'dark'),
-    secondary: new Color('#bac2de', 'dark'),
-    info: new Color('#89b4fa', 'dark'),
-    success: new Color('#a6e3a1', 'dark'),
-    notice: new Color('#f9e2af', 'dark'),
-    warning: new Color('#fab387', 'dark'),
-    danger: new Color('#f38ba8', 'dark'),
-  },
-  components: {
-    dialog: {
-      background: new Color('#181825', 'dark'),
-    },
-    sidebar: {
-      background: new Color('#1e1e2e', 'dark'),
-      backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05),
-    },
-    appHeader: {
-      background: new Color('#11111b', 'dark'),
-      backgroundHighlight: new Color('#11111b', 'dark').lift(0.1),
-    },
-    responsePane: {
-      background: new Color('#1e1e2e', 'dark'),
-      backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05),
-    },
-    button: {
-      colors: {
-        primary: new Color('#cba6f7', 'dark').lower(0.2).desaturate(0.2),
-        secondary: new Color('#bac2de', 'dark').lower(0.2).desaturate(0.2),
-        info: new Color('#89b4fa', 'dark').lower(0.2).desaturate(0.2),
-        success: new Color('#a6e3a1', 'dark').lower(0.2).desaturate(0.2),
-        notice: new Color('#f9e2af', 'dark').lower(0.2).desaturate(0.2),
-        warning: new Color('#fab387', 'dark').lower(0.2).desaturate(0.2),
-        danger: new Color('#f38ba8', 'dark').lower(0.2).desaturate(0.2),
-      },
-    },
-  },
-};
-
-const relaxing: YaakTheme = {
-  name: 'Relaxing',
-  id: 'relaxing',
-  background: new Color('#2b1e3b', 'dark'),
-  foreground: new Color('#ede2f5', 'dark'),
-  colors: {
-    primary: new Color('#cba6f7', 'dark'),
-    secondary: new Color('#bac2de', 'dark'),
-    info: new Color('#89b4fa', 'dark'),
-    success: new Color('#a6e3a1', 'dark'),
-    notice: new Color('#f9e2af', 'dark'),
-    warning: new Color('#fab387', 'dark'),
-    danger: new Color('#f38ba8', 'dark'),
-  },
-};
-
-export const rosePineMoon: YaakTheme = {
-  id: 'rose-pine-moon',
-  name: 'Rosé Pine Moon',
-  background: new Color('#232136', 'dark'),
-  foreground: new Color('#e0def4', 'dark'),
-  foregroundSubtle: new Color('#908caa', 'dark'),
-  foregroundSubtler: new Color('#6e6a86', 'dark'),
-  colors: {
-    primary: new Color('#c4a7e7', 'dark'),
-    secondary: new Color('#908caa', 'dark'),
-    info: new Color('#68aeca', 'dark'),
-    success: new Color('#9ccfd8', 'dark'),
-    notice: new Color('#f6c177', 'dark'),
-    warning: new Color('#ea9a97', 'dark'),
-    danger: new Color('#eb6f92', 'dark'),
-  },
-  components: {
-    responsePane: {
-      background: new Color('#2a273f', 'dark'),
-    },
-    sidebar: {
-      background: new Color('#2a273f', 'dark'),
-    },
-    menu: {
-      background: new Color('#393552', 'dark'),
-      foregroundSubtle: new Color('#908caa', 'dark').lift(0.15),
-      foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15),
-    },
-  },
-};
-
-export const rosePineDawn: YaakTheme = {
-  id: 'rose-pine-dawn',
-  name: 'Rosé Pine Dawn',
-  background: new Color('#faf4ed', 'light'),
-  backgroundHighlight: new Color('#dfdad9', 'light'),
-  backgroundHighlightSecondary: new Color('#f4ede8', 'light'),
-  foreground: new Color('#575279', 'light'),
-  foregroundSubtle: new Color('#797593', 'light'),
-  foregroundSubtler: new Color('#9893a5', 'light'),
-  colors: {
-    primary: new Color('#9070ad', 'light'),
-    secondary: new Color('#6e6a86', 'light'),
-    info: new Color('#2d728d', 'light'),
-    success: new Color('#4f8c96', 'light'),
-    notice: new Color('#cb862d', 'light'),
-    warning: new Color('#ce7b78', 'light'),
-    danger: new Color('#b4637a', 'light'),
-  },
-  components: {
-    responsePane: {
-      backgroundHighlight: new Color('#e8e4e2', 'light'),
-    },
-    sidebar: {
-      backgroundHighlight: new Color('#e8e4e2', 'light'),
-    },
-    appHeader: {
-      backgroundHighlight: new Color('#e8e4e2', 'light'),
-    },
-    input: {
-      backgroundHighlight: new Color('#dfdad9', 'light'),
-    },
-    dialog: {
-      backgroundHighlight: new Color('#e8e4e2', 'light'),
-    },
-    menu: {
-      background: new Color('#f2e9e1', 'light'),
-      backgroundHighlight: new Color('#dfdad9', 'light'),
-      backgroundHighlightSecondary: new Color('#6e6a86', 'light'),
-    },
-  },
-};
-
-export const rosePine: YaakTheme = {
-  id: 'rose-pine',
-  name: 'Rosé Pine',
-  background: new Color('#191724', 'dark'),
-  foreground: new Color('#e0def4', 'dark'),
-  foregroundSubtle: new Color('#908caa', 'dark'),
-  foregroundSubtler: new Color('#6e6a86', 'dark'),
-  colors: {
-    primary: new Color('#c4a7e7', 'dark'),
-    secondary: new Color('#6e6a86', 'dark'),
-    info: new Color('#67abcb', 'dark'),
-    success: new Color('#9cd8d8', 'dark'),
-    notice: new Color('#f6c177', 'dark'),
-    warning: new Color('#f1a3a1', 'dark'),
-    danger: new Color('#eb6f92', 'dark'),
-  },
-  components: {
-    responsePane: {
-      background: new Color('#1f1d2e', 'dark'),
-    },
-    sidebar: {
-      background: new Color('#1f1d2e', 'dark'),
-    },
-    menu: {
-      background: new Color('#393552', 'dark'),
-      foregroundSubtle: new Color('#908caa', 'dark').lift(0.15),
-      foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15),
-    },
-  },
-};
-
-export const githubDark: YaakTheme = {
-  id: 'github-dark',
-  name: 'GitHub',
-  background: new Color('#0d1218', 'dark'),
-  backgroundHighlight: new Color('#171c23', 'dark'),
-  backgroundHighlightSecondary: new Color('#1c2127', 'dark'),
-  foreground: new Color('#dce3eb', 'dark'),
-  foregroundSubtle: new Color('#88919b', 'dark'),
-  foregroundSubtler: new Color('#6b727d', 'dark'),
-  colors: {
-    primary: new Color('#a579ef', 'dark').lift(0.1),
-    secondary: new Color('#6b727d', 'dark').lift(0.1),
-    info: new Color('#458def', 'dark').lift(0.1),
-    success: new Color('#3eb24f', 'dark').lift(0.1),
-    notice: new Color('#dca132', 'dark').lift(0.1),
-    warning: new Color('#ec7934', 'dark').lift(0.1),
-    danger: new Color('#ee5049', 'dark').lift(0.1),
-  },
-  components: {
-    button: {
-      colors: {
-        primary: new Color('#a579ef', 'dark'),
-        secondary: new Color('#6b727d', 'dark'),
-        info: new Color('#458def', 'dark'),
-        success: new Color('#3eb24f', 'dark'),
-        notice: new Color('#dca132', 'dark'),
-        warning: new Color('#ec7934', 'dark'),
-        danger: new Color('#ee5049', 'dark'),
-      },
-    },
-  },
-};
-
-export const githubLight: YaakTheme = {
-  id: 'github-light',
-  name: 'GitHub',
-  background: new Color('#ffffff', 'light'),
-  backgroundHighlight: new Color('#e8ebee', 'light'),
-  backgroundHighlightSecondary: new Color('#f6f8fa', 'light'),
-  foreground: new Color('#1f2328', 'light'),
-  foregroundSubtle: new Color('#636c76', 'light'),
-  foregroundSubtler: new Color('#828d94', 'light'),
-  colors: {
-    primary: new Color('#8250df', 'light'),
-    secondary: new Color('#6e7781', 'light'),
-    info: new Color('#0969da', 'light'),
-    success: new Color('#1a7f37', 'light'),
-    notice: new Color('#9a6700', 'light'),
-    warning: new Color('#bc4c00', 'light'),
-    danger: new Color('#d1242f', 'light'),
-  },
-};
 
 export const yaakThemes = [
-  yaakLight,
+  ...yaak,
-  yaakDark,
+  ...catppuccin,
-  catppuccinMocha,
+  ...relaxing,
-  catppuccinLatte,
+  ...rosePine,
-  relaxing,
+  ...github,
-  monokaiProOctagon,
+  ...monokaiPro,
-  rosePine,
-  rosePineMoon,
-  rosePineDawn,
-  githubLight,
-  githubDark,
 ];
+
+export const defaultDarkTheme = yaakDark;
+export const defaultLightTheme = yaakLight;

src-web/lib/theme/themes/catppuccin.ts

@@ -0,0 +1,172 @@
+import { Color } from '../color';
+import type { YaakTheme } from '../window';
+
+const catppuccinLatte: YaakTheme = {
+  name: 'Catppuccin Latte',
+  id: 'catppuccin-light',
+  background: new Color('#eff1f5', 'light'),
+  foreground: new Color('#4c4f69', 'dark'),
+  foregroundSubtle: new Color('#6c6f85', 'light'),
+  foregroundSubtler: new Color('#8c8fa1', 'light'),
+  colors: {
+    primary: new Color('#8839ef', 'light'),
+    secondary: new Color('#6c6f85', 'light'),
+    info: new Color('#7287fd', 'light'),
+    success: new Color('#179299', 'light'),
+    notice: new Color('#df8e1d', 'light'),
+    warning: new Color('#fe640b', 'light'),
+    danger: new Color('#e64553', 'light'),
+  },
+  components: {
+    sidebar: {
+      background: new Color('#e6e9ef', 'light'),
+      backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05),
+      foregroundSubtler: new Color('#7287fd', 'light'),
+    },
+    appHeader: {
+      background: new Color('#dce0e8', 'light'),
+      backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05),
+      foregroundSubtler: new Color('#7287fd', 'light'),
+    },
+  },
+};
+
+const catppuccinMacchiato: YaakTheme = {
+  name: 'Catppuccin Macchiato',
+  id: 'catppuccin-Macchiato',
+  background: new Color('#1e2030', 'dark'),
+  foreground: new Color('#cad3f5', 'dark'),
+  foregroundSubtle: new Color('#a5adcb', 'dark'),
+  foregroundSubtler: new Color('#8087a2', 'dark'),
+  colors: {
+    primary: new Color('#c6a0f6', 'dark'),
+    secondary: new Color('#b8c0e0', 'dark'),
+    info: new Color('#8aadf4', 'dark'),
+    success: new Color('#a6da95', 'dark'),
+    notice: new Color('#eed49f', 'dark'),
+    warning: new Color('#f5a97f', 'dark'),
+    danger: new Color('#ed8796', 'dark'),
+  },
+  components: {
+    dialog: {
+      background: new Color('#181825', 'dark'),
+    },
+    sidebar: {
+      background: new Color('#24273a', 'dark'),
+      backgroundHighlight: new Color('#24273a', 'dark').lift(0.05),
+    },
+    appHeader: {
+      background: new Color('#181926', 'dark'),
+      backgroundHighlight: new Color('#181926', 'dark').lift(0.1),
+    },
+    responsePane: {
+      background: new Color('#24273a', 'dark'),
+      backgroundHighlight: new Color('#24273a', 'dark').lift(0.05),
+    },
+    button: {
+      colors: {
+        primary: new Color('#c6a0f6', 'dark').lower(0.1),
+        secondary: new Color('#b8c0e0', 'dark').lower(0.1),
+        info: new Color('#8aadf4', 'dark').lower(0.1),
+        success: new Color('#a6da95', 'dark').lower(0.1),
+        notice: new Color('#eed49f', 'dark').lower(0.1),
+        warning: new Color('#f5a97f', 'dark').lower(0.1),
+        danger: new Color('#ed8796', 'dark').lower(0.1),
+      },
+    },
+  },
+};
+
+const catppuccinFrappe: YaakTheme = {
+  name: 'Catppuccin Frappé',
+  id: 'catppuccin-frappe',
+  background: new Color('#292c3c', 'dark'),
+  foreground: new Color('#c6d0f5', 'dark'),
+  foregroundSubtle: new Color('#a5adce', 'dark'),
+  foregroundSubtler: new Color('#838ba7', 'dark'),
+  colors: {
+    primary: new Color('#ca9ee6', 'dark'),
+    secondary: new Color('#b8c0e0', 'dark'),
+    info: new Color('#8caaee', 'dark'),
+    success: new Color('#a6d189', 'dark'),
+    notice: new Color('#e5c890', 'dark'),
+    warning: new Color('#ef9f76', 'dark'),
+    danger: new Color('#e78284', 'dark'),
+  },
+  components: {
+    dialog: {
+      background: new Color('#181825', 'dark'),
+    },
+    sidebar: {
+      background: new Color('#303446', 'dark'),
+      backgroundHighlight: new Color('#303446', 'dark').lift(0.05),
+    },
+    appHeader: {
+      background: new Color('#232634', 'dark'),
+      backgroundHighlight: new Color('#232634', 'dark').lift(0.1),
+    },
+    responsePane: {
+      background: new Color('#303446', 'dark'),
+      backgroundHighlight: new Color('#303446', 'dark').lift(0.05),
+    },
+    button: {
+      colors: {
+        primary: new Color('#ca9ee6', 'dark').lower(0.1),
+        secondary: new Color('#b8c0e0', 'dark').lower(0.1),
+        info: new Color('#8caaee', 'dark').lower(0.1),
+        success: new Color('#a6d189', 'dark').lower(0.1),
+        notice: new Color('#e5c890', 'dark').lower(0.1),
+        warning: new Color('#ef9f76', 'dark').lower(0.1),
+        danger: new Color('#e78284', 'dark').lower(0.1),
+      },
+    },
+  },
+};
+
+const catppuccinMocha: YaakTheme = {
+  name: 'Catppuccin Mocha',
+  id: 'catppuccin-mocha',
+  background: new Color('#181825', 'dark'),
+  foreground: new Color('#cdd6f4', 'dark'),
+  foregroundSubtle: new Color('#a6adc8', 'dark'),
+  foregroundSubtler: new Color('#7f849c', 'dark'),
+  colors: {
+    primary: new Color('#c6a0f6', 'dark'),
+    secondary: new Color('#bac2de', 'dark'),
+    info: new Color('#89b4fa', 'dark'),
+    success: new Color('#a6e3a1', 'dark'),
+    notice: new Color('#f9e2af', 'dark'),
+    warning: new Color('#fab387', 'dark'),
+    danger: new Color('#f38ba8', 'dark'),
+  },
+  components: {
+    dialog: {
+      background: new Color('#181825', 'dark'),
+    },
+    sidebar: {
+      background: new Color('#1e1e2e', 'dark'),
+      backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05),
+    },
+    appHeader: {
+      background: new Color('#11111b', 'dark'),
+      backgroundHighlight: new Color('#11111b', 'dark').lift(0.1),
+    },
+    responsePane: {
+      background: new Color('#1e1e2e', 'dark'),
+      backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05),
+    },
+    button: {
+      colors: {
+        primary: new Color('#cba6f7', 'dark').lower(0.2).desaturate(0.2),
+        secondary: new Color('#bac2de', 'dark').lower(0.2).desaturate(0.2),
+        info: new Color('#89b4fa', 'dark').lower(0.2).desaturate(0.2),
+        success: new Color('#a6e3a1', 'dark').lower(0.2).desaturate(0.2),
+        notice: new Color('#f9e2af', 'dark').lower(0.2).desaturate(0.2),
+        warning: new Color('#fab387', 'dark').lower(0.2).desaturate(0.2),
+        danger: new Color('#f38ba8', 'dark').lower(0.2).desaturate(0.2),
+      },
+    },
+  },
+};
+
+export const catppuccin = [catppuccinFrappe, catppuccinMacchiato, catppuccinMocha, catppuccinLatte];

src-web/lib/theme/themes/github.ts

@@ -0,0 +1,57 @@
+import { Color } from '../color';
+import type { YaakTheme } from '../window';
+
+const githubDark: YaakTheme = {
+  id: 'github-dark',
+  name: 'GitHub',
+  background: new Color('#0d1218', 'dark'),
+  backgroundHighlight: new Color('#171c23', 'dark'),
+  backgroundHighlightSecondary: new Color('#1c2127', 'dark'),
+  foreground: new Color('#dce3eb', 'dark'),
+  foregroundSubtle: new Color('#88919b', 'dark'),
+  foregroundSubtler: new Color('#6b727d', 'dark'),
+  colors: {
+    primary: new Color('#a579ef', 'dark').lift(0.1),
+    secondary: new Color('#6b727d', 'dark').lift(0.1),
+    info: new Color('#458def', 'dark').lift(0.1),
+    success: new Color('#3eb24f', 'dark').lift(0.1),
+    notice: new Color('#dca132', 'dark').lift(0.1),
+    warning: new Color('#ec7934', 'dark').lift(0.1),
+    danger: new Color('#ee5049', 'dark').lift(0.1),
+  },
+  components: {
+    button: {
+      colors: {
+        primary: new Color('#a579ef', 'dark'),
+        secondary: new Color('#6b727d', 'dark'),
+        info: new Color('#458def', 'dark'),
+        success: new Color('#3eb24f', 'dark'),
+        notice: new Color('#dca132', 'dark'),
+        warning: new Color('#ec7934', 'dark'),
+        danger: new Color('#ee5049', 'dark'),
+      },
+    },
+  },
+};
+
+const githubLight: YaakTheme = {
+  id: 'github-light',
+  name: 'GitHub',
+  background: new Color('#ffffff', 'light'),
+  backgroundHighlight: new Color('#e8ebee', 'light'),
+  backgroundHighlightSecondary: new Color('#f6f8fa', 'light'),
+  foreground: new Color('#1f2328', 'light'),
+  foregroundSubtle: new Color('#636c76', 'light'),
+  foregroundSubtler: new Color('#828d94', 'light'),
+  colors: {
+    primary: new Color('#8250df', 'light'),
+    secondary: new Color('#6e7781', 'light'),
+    info: new Color('#0969da', 'light'),
+    success: new Color('#1a7f37', 'light'),
+    notice: new Color('#9a6700', 'light'),
+    warning: new Color('#bc4c00', 'light'),
+    danger: new Color('#d1242f', 'light'),
+  },
+};
+
+export const github = [githubDark, githubLight];

src-web/lib/theme/themes/monokai-pro.ts

@@ -0,0 +1,245 @@
+import { Color } from '../color';
+import type { YaakTheme } from '../window';
+
+const monokaiProDefault: YaakTheme = {
+  id: 'monokai-pro',
+  name: 'Monokai Pro',
+  background: new Color('#2d2a2e', 'dark'),
+  foreground: new Color('#fcfcfa', 'dark'),
+  foregroundSubtle: new Color('#c1c0c0', 'dark'),
+  foregroundSubtler: new Color('#939293', 'dark'),
+
+  colors: {
+    primary: new Color('#ab9df2', 'dark'),
+    secondary: new Color('#c1c0c0', 'dark'),
+    info: new Color('#78dce8', 'dark'),
+    success: new Color('#a9dc76', 'dark'),
+    notice: new Color('#ffd866', 'dark'),
+    warning: new Color('#fc9867', 'dark'),
+    danger: new Color('#ff6188', 'dark'),
+  },
+
+  components: {
+    appHeader: {
+      background: new Color('#221f22', 'dark'),
+      foreground: new Color('#c1c0c0', 'dark'),
+      foregroundSubtle: new Color('#939293', 'dark'),
+      foregroundSubtler: new Color('#727072', 'dark'),
+    },
+    button: {
+      colors: {
+        primary: new Color('#ab9df2', 'dark').lower(0.1),
+        secondary: new Color('#c1c0c0', 'dark').lower(0.1),
+        info: new Color('#78dce8', 'dark').lower(0.1),
+        success: new Color('#a9dc76', 'dark').lower(0.1),
+        notice: new Color('#ffd866', 'dark').lower(0.1),
+        warning: new Color('#fc9867', 'dark').lower(0.1),
+        danger: new Color('#ff6188', 'dark').lower(0.1),
+      },
+    },
+  },
+};
+
+const monokaiProClassic: YaakTheme = {
+  id: 'monokai-pro-classic',
+  name: 'Monokai Pro Classic',
+  background: new Color('#272822', 'dark'),
+  foreground: new Color('#fdfff1', 'dark'),
+  foregroundSubtle: new Color('#c0c1b5', 'dark'),
+  foregroundSubtler: new Color('#919288', 'dark'),
+
+  colors: {
+    primary: new Color('#ae81ff', 'dark'),
+    secondary: new Color('#b2b9bd', 'dark'),
+    info: new Color('#66d9ef', 'dark'),
+    success: new Color('#a6e22e', 'dark'),
+    notice: new Color('#e6db74', 'dark'),
+    warning: new Color('#fd971f', 'dark'),
+    danger: new Color('#f92672', 'dark'),
+  },
+
+  components: {
+    appHeader: {
+      background: new Color('#1d1e19', 'dark'),
+      foreground: new Color('#b2b9bd', 'dark'),
+      foregroundSubtle: new Color('#767b81', 'dark'),
+      foregroundSubtler: new Color('#696d77', 'dark'),
+    },
+    button: {
+      colors: {
+        primary: new Color('#ae81ff', 'dark').lower(0.1),
+        secondary: new Color('#b2b9bd', 'dark').lower(0.1),
+        info: new Color('#66d9ef', 'dark').lower(0.1),
+        success: new Color('#a6e22e', 'dark').lower(0.1),
+        notice: new Color('#e6db74', 'dark').lower(0.1),
+        warning: new Color('#fd971f', 'dark').lower(0.1),
+        danger: new Color('#f92672', 'dark').lower(0.1),
+      },
+    },
+  },
+};
+
+const monokaiProMachine: YaakTheme = {
+  id: 'monokai-pro-machine',
+  name: 'Monokai Pro Machine',
+  background: new Color('#273136', 'dark'),
+  foreground: new Color('#eaf2f1', 'dark'),
+  foregroundSubtle: new Color('#8b9798', 'dark'),
+  foregroundSubtler: new Color('#6b7678', 'dark'),
+
+  colors: {
+    primary: new Color('#baa0f8', 'dark'),
+    secondary: new Color('#b8c4c3', 'dark'),
+    info: new Color('#7cd5f1', 'dark'),
+    success: new Color('#a2e57b', 'dark'),
+    notice: new Color('#ffed72', 'dark'),
+    warning: new Color('#ffb270', 'dark'),
+    danger: new Color('#ff6d7e', 'dark'),
+  },
+
+  components: {
+    appHeader: {
+      background: new Color('#1d2528', 'dark'),
+      foreground: new Color('#b2b9bd', 'dark'),
+      foregroundSubtle: new Color('#767b81', 'dark'),
+      foregroundSubtler: new Color('#696d77', 'dark'),
+    },
+    button: {
+      colors: {
+        primary: new Color('#baa0f8', 'dark').lower(0.1),
+        secondary: new Color('#b8c4c3', 'dark').lower(0.1),
+        info: new Color('#7cd5f1', 'dark').lower(0.1),
+        success: new Color('#a2e57b', 'dark').lower(0.1),
+        notice: new Color('#ffed72', 'dark').lower(0.1),
+        warning: new Color('#ffb270', 'dark').lower(0.1),
+        danger: new Color('#ff6d7e', 'dark').lower(0.1),
+      },
+    },
+  },
+};
+
+const monokaiProOctagon: YaakTheme = {
+  id: 'monokai-pro-octagon',
+  name: 'Monokai Pro Octagon',
+  background: new Color('#282a3a', 'dark'),
+  foreground: new Color('#eaf2f1', 'dark'),
+  foregroundSubtle: new Color('#b2b9bd', 'dark'),
+  foregroundSubtler: new Color('#767b81', 'dark'),
+
+  colors: {
+    primary: new Color('#c39ac9', 'dark'),
+    secondary: new Color('#b2b9bd', 'dark'),
+    info: new Color('#9cd1bb', 'dark'),
+    success: new Color('#bad761', 'dark'),
+    notice: new Color('#ffd76d', 'dark'),
+    warning: new Color('#ff9b5e', 'dark'),
+    danger: new Color('#ff657a', 'dark'),
+  },
+
+  components: {
+    appHeader: {
+      background: new Color('#1e1f2b', 'dark'),
+      foreground: new Color('#b2b9bd', 'dark'),
+      foregroundSubtle: new Color('#767b81', 'dark'),
+      foregroundSubtler: new Color('#696d77', 'dark'),
+    },
+    button: {
+      colors: {
+        primary: new Color('#c39ac9', 'dark').lower(0.1).desaturate(0.1),
+        secondary: new Color('#b2b9bd', 'dark').lower(0.1).desaturate(0.1),
+        info: new Color('#9cd1bb', 'dark').lower(0.1).desaturate(0.1),
+        success: new Color('#bad761', 'dark').lower(0.1).desaturate(0.1),
+        notice: new Color('#ffd76d', 'dark').lower(0.1).desaturate(0.1),
+        warning: new Color('#ff9b5e', 'dark').lower(0.1).desaturate(0.1),
+        danger: new Color('#ff657a', 'dark').lower(0.1).desaturate(0.1),
+      },
+    },
+  },
+};
+
+const monokaiProRistretto: YaakTheme = {
+  id: 'monokai-pro-ristretto',
+  name: 'Monokai Pro Ristretto',
+  background: new Color('#2c2525', 'dark'),
+  foreground: new Color('#fff1f3', 'dark'),
+  foregroundSubtle: new Color('#c3b7b8', 'dark'),
+  foregroundSubtler: new Color('#948a8b', 'dark'),
+
+  colors: {
+    primary: new Color('#a8a9eb', 'dark'),
+    secondary: new Color('#c3b7b8', 'dark'),
+    info: new Color('#85dacc', 'dark'),
+    success: new Color('#adda78', 'dark'),
+    notice: new Color('#f9cc6c', 'dark'),
+    warning: new Color('#f38d70', 'dark'),
+    danger: new Color('#fd6883', 'dark'),
+  },
+
+  components: {
+    appHeader: {
+      background: new Color('#211c1c', 'dark'),
+      foreground: new Color('#c3b7b8', 'dark'),
+      foregroundSubtle: new Color('#948a8b', 'dark'),
+      foregroundSubtler: new Color('#72696a', 'dark'),
+    },
+    button: {
+      colors: {
+        primary: new Color('#a8a9eb', 'dark').lower(0.1),
+        secondary: new Color('#c3b7b8', 'dark').lower(0.1),
+        info: new Color('#85dacc', 'dark').lower(0.1),
+        success: new Color('#adda78', 'dark').lower(0.1),
+        notice: new Color('#f9cc6c', 'dark').lower(0.1),
+        warning: new Color('#f38d70', 'dark').lower(0.1),
+        danger: new Color('#fd6883', 'dark').lower(0.1),
+      },
+    },
+  },
+};
+
+const monokaiProSpectrum: YaakTheme = {
+  id: 'monokai-pro-spectrum',
+  name: 'Monokai Pro Spectrum',
+  background: new Color('#222222', 'dark'),
+  foreground: new Color('#f7f1ff', 'dark'),
+  foregroundSubtle: new Color('#bab6c0', 'dark'),
+  foregroundSubtler: new Color('#8b888f', 'dark'),
+
+  colors: {
+    primary: new Color('#948ae3', 'dark'),
+    secondary: new Color('#bab6c0', 'dark'),
+    info: new Color('#5ad4e6', 'dark'),
+    success: new Color('#7bd88f', 'dark'),
+    notice: new Color('#fce566', 'dark'),
+    warning: new Color('#fd9353', 'dark'),
+    danger: new Color('#fc618d', 'dark'),
+  },
+
+  components: {
+    appHeader: {
+      background: new Color('#191919', 'dark'),
+      foreground: new Color('#bab6c0', 'dark'),
+      foregroundSubtle: new Color('#8b888f', 'dark'),
+      foregroundSubtler: new Color('#69676c', 'dark'),
+    },
+    button: {
+      colors: {
+        primary: new Color('#948ae3', 'dark').lower(0.1),
+        secondary: new Color('#bab6c0', 'dark').lower(0.1),
+        info: new Color('#5ad4e6', 'dark').lower(0.1),
+        success: new Color('#7bd88f', 'dark').lower(0.1),
+        notice: new Color('#fce566', 'dark').lower(0.1),
+        warning: new Color('#fd9353', 'dark').lower(0.1),
+        danger: new Color('#fc618d', 'dark').lower(0.1),
+      },
+    },
+  },
+};
+
+export const monokaiPro = [
+  monokaiProDefault,
+  monokaiProClassic,
+  monokaiProMachine,
+  monokaiProOctagon,
+  monokaiProRistretto,
+  monokaiProSpectrum,
+];

src-web/lib/theme/themes/relaxing.ts

@@ -0,0 +1,20 @@
+import { Color } from '../color';
+import type { YaakTheme } from '../window';
+
+const relaxingDefault: YaakTheme = {
+  name: 'Relaxing',
+  id: 'relaxing',
+  background: new Color('#2b1e3b', 'dark'),
+  foreground: new Color('#ede2f5', 'dark'),
+  colors: {
+    primary: new Color('#cba6f7', 'dark'),
+    secondary: new Color('#bac2de', 'dark'),
+    info: new Color('#89b4fa', 'dark'),
+    success: new Color('#a6e3a1', 'dark'),
+    notice: new Color('#f9e2af', 'dark'),
+    warning: new Color('#fab387', 'dark'),
+    danger: new Color('#f38ba8', 'dark'),
+  },
+};
+
+export const relaxing = [relaxingDefault];

src-web/lib/theme/themes/rose-pine.ts

@@ -0,0 +1,108 @@
+import { Color } from '../color';
+import type { YaakTheme } from '../window';
+
+const rosePineClassic: YaakTheme = {
+  id: 'rose-pine',
+  name: 'Rosé Pine',
+  background: new Color('#191724', 'dark'),
+  foreground: new Color('#e0def4', 'dark'),
+  foregroundSubtle: new Color('#908caa', 'dark'),
+  foregroundSubtler: new Color('#6e6a86', 'dark'),
+  colors: {
+    primary: new Color('#c4a7e7', 'dark'),
+    secondary: new Color('#6e6a86', 'dark'),
+    info: new Color('#67abcb', 'dark'),
+    success: new Color('#9cd8d8', 'dark'),
+    notice: new Color('#f6c177', 'dark'),
+    warning: new Color('#f1a3a1', 'dark'),
+    danger: new Color('#eb6f92', 'dark'),
+  },
+  components: {
+    responsePane: {
+      background: new Color('#1f1d2e', 'dark'),
+    },
+    sidebar: {
+      background: new Color('#1f1d2e', 'dark'),
+    },
+    menu: {
+      background: new Color('#393552', 'dark'),
+      foregroundSubtle: new Color('#908caa', 'dark').lift(0.15),
+      foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15),
+    },
+  },
+};
+
+const rosePineMoon: YaakTheme = {
+  id: 'rose-pine-moon',
+  name: 'Rosé Pine Moon',
+  background: new Color('#232136', 'dark'),
+  foreground: new Color('#e0def4', 'dark'),
+  foregroundSubtle: new Color('#908caa', 'dark'),
+  foregroundSubtler: new Color('#6e6a86', 'dark'),
+  colors: {
+    primary: new Color('#c4a7e7', 'dark'),
+    secondary: new Color('#908caa', 'dark'),
+    info: new Color('#68aeca', 'dark'),
+    success: new Color('#9ccfd8', 'dark'),
+    notice: new Color('#f6c177', 'dark'),
+    warning: new Color('#ea9a97', 'dark'),
+    danger: new Color('#eb6f92', 'dark'),
+  },
+  components: {
+    responsePane: {
+      background: new Color('#2a273f', 'dark'),
+    },
+    sidebar: {
+      background: new Color('#2a273f', 'dark'),
+    },
+    menu: {
+      background: new Color('#393552', 'dark'),
+      foregroundSubtle: new Color('#908caa', 'dark').lift(0.15),
+      foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15),
+    },
+  },
+};
+
+const rosePineDawn: YaakTheme = {
+  id: 'rose-pine-dawn',
+  name: 'Rosé Pine Dawn',
+  background: new Color('#faf4ed', 'light'),
+  backgroundHighlight: new Color('#dfdad9', 'light'),
+  backgroundHighlightSecondary: new Color('#f4ede8', 'light'),
+  foreground: new Color('#575279', 'light'),
+  foregroundSubtle: new Color('#797593', 'light'),
+  foregroundSubtler: new Color('#9893a5', 'light'),
+  colors: {
+    primary: new Color('#9070ad', 'light'),
+    secondary: new Color('#6e6a86', 'light'),
+    info: new Color('#2d728d', 'light'),
+    success: new Color('#4f8c96', 'light'),
+    notice: new Color('#cb862d', 'light'),
+    warning: new Color('#ce7b78', 'light'),
+    danger: new Color('#b4637a', 'light'),
+  },
+  components: {
+    responsePane: {
+      backgroundHighlight: new Color('#e8e4e2', 'light'),
+    },
+    sidebar: {
+      backgroundHighlight: new Color('#e8e4e2', 'light'),
+    },
+    appHeader: {
+      backgroundHighlight: new Color('#e8e4e2', 'light'),
+    },
+    input: {
+      backgroundHighlight: new Color('#dfdad9', 'light'),
+    },
+    dialog: {
+      backgroundHighlight: new Color('#e8e4e2', 'light'),
+    },
+    menu: {
+      background: new Color('#f2e9e1', 'light'),
+      backgroundHighlight: new Color('#dfdad9', 'light'),
+      backgroundHighlightSecondary: new Color('#6e6a86', 'light'),
+    },
+  },
+};
+
+export const rosePine = [rosePineClassic, rosePineDawn, rosePineMoon];

src-web/lib/theme/themes/yaak.ts

@@ -0,0 +1,84 @@
+import { Color } from '../color';
+import type { YaakTheme } from '../window';
+
+export const yaakLight: YaakTheme = {
+  id: 'yaak-light',
+  name: 'Yaak',
+  background: new Color('hsl(216,24%,100%)', 'light'),
+  backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
+  backgroundHighlightSecondary: new Color('hsl(216,24%,87%)', 'light'),
+  foreground: new Color('hsl(219,23%,15%)', 'light'),
+  foregroundSubtle: new Color('hsl(219,23%,15%)', 'light').lower(0.3),
+  foregroundSubtler: new Color('hsl(219,23%,15%)', 'light').lower(0.5),
+  colors: {
+    primary: new Color('hsl(266,100%,70%)', 'light'),
+    secondary: new Color('hsl(220,24%,59%)', 'light'),
+    info: new Color('hsl(206,100%,48%)', 'light'),
+    success: new Color('hsl(155,95%,33%)', 'light'),
+    notice: new Color('hsl(45,100%,41%)', 'light'),
+    warning: new Color('hsl(30,100%,43%)', 'light'),
+    danger: new Color('hsl(335,75%,57%)', 'light'),
+  },
+  components: {
+    sidebar: {
+      background: new Color('hsl(216,24%,97%)', 'light'),
+      backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
+      backgroundHighlightSecondary: new Color('hsl(216,24%,90%)', 'light'),
+    },
+  },
+};
+
+export const yaakDark: YaakTheme = {
+  id: 'yaak-dark',
+  name: 'Yaak',
+  background: new Color('hsl(244,23%,13%)', 'dark'),
+  backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
+  backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
+  foreground: new Color('hsl(245,23%,86%)', 'dark'),
+  foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
+  foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'),
+
+  colors: {
+    primary: new Color('hsl(266,100%,79%)', 'dark'),
+    secondary: new Color('hsl(245,23%,60%)', 'dark'),
+    info: new Color('hsl(206,100%,63%)', 'dark'),
+    success: new Color('hsl(150,99%,44%)', 'dark'),
+    notice: new Color('hsl(48,80%,63%)', 'dark'),
+    warning: new Color('hsl(28,100%,61%)', 'dark'),
+    danger: new Color('hsl(342,90%,68%)', 'dark'),
+  },
+
+  components: {
+    button: {
+      colors: {
+        primary: new Color('hsl(266,100%,79%)', 'dark').lower(0.1),
+        secondary: new Color('hsl(245,23%,60%)', 'dark').lower(0.1),
+        info: new Color('hsl(206,100%,63%)', 'dark').lower(0.1),
+        success: new Color('hsl(150,99%,44%)', 'dark').lower(0.1),
+        notice: new Color('hsl(48,80%,63%)', 'dark').lower(0.1),
+        warning: new Color('hsl(28,100%,61%)', 'dark').lower(0.1),
+        danger: new Color('hsl(342,90%,68%)', 'dark').lower(0.1),
+      },
+    },
+    input: {
+      backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
+    },
+    dialog: {
+      backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
+    },
+    sidebar: {
+      background: new Color('hsl(243,23%,16%)', 'dark'),
+      backgroundHighlight: new Color('hsl(244,23%,22%)', 'dark'),
+    },
+    responsePane: {
+      background: new Color('hsl(243,23%,16%)', 'dark'),
+      backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08),
+    },
+    appHeader: {
+      background: new Color('hsl(244,23%,12%)', 'dark'),
+      backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.1),
+    },
+  },
+};
+
+export const yaak = [yaakDark, yaakLight];