feat: add Carbonfox theme (#8723)

4 files changed, 375 insertions, 0 deletions

diff --git a/packages/opencode/src/cli/cmd/tui/context/theme.tsx b/packages/opencode/src/cli/cmd/tui/context/theme.tsx
index 127be0dfc..7cde1b964 100644
--- a/packages/opencode/src/cli/cmd/tui/context/theme.tsx
+++ b/packages/opencode/src/cli/cmd/tui/context/theme.tsx
@@ -35,6 +35,7 @@ import tokyonight from "./theme/tokyonight.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" }
+import carbonfox from "./theme/carbonfox.json" with { type: "json" }
 import { useKV } from "./kv"
 import { useRenderer } from "@opentui/solid"
 import { createStore, produce } from "solid-js/store"
@@ -170,6 +171,7 @@ export const DEFAULT_THEMES: Record<string, ThemeJson> = {
   vesper,
   vercel,
   zenburn,
+  carbonfox,
 }
 
 function resolveTheme(theme: ThemeJson, mode: "dark" | "light") {
diff --git a/packages/opencode/src/cli/cmd/tui/context/theme/carbonfox.json b/packages/opencode/src/cli/cmd/tui/context/theme/carbonfox.json
new file mode 100644
index 000000000..b91de1fea
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/context/theme/carbonfox.json
@@ -0,0 +1,248 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "bg0": "#0d0d0d",
+    "bg1": "#161616",
+    "bg1a": "#1a1a1a",
+    "bg2": "#1e1e1e",
+    "bg3": "#262626",
+    "bg4": "#303030",
+    "fg0": "#ffffff",
+    "fg1": "#f2f4f8",
+    "fg2": "#a9afbc",
+    "fg3": "#7d848f",
+    "lbg0": "#ffffff",
+    "lbg1": "#f4f4f4",
+    "lbg2": "#e8e8e8",
+    "lbg3": "#dcdcdc",
+    "lfg0": "#000000",
+    "lfg1": "#161616",
+    "lfg2": "#525252",
+    "lfg3": "#6f6f6f",
+    "red": "#ee5396",
+    "green": "#25be6a",
+    "yellow": "#08bdba",
+    "blue": "#78a9ff",
+    "magenta": "#be95ff",
+    "cyan": "#33b1ff",
+    "white": "#dfdfe0",
+    "orange": "#3ddbd9",
+    "pink": "#ff7eb6",
+    "blueBright": "#8cb6ff",
+    "cyanBright": "#52c7ff",
+    "greenBright": "#46c880",
+    "redLight": "#9f1853",
+    "greenLight": "#198038",
+    "yellowLight": "#007d79",
+    "blueLight": "#0043ce",
+    "magentaLight": "#6929c4",
+    "cyanLight": "#0072c3",
+    "warning": "#f1c21b",
+    "diffGreen": "#50fa7b",
+    "diffRed": "#ff6b6b",
+    "diffGreenBg": "#0f2418",
+    "diffRedBg": "#2a1216"
+  },
+  "theme": {
+    "primary": {
+      "dark": "cyan",
+      "light": "blueLight"
+    },
+    "secondary": {
+      "dark": "blue",
+      "light": "blueLight"
+    },
+    "accent": {
+      "dark": "pink",
+      "light": "redLight"
+    },
+    "error": {
+      "dark": "red",
+      "light": "redLight"
+    },
+    "warning": {
+      "dark": "warning",
+      "light": "yellowLight"
+    },
+    "success": {
+      "dark": "green",
+      "light": "greenLight"
+    },
+    "info": {
+      "dark": "blue",
+      "light": "blueLight"
+    },
+    "text": {
+      "dark": "fg1",
+      "light": "lfg1"
+    },
+    "textMuted": {
+      "dark": "fg3",
+      "light": "lfg3"
+    },
+    "background": {
+      "dark": "bg1",
+      "light": "lbg0"
+    },
+    "backgroundPanel": {
+      "dark": "bg1a",
+      "light": "lbg1"
+    },
+    "backgroundElement": {
+      "dark": "bg2",
+      "light": "lbg1"
+    },
+    "border": {
+      "dark": "bg4",
+      "light": "lbg3"
+    },
+    "borderActive": {
+      "dark": "cyan",
+      "light": "blueLight"
+    },
+    "borderSubtle": {
+      "dark": "bg3",
+      "light": "lbg2"
+    },
+    "diffAdded": {
+      "dark": "diffGreen",
+      "light": "greenLight"
+    },
+    "diffRemoved": {
+      "dark": "diffRed",
+      "light": "redLight"
+    },
+    "diffContext": {
+      "dark": "fg3",
+      "light": "lfg3"
+    },
+    "diffHunkHeader": {
+      "dark": "blue",
+      "light": "blueLight"
+    },
+    "diffHighlightAdded": {
+      "dark": "#7dffaa",
+      "light": "greenLight"
+    },
+    "diffHighlightRemoved": {
+      "dark": "#ff9999",
+      "light": "redLight"
+    },
+    "diffAddedBg": {
+      "dark": "diffGreenBg",
+      "light": "#defbe6"
+    },
+    "diffRemovedBg": {
+      "dark": "diffRedBg",
+      "light": "#fff1f1"
+    },
+    "diffContextBg": {
+      "dark": "bg1",
+      "light": "lbg1"
+    },
+    "diffLineNumber": {
+      "dark": "fg3",
+      "light": "lfg3"
+    },
+    "diffAddedLineNumberBg": {
+      "dark": "diffGreenBg",
+      "light": "#defbe6"
+    },
+    "diffRemovedLineNumberBg": {
+      "dark": "diffRedBg",
+      "light": "#fff1f1"
+    },
+    "markdownText": {
+      "dark": "fg1",
+      "light": "lfg1"
+    },
+    "markdownHeading": {
+      "dark": "blueBright",
+      "light": "blueLight"
+    },
+    "markdownLink": {
+      "dark": "blue",
+      "light": "blueLight"
+    },
+    "markdownLinkText": {
+      "dark": "cyan",
+      "light": "cyanLight"
+    },
+    "markdownCode": {
+      "dark": "green",
+      "light": "greenLight"
+    },
+    "markdownBlockQuote": {
+      "dark": "fg3",
+      "light": "lfg3"
+    },
+    "markdownEmph": {
+      "dark": "magenta",
+      "light": "magentaLight"
+    },
+    "markdownStrong": {
+      "dark": "fg0",
+      "light": "lfg0"
+    },
+    "markdownHorizontalRule": {
+      "dark": "bg4",
+      "light": "lbg3"
+    },
+    "markdownListItem": {
+      "dark": "cyan",
+      "light": "cyanLight"
+    },
+    "markdownListEnumeration": {
+      "dark": "cyan",
+      "light": "cyanLight"
+    },
+    "markdownImage": {
+      "dark": "blue",
+      "light": "blueLight"
+    },
+    "markdownImageText": {
+      "dark": "cyan",
+      "light": "cyanLight"
+    },
+    "markdownCodeBlock": {
+      "dark": "fg2",
+      "light": "lfg2"
+    },
+    "syntaxComment": {
+      "dark": "fg3",
+      "light": "lfg3"
+    },
+    "syntaxKeyword": {
+      "dark": "magenta",
+      "light": "magentaLight"
+    },
+    "syntaxFunction": {
+      "dark": "blueBright",
+      "light": "blueLight"
+    },
+    "syntaxVariable": {
+      "dark": "white",
+      "light": "lfg1"
+    },
+    "syntaxString": {
+      "dark": "green",
+      "light": "greenLight"
+    },
+    "syntaxNumber": {
+      "dark": "orange",
+      "light": "yellowLight"
+    },
+    "syntaxType": {
+      "dark": "yellow",
+      "light": "yellowLight"
+    },
+    "syntaxOperator": {
+      "dark": "fg2",
+      "light": "lfg2"
+    },
+    "syntaxPunctuation": {
+      "dark": "fg2",
+      "light": "lfg1"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/default-themes.ts b/packages/ui/src/theme/default-themes.ts
index 54c96251c..e90892a8e 100644
--- a/packages/ui/src/theme/default-themes.ts
+++ b/packages/ui/src/theme/default-themes.ts
@@ -11,6 +11,7 @@ import oneDarkProThemeJson from "./themes/onedarkpro.json"
 import shadesOfPurpleThemeJson from "./themes/shadesofpurple.json"
 import nightowlThemeJson from "./themes/nightowl.json"
 import vesperThemeJson from "./themes/vesper.json"
+import carbonfoxThemeJson from "./themes/carbonfox.json"
 
 export const oc1Theme = oc1ThemeJson as DesktopTheme
 export const tokyonightTheme = tokyoThemeJson as DesktopTheme
@@ -24,6 +25,7 @@ export const oneDarkProTheme = oneDarkProThemeJson as DesktopTheme
 export const shadesOfPurpleTheme = shadesOfPurpleThemeJson as DesktopTheme
 export const nightowlTheme = nightowlThemeJson as DesktopTheme
 export const vesperTheme = vesperThemeJson as DesktopTheme
+export const carbonfoxTheme = carbonfoxThemeJson as DesktopTheme
 
 export const DEFAULT_THEMES: Record<string, DesktopTheme> = {
   "oc-1": oc1Theme,
@@ -38,4 +40,5 @@ export const DEFAULT_THEMES: Record<string, DesktopTheme> = {
   shadesofpurple: shadesOfPurpleTheme,
   nightowl: nightowlTheme,
   vesper: vesperTheme,
+  carbonfox: carbonfoxTheme,
 }
diff --git a/packages/ui/src/theme/themes/carbonfox.json b/packages/ui/src/theme/themes/carbonfox.json
new file mode 100644
index 000000000..e2fa20d80
--- /dev/null
+++ b/packages/ui/src/theme/themes/carbonfox.json
@@ -0,0 +1,122 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Carbonfox",
+  "id": "carbonfox",
+  "light": {
+    "seeds": {
+      "neutral": "#8e8e8e",
+      "primary": "#0072c3",
+      "success": "#198038",
+      "warning": "#f1c21b",
+      "error": "#da1e28",
+      "info": "#0043ce",
+      "interactive": "#0f62fe",
+      "diffAdd": "#198038",
+      "diffDelete": "#da1e28"
+    },
+    "overrides": {
+      "background-base": "#ffffff",
+      "background-weak": "#f4f4f4",
+      "background-strong": "#e8e8e8",
+      "background-stronger": "#dcdcdc",
+      "surface-raised-strong": "#ffffff",
+      "surface-raised-stronger": "#ffffff",
+      "surface-float-base": "#161616",
+      "surface-float-base-hover": "#262626",
+      "text-base": "#161616",
+      "text-weak": "#525252",
+      "text-strong": "#000000",
+      "syntax-string": "#198038",
+      "syntax-primitive": "#da1e28",
+      "syntax-property": "#0043ce",
+      "syntax-type": "#007d79",
+      "syntax-constant": "#6929c4",
+      "syntax-keyword": "#525252",
+      "syntax-info": "#0043ce",
+      "markdown-heading": "#0043ce",
+      "markdown-text": "#161616",
+      "markdown-link": "#0043ce",
+      "markdown-link-text": "#0072c3",
+      "markdown-code": "#198038",
+      "markdown-block-quote": "#525252",
+      "markdown-emph": "#6929c4",
+      "markdown-strong": "#161616",
+      "markdown-horizontal-rule": "#c6c6c6",
+      "markdown-list-item": "#0072c3",
+      "markdown-list-enumeration": "#0072c3",
+      "markdown-image": "#0043ce",
+      "markdown-image-text": "#0072c3",
+      "markdown-code-block": "#393939"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#393939",
+      "primary": "#33b1ff",
+      "success": "#42be65",
+      "warning": "#f1c21b",
+      "error": "#ff8389",
+      "info": "#78a9ff",
+      "interactive": "#4589ff",
+      "diffAdd": "#42be65",
+      "diffDelete": "#ff8389"
+    },
+    "overrides": {
+      "background-base": "#161616",
+      "background-weak": "#262626",
+      "background-strong": "#0d0d0d",
+      "background-stronger": "#000000",
+      "surface-raised-base": "#1c1c1c",
+      "surface-raised-base-hover": "#262626",
+      "surface-raised-strong": "#262626",
+      "surface-raised-strong-hover": "#303030",
+      "surface-raised-stronger": "#303030",
+      "surface-raised-stronger-hover": "#393939",
+      "surface-raised-stronger-non-alpha": "#303030",
+      "surface-float-base": "#0d0d0d",
+      "surface-float-base-hover": "#1a1a1a",
+      "surface-inset-base": "#0d0d0d",
+      "surface-inset-strong": "#000000",
+      "surface-base": "#1e1e1e",
+      "surface-base-hover": "#262626",
+      "surface-diff-add-base": "#0e3a22",
+      "surface-diff-delete-base": "#4d1a1f",
+      "input-base": "#262626",
+      "input-hover": "#303030",
+      "button-secondary-base": "#393939",
+      "button-secondary-hover": "#4c4c4c",
+      "border-weak-base": "#393939",
+      "border-weak-hover": "#4c4c4c",
+      "border-base": "#525252",
+      "border-hover": "#636363",
+      "border-strong-base": "#6f6f6f",
+      "text-base": "#f2f4f8",
+      "text-weak": "#8d8d8d",
+      "text-weaker": "#6f6f6f",
+      "text-strong": "#ffffff",
+      "icon-base": "#8d8d8d",
+      "icon-weak-base": "#6f6f6f",
+      "syntax-string": "#42be65",
+      "syntax-primitive": "#ff8389",
+      "syntax-property": "#78a9ff",
+      "syntax-type": "#08bdba",
+      "syntax-constant": "#be95ff",
+      "syntax-keyword": "#8d8d8d",
+      "syntax-info": "#78a9ff",
+      "markdown-heading": "#82cfff",
+      "markdown-text": "#f2f4f8",
+      "markdown-link": "#78a9ff",
+      "markdown-link-text": "#33b1ff",
+      "markdown-code": "#42be65",
+      "markdown-block-quote": "#8d8d8d",
+      "markdown-emph": "#be95ff",
+      "markdown-strong": "#ffffff",
+      "markdown-horizontal-rule": "#393939",
+      "markdown-list-item": "#33b1ff",
+      "markdown-list-enumeration": "#33b1ff",
+      "markdown-image": "#78a9ff",
+      "markdown-image-text": "#33b1ff",
+      "markdown-code-block": "#c6c6c6"
+    }
+  }
+}