feat: add vague theme

packages/opencode/src/cli/cmd/tui/context/theme.tsx

@@ -32,6 +32,7 @@ import rosepine from "./theme/rosepine.json" with { type: "json" }
 import solarized from "./theme/solarized.json" with { type: "json" }
 import synthwave84 from "./theme/synthwave84.json" with { type: "json" }
 import tokyonight from "./theme/tokyonight.json" with { type: "json" }
+import vague from "./theme/vague.json" with { type: "json" }
 import vercel from "./theme/vercel.json" with { type: "json" }
 import vesper from "./theme/vesper.json" with { type: "json" }
 import zenburn from "./theme/zenburn.json" with { type: "json" }
@@ -115,6 +116,7 @@ export const DEFAULT_THEMES: Record<string, ThemeJson> = {
   solarized,
   synthwave84,
   tokyonight,
+  vague,
   vesper,
   vercel,
   zenburn,

packages/opencode/src/cli/cmd/tui/context/theme/vague.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "black": "#141415",
+    "shadow": "#1c1c24",
+    "graphite": "#252530",
+    "onyx": "#333738",
+    "muted": "#606079",
+    "gray": "#878787",
+    "white": "#cdcdcd",
+    "yellow": "#f3be7c",
+    "amber": "#e8b589",
+    "gold": "#e0a363",
+    "peach": "#c48282",
+    "red": "#d8647e",
+    "storm": "#405065",
+    "lilac": "#c3c3d5",
+    "cyan": "#aeaed1",
+    "magenta": "#bb9dbd",
+    "aqua": "#b4d4cf",
+    "lavender": "#90a0b5",
+    "teal": "#9bb4bc",
+    "blue": "#6e94b2",
+    "iris": "#7e98e8",
+    "green": "#7fa563",
+    "diffAdd": "#293125",
+    "diffDelete": "#3b242a"
+  },
+  "theme": {
+    "primary": { "dark": "iris", "light": "iris" },
+    "secondary": { "dark": "magenta", "light": "magenta" },
+    "accent": { "dark": "peach", "light": "peach" },
+    "error": { "dark": "red", "light": "red" },
+    "warning": { "dark": "yellow", "light": "yellow" },
+    "success": { "dark": "green", "light": "green" },
+    "info": { "dark": "iris", "light": "iris" },
+    "text": { "dark": "white", "light": "white" },
+    "textMuted": { "dark": "muted", "light": "muted" },
+    "background": { "dark": "black", "light": "black" },
+    "backgroundPanel": { "dark": "shadow", "light": "shadow" },
+    "backgroundElement": { "dark": "graphite", "light": "graphite" },
+    "border": { "dark": "gray", "light": "gray" },
+    "borderActive": { "dark": "lilac", "light": "lilac" },
+    "borderSubtle": { "dark": "onyx", "light": "onyx" },
+    "diffAdded": { "dark": "green", "light": "green" },
+    "diffRemoved": { "dark": "red", "light": "red" },
+    "diffContext": { "dark": "muted", "light": "muted" },
+    "diffHunkHeader": { "dark": "yellow", "light": "yellow" },
+    "diffHighlightAdded": { "dark": "green", "light": "green" },
+    "diffHighlightRemoved": { "dark": "red", "light": "red" },
+    "diffAddedBg": { "dark": "diffAdd", "light": "diffAdd" },
+    "diffRemovedBg": { "dark": "diffDelete", "light": "diffDelete" },
+    "diffContextBg": { "dark": "shadow", "light": "shadow" },
+    "diffLineNumber": { "dark": "muted", "light": "muted" },
+    "diffAddedLineNumberBg": { "dark": "diffAdd", "light": "diffAdd" },
+    "diffRemovedLineNumberBg": { "dark": "diffDelete", "light": "diffDelete" },
+    "markdownText": { "dark": "white", "light": "white" },
+    "markdownHeading": { "dark": "peach", "light": "peach" },
+    "markdownLink": { "dark": "iris", "light": "iris" },
+    "markdownLinkText": { "dark": "lavender", "light": "lavender" },
+    "markdownCode": { "dark": "amber", "light": "amber" },
+    "markdownBlockQuote": { "dark": "yellow", "light": "yellow" },
+    "markdownEmph": { "dark": "yellow", "light": "yellow" },
+    "markdownStrong": { "dark": "gold", "light": "gold" },
+    "markdownHorizontalRule": { "dark": "muted", "light": "muted" },
+    "markdownListItem": { "dark": "iris", "light": "iris" },
+    "markdownListEnumeration": { "dark": "lavender", "light": "lavender" },
+    "markdownImage": { "dark": "iris", "light": "iris" },
+    "markdownImageText": { "dark": "lavender", "light": "lavender" },
+    "markdownCodeBlock": { "dark": "white", "light": "white" },
+    "syntaxComment": { "dark": "muted", "light": "muted" },
+    "syntaxKeyword": { "dark": "blue", "light": "blue" },
+    "syntaxFunction": { "dark": "peach", "light": "peach" },
+    "syntaxVariable": { "dark": "lilac", "light": "lilac" },
+    "syntaxString": { "dark": "amber", "light": "amber" },
+    "syntaxNumber": { "dark": "gold", "light": "gold" },
+    "syntaxType": { "dark": "teal", "light": "teal" },
+    "syntaxOperator": { "dark": "lavender", "light": "lavender" },
+    "syntaxPunctuation": { "dark": "white", "light": "white" }
+  }
+}

packages/ui/src/theme/context.tsx

@@ -75,6 +75,7 @@ const names: Record<string, string> = {
   solarized: "Solarized",
   synthwave84: "Synthwave '84",
   tokyonight: "Tokyonight",
+  vague: "Vague",
   vercel: "Vercel",
   vesper: "Vesper",
   zenburn: "Zenburn",

packages/ui/src/theme/default-themes.ts

@@ -33,6 +33,7 @@ import shadesOfPurpleThemeJson from "./themes/shadesofpurple.json"
 import solarizedThemeJson from "./themes/solarized.json"
 import synthwave84ThemeJson from "./themes/synthwave84.json"
 import tokyonightThemeJson from "./themes/tokyonight.json"
+import vagueThemeJson from "./themes/vague.json"
 import vercelThemeJson from "./themes/vercel.json"
 import vesperThemeJson from "./themes/vesper.json"
 import zenburnThemeJson from "./themes/zenburn.json"
@@ -71,6 +72,7 @@ export const shadesOfPurpleTheme = shadesOfPurpleThemeJson as DesktopTheme
 export const solarizedTheme = solarizedThemeJson as DesktopTheme
 export const synthwave84Theme = synthwave84ThemeJson as DesktopTheme
 export const tokyonightTheme = tokyonightThemeJson as DesktopTheme
+export const vagueTheme = vagueThemeJson as DesktopTheme
 export const vercelTheme = vercelThemeJson as DesktopTheme
 export const vesperTheme = vesperThemeJson as DesktopTheme
 export const zenburnTheme = zenburnThemeJson as DesktopTheme
@@ -110,6 +112,7 @@ export const DEFAULT_THEMES: Record<string, DesktopTheme> = {
   solarized: solarizedTheme,
   synthwave84: synthwave84Theme,
   tokyonight: tokyonightTheme,
+  vague: vagueTheme,
   vercel: vercelTheme,
   vesper: vesperTheme,
   zenburn: zenburnTheme,

packages/ui/src/theme/index.ts

@@ -69,6 +69,7 @@ export {
   solarizedTheme,
   synthwave84Theme,
   tokyonightTheme,
+  vagueTheme,
   vercelTheme,
   vesperTheme,
   zenburnTheme,

packages/ui/src/theme/themes/vague.json

@@ -0,0 +1,97 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Vague",
+  "id": "vague",
+  "light": {
+    "palette": {
+      "neutral": "#cdcdcd",
+      "ink": "#141415",
+      "primary": "#7e98e8",
+      "accent": "#c48282",
+      "success": "#7fa563",
+      "warning": "#f3be7c",
+      "error": "#d8647e",
+      "info": "#6e94b2",
+      "interactive": "#7e98e8",
+      "diffAdd": "#7fa563",
+      "diffDelete": "#d8647e"
+    },
+    "overrides": {
+      "text-weak": "#606079",
+      "background-base": "#cdcdcd",
+      "surface-float-base": "#b4d4cf",
+      "surface-float-base-hover": "#c3c3d5",
+      "syntax-comment": "#606079",
+      "syntax-keyword": "#6e94b2",
+      "syntax-string": "#e8b589",
+      "syntax-primitive": "#7e98e8",
+      "syntax-variable": "#bb9dbd",
+      "syntax-property": "#7e98e8",
+      "syntax-type": "#9bb4bc",
+      "syntax-constant": "#e0a363",
+      "syntax-operator": "#90a0b5",
+      "syntax-punctuation": "#141415",
+      "syntax-object": "#bb9dbd",
+      "markdown-heading": "#c48282",
+      "markdown-text": "#141415",
+      "markdown-link": "#7e98e8",
+      "markdown-link-text": "#90a0b5",
+      "markdown-code": "#e8b589",
+      "markdown-block-quote": "#f3be7c",
+      "markdown-emph": "#f3be7c",
+      "markdown-strong": "#e0a363",
+      "markdown-horizontal-rule": "#606079",
+      "markdown-list-item": "#7e98e8",
+      "markdown-list-enumeration": "#90a0b5",
+      "markdown-image": "#7e98e8",
+      "markdown-image-text": "#90a0b5",
+      "markdown-code-block": "#141415"
+    }
+  },
+  "dark": {
+    "palette": {
+      "neutral": "#141415",
+      "ink": "#cdcdcd",
+      "primary": "#7e98e8",
+      "accent": "#c48282",
+      "success": "#7fa563",
+      "warning": "#f3be7c",
+      "error": "#d8647e",
+      "info": "#6e94b2",
+      "interactive": "#7e98e8",
+      "diffAdd": "#7fa563",
+      "diffDelete": "#d8647e"
+    },
+    "overrides": {
+      "text-weak": "#606079",
+      "background-base": "#141415",
+      "surface-float-base": "#1c1c24",
+      "surface-float-base-hover": "#252530",
+      "syntax-comment": "#606079",
+      "syntax-keyword": "#6e94b2",
+      "syntax-string": "#e8b589",
+      "syntax-primitive": "#7e98e8",
+      "syntax-variable": "#c3c3d5",
+      "syntax-property": "#b4d4cf",
+      "syntax-type": "#9bb4bc",
+      "syntax-constant": "#e0a363",
+      "syntax-operator": "#90a0b5",
+      "syntax-punctuation": "#cdcdcd",
+      "syntax-object": "#c3c3d5",
+      "markdown-heading": "#c48282",
+      "markdown-text": "#cdcdcd",
+      "markdown-link": "#7e98e8",
+      "markdown-link-text": "#90a0b5",
+      "markdown-code": "#e8b589",
+      "markdown-block-quote": "#f3be7c",
+      "markdown-emph": "#f3be7c",
+      "markdown-strong": "#e0a363",
+      "markdown-horizontal-rule": "#606079",
+      "markdown-list-item": "#7e98e8",
+      "markdown-list-enumeration": "#90a0b5",
+      "markdown-image": "#7e98e8",
+      "markdown-image-text": "#90a0b5",
+      "markdown-code-block": "#cdcdcd"
+    }
+  }
+}