Add VSCode themes plugin with 30+ popular themes (#336)

Co-authored-by: Claude <noreply@anthropic.com>
2026-07-03 19:41:48 +02:00 · 2025-12-31 10:05:55 -08:00
parent 6b9b207e1c
commit cd65ef8dbe
38 changed files with 2487 additions and 786 deletions
@@ -0,0 +1,122 @@
+import type { Theme } from '@yaakapp/api';
+
+export const ayuDark: Theme = {
+  id: 'ayu-dark',
+  label: 'Ayu Dark',
+  dark: true,
+  base: {
+    surface: 'hsl(220, 25%, 10%)',
+    surfaceHighlight: 'hsl(220, 20%, 15%)',
+    text: 'hsl(210, 22%, 78%)',
+    textSubtle: 'hsl(40, 13%, 50%)',
+    textSubtlest: 'hsl(220, 10%, 40%)',
+    primary: 'hsl(38, 100%, 56%)',
+    secondary: 'hsl(210, 15%, 55%)',
+    info: 'hsl(200, 80%, 60%)',
+    success: 'hsl(100, 75%, 60%)',
+    notice: 'hsl(38, 100%, 56%)',
+    warning: 'hsl(25, 100%, 60%)',
+    danger: 'hsl(345, 80%, 60%)',
+  },
+  components: {
+    dialog: {
+      surface: 'hsl(220, 25%, 8%)',
+    },
+    sidebar: {
+      surface: 'hsl(220, 22%, 12%)',
+      border: 'hsl(220, 20%, 16%)',
+    },
+    appHeader: {
+      surface: 'hsl(220, 25%, 7%)',
+      border: 'hsl(220, 20%, 13%)',
+    },
+    responsePane: {
+      surface: 'hsl(220, 22%, 12%)',
+      border: 'hsl(220, 20%, 16%)',
+    },
+    button: {
+      primary: 'hsl(38, 100%, 50%)',
+      secondary: 'hsl(210, 15%, 48%)',
+      info: 'hsl(200, 80%, 53%)',
+      success: 'hsl(100, 75%, 53%)',
+      notice: 'hsl(38, 100%, 50%)',
+      warning: 'hsl(25, 100%, 53%)',
+      danger: 'hsl(345, 80%, 53%)',
+    },
+  },
+};
+
+export const ayuMirage: Theme = {
+  id: 'ayu-mirage',
+  label: 'Ayu Mirage',
+  dark: true,
+  base: {
+    surface: 'hsl(226, 23%, 17%)',
+    surfaceHighlight: 'hsl(226, 20%, 22%)',
+    text: 'hsl(212, 15%, 81%)',
+    textSubtle: 'hsl(212, 12%, 55%)',
+    textSubtlest: 'hsl(212, 10%, 45%)',
+    primary: 'hsl(38, 100%, 67%)',
+    secondary: 'hsl(212, 12%, 55%)',
+    info: 'hsl(200, 80%, 70%)',
+    success: 'hsl(100, 50%, 68%)',
+    notice: 'hsl(38, 100%, 67%)',
+    warning: 'hsl(25, 100%, 70%)',
+    danger: 'hsl(345, 80%, 70%)',
+  },
+  components: {
+    dialog: {
+      surface: 'hsl(226, 23%, 14%)',
+    },
+    sidebar: {
+      surface: 'hsl(226, 22%, 15%)',
+      border: 'hsl(226, 20%, 20%)',
+    },
+    appHeader: {
+      surface: 'hsl(226, 23%, 12%)',
+      border: 'hsl(226, 20%, 17%)',
+    },
+    responsePane: {
+      surface: 'hsl(226, 22%, 15%)',
+      border: 'hsl(226, 20%, 20%)',
+    },
+    button: {
+      primary: 'hsl(38, 100%, 60%)',
+      info: 'hsl(200, 80%, 63%)',
+      success: 'hsl(100, 50%, 61%)',
+      notice: 'hsl(38, 100%, 60%)',
+      warning: 'hsl(25, 100%, 63%)',
+      danger: 'hsl(345, 80%, 63%)',
+    },
+  },
+};
+
+export const ayuLight: Theme = {
+  id: 'ayu-light',
+  label: 'Ayu Light',
+  dark: false,
+  base: {
+    surface: 'hsl(40, 22%, 97%)',
+    surfaceHighlight: 'hsl(40, 20%, 93%)',
+    text: 'hsl(214, 10%, 35%)',
+    textSubtle: 'hsl(214, 8%, 50%)',
+    textSubtlest: 'hsl(214, 6%, 60%)',
+    primary: 'hsl(35, 100%, 45%)',
+    secondary: 'hsl(214, 8%, 50%)',
+    info: 'hsl(200, 75%, 45%)',
+    success: 'hsl(100, 60%, 40%)',
+    notice: 'hsl(35, 100%, 45%)',
+    warning: 'hsl(22, 100%, 50%)',
+    danger: 'hsl(345, 70%, 55%)',
+  },
+  components: {
+    sidebar: {
+      surface: 'hsl(40, 20%, 95%)',
+      border: 'hsl(40, 15%, 90%)',
+    },
+    appHeader: {
+      surface: 'hsl(40, 20%, 93%)',
+      border: 'hsl(40, 15%, 88%)',
+    },
+  },
+};