@tooee/themes 0.1.11 → 0.1.14

package/dist/{theme.d.ts → types.d.ts}

@@ -1,5 +1,3 @@
-import { type ReactNode } from "react";
-import { SyntaxStyle } from "@opentui/core";
 type HexColor = `#${string}`;
 type RefName = string;
 type Variant = {
@@ -66,48 +64,8 @@ export interface ResolvedTheme {
     syntaxOperator: string;
     syntaxPunctuation: string;
 }
+export declare const RESOLVED_KEYS: (keyof ResolvedTheme)[];
+export declare const FALLBACKS: Record<string, string>;
 export declare function resolveTheme(json: ThemeJSON, mode: "dark" | "light"): ResolvedTheme;
-export declare function buildSyntaxStyle(resolved: ResolvedTheme): SyntaxStyle;
-export declare function loadThemes(): Map<string, ThemeJSON>;
-export declare function getThemeNames(): string[];
-export interface Theme {
-    name: string;
-    mode: "dark" | "light";
-    colors: ResolvedTheme;
-    syntax: SyntaxStyle;
-}
-export declare const defaultTheme: Theme;
-interface ThemeContextValue {
-    theme: ResolvedTheme;
-    syntax: SyntaxStyle;
-    name: string;
-    mode: "dark" | "light";
-}
-export interface ThemeProviderProps {
-    /** Theme name (e.g. "tokyonight", "catppuccin", "dracula") */
-    name?: string;
-    /** Color mode */
-    mode?: "dark" | "light";
-    /** Full Theme object (overrides name/mode if provided) */
-    theme?: Theme;
-    children: ReactNode;
-}
-export declare function ThemeProvider({ name, mode, theme: themeProp, children }: ThemeProviderProps): ReactNode;
-export declare function useTheme(): ThemeContextValue;
-interface ThemeSwitcherContextValue extends ThemeContextValue {
-    nextTheme: () => void;
-    prevTheme: () => void;
-    setTheme: (name: string, opts?: {
-        persist?: boolean;
-    }) => void;
-    allThemes: string[];
-}
-export interface ThemeSwitcherProviderProps {
-    initialTheme?: string;
-    initialMode?: "dark" | "light";
-    children: ReactNode;
-}
-export declare function ThemeSwitcherProvider({ initialTheme, initialMode, children, }: ThemeSwitcherProviderProps): ReactNode;
-export declare function useThemeSwitcher(): ThemeSwitcherContextValue;
 export {};
-//# sourceMappingURL=theme.d.ts.map
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAIA,KAAK,QAAQ,GAAG,IAAI,MAAM,EAAE,CAAA;AAC5B,KAAK,OAAO,GAAG,MAAM,CAAA;AACrB,KAAK,OAAO,GAAG;IAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IAAC,KAAK,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,CAAA;AACtE,KAAK,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAA;AAE9C,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAC,CAAA;IACzC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;CAClC;AAMD,MAAM,WAAW,aAAa;IAE5B,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IAEpB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,uBAAuB,EAAE,MAAM,CAAA;IAE/B,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,MAAM,CAAA;IACpB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,MAAM,CAAA;IACtB,sBAAsB,EAAE,MAAM,CAAA;IAC9B,gBAAgB,EAAE,MAAM,CAAA;IACxB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,aAAa,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IAEzB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IAEjB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;CAC1B;AAGD,eAAO,MAAM,aAAa,EAAE,CAAC,MAAM,aAAa,CAAC,EAqDhD,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAqD5C,CAAA;AAMD,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa,CAuBnF"}

package/dist/types.js

@@ -0,0 +1,145 @@
+// ---------------------------------------------------------------------------
+// Theme JSON format (OpenCode-compatible)
+// ---------------------------------------------------------------------------
+// All keys of ResolvedTheme for iteration
+export const RESOLVED_KEYS = [
+    "primary",
+    "secondary",
+    "accent",
+    "error",
+    "warning",
+    "success",
+    "info",
+    "text",
+    "textMuted",
+    "background",
+    "backgroundPanel",
+    "backgroundElement",
+    "border",
+    "borderActive",
+    "borderSubtle",
+    "cursorLine",
+    "selection",
+    "diffAdded",
+    "diffRemoved",
+    "diffContext",
+    "diffHunkHeader",
+    "diffHighlightAdded",
+    "diffHighlightRemoved",
+    "diffAddedBg",
+    "diffRemovedBg",
+    "diffContextBg",
+    "diffLineNumber",
+    "diffAddedLineNumberBg",
+    "diffRemovedLineNumberBg",
+    "markdownText",
+    "markdownHeading",
+    "markdownLink",
+    "markdownLinkText",
+    "markdownCode",
+    "markdownBlockQuote",
+    "markdownEmph",
+    "markdownStrong",
+    "markdownHorizontalRule",
+    "markdownListItem",
+    "markdownListEnumeration",
+    "markdownImage",
+    "markdownImageText",
+    "markdownCodeBlock",
+    "syntaxComment",
+    "syntaxKeyword",
+    "syntaxFunction",
+    "syntaxVariable",
+    "syntaxString",
+    "syntaxNumber",
+    "syntaxType",
+    "syntaxOperator",
+    "syntaxPunctuation",
+];
+// Fallbacks used when a theme key is missing
+export const FALLBACKS = {
+    primary: "#808080",
+    secondary: "#808080",
+    accent: "#808080",
+    error: "#808080",
+    warning: "#808080",
+    success: "#808080",
+    info: "#808080",
+    text: "#d4d4d4",
+    textMuted: "#808080",
+    background: "#1e1e1e",
+    backgroundPanel: "#1e1e1e",
+    backgroundElement: "#1e1e1e",
+    cursorLine: "#1e1e1e",
+    selection: "#1e1e1e",
+    border: "#808080",
+    borderActive: "#808080",
+    borderSubtle: "#808080",
+    diffAdded: "#4fd6be",
+    diffRemoved: "#c53b53",
+    diffContext: "#808080",
+    diffHunkHeader: "#808080",
+    diffHighlightAdded: "#4fd6be",
+    diffHighlightRemoved: "#c53b53",
+    diffAddedBg: "#1e3a1e",
+    diffRemovedBg: "#3a1e1e",
+    diffContextBg: "#1e1e1e",
+    diffLineNumber: "#808080",
+    diffAddedLineNumberBg: "#1e3a1e",
+    diffRemovedLineNumberBg: "#3a1e1e",
+    markdownText: "#d4d4d4",
+    markdownHeading: "#808080",
+    markdownLink: "#808080",
+    markdownLinkText: "#808080",
+    markdownCode: "#808080",
+    markdownBlockQuote: "#808080",
+    markdownEmph: "#808080",
+    markdownStrong: "#808080",
+    markdownHorizontalRule: "#808080",
+    markdownListItem: "#808080",
+    markdownListEnumeration: "#808080",
+    markdownImage: "#808080",
+    markdownImageText: "#808080",
+    markdownCodeBlock: "#d4d4d4",
+    syntaxComment: "#808080",
+    syntaxKeyword: "#808080",
+    syntaxFunction: "#808080",
+    syntaxVariable: "#808080",
+    syntaxString: "#808080",
+    syntaxNumber: "#808080",
+    syntaxType: "#808080",
+    syntaxOperator: "#808080",
+    syntaxPunctuation: "#808080",
+};
+// ---------------------------------------------------------------------------
+// Resolution
+// ---------------------------------------------------------------------------
+export function resolveTheme(json, mode) {
+    const defs = json.defs ?? {};
+    function resolveColor(c) {
+        if (typeof c === "string") {
+            if (c === "transparent" || c === "none")
+                return "#00000000";
+            if (c.startsWith("#"))
+                return c;
+            if (defs[c] != null)
+                return resolveColor(defs[c]);
+            if (json.theme[c] !== undefined)
+                return resolveColor(json.theme[c]);
+            return "#808080";
+        }
+        return resolveColor(c[mode]);
+    }
+    const result = {};
+    for (const key of RESOLVED_KEYS) {
+        const val = json.theme[key];
+        result[key] = val !== undefined ? resolveColor(val) : (FALLBACKS[key] ?? "#808080");
+    }
+    // Dynamic fallbacks that reference other resolved keys
+    if (json.theme["cursorLine"] === undefined)
+        result.cursorLine = result.backgroundElement;
+    if (json.theme["selection"] === undefined)
+        result.selection = result.backgroundPanel;
+    return result;
+}
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@tooee/themes",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "description": "Theme management with 34 bundled themes for Tooee",
+  "keywords": [
+    "cli",
+    "colors",
+    "opentui",
+    "terminal",
+    "themes",
+    "tui"
+  ],
+  "homepage": "https://github.com/gingerhendrix/tooee",
+  "bugs": "https://github.com/gingerhendrix/tooee/issues",
   "license": "MIT",
   "author": "Gareth Andrew",
   "repository": {
@@ -9,15 +19,10 @@
     "url": "https://github.com/gingerhendrix/tooee.git",
     "directory": "packages/themes"
   },
-  "homepage": "https://github.com/gingerhendrix/tooee",
-  "bugs": "https://github.com/gingerhendrix/tooee/issues",
-  "keywords": [
-    "tui",
-    "terminal",
-    "cli",
-    "opentui",
-    "themes",
-    "colors"
+  "files": [
+    "dist",
+    "src",
+    "themes"
   ],
   "type": "module",
   "exports": {
@@ -28,16 +33,12 @@
       }
     }
   },
-  "files": [
-    "dist",
-    "src",
-    "themes"
-  ],
   "scripts": {
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@tooee/config": "0.1.11"
+    "@tooee/config": "0.1.14",
+    "@tooee/fuzzy": "0.1.14"
   },
   "devDependencies": {
     "@opentui/core": "^0.1.86",

package/src/ThemePicker.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useCallback } from "react"
 import { useKeyboard } from "@opentui/react"
-import { useTheme } from "./theme.js"
+import { fuzzyMatch } from "@tooee/fuzzy"
+import { useTheme } from "./context.js"
 
 export interface ThemePickerEntry {
   id: string
@@ -15,28 +16,6 @@ interface ThemePickerProps {
   onNavigate: (name: string) => void
 }
 
-function fuzzyMatch(query: string, text: string): number | null {
-  const lowerQuery = query.toLowerCase()
-  const lowerText = text.toLowerCase()
-
-  let qi = 0
-  let score = 0
-  let lastMatchIndex = -2
-
-  for (let ti = 0; ti < lowerText.length && qi < lowerQuery.length; ti++) {
-    if (lowerText[ti] === lowerQuery[qi]) {
-      if (ti === 0) score += 3
-      else if (" -./".includes(lowerText[ti - 1]!)) score += 2
-      else if (ti === lastMatchIndex + 1) score += 1
-
-      lastMatchIndex = ti
-      qi++
-    }
-  }
-
-  return qi === lowerQuery.length ? score : null
-}
-
 export function ThemePicker({
   entries,
   currentTheme,

package/src/context.tsx

@@ -0,0 +1,142 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from "react"
+import { type SyntaxStyle } from "@opentui/core"
+import { writeGlobalConfig } from "@tooee/config"
+import type { ResolvedTheme } from "./types.js"
+import {
+  type Theme,
+  buildTheme,
+  getThemeNames,
+  defaultTheme,
+  DEFAULT_THEME_NAME,
+  DEFAULT_MODE,
+} from "./loader.js"
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface ThemeContextValue {
+  theme: ResolvedTheme
+  syntax: SyntaxStyle
+  name: string
+  mode: "dark" | "light"
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: defaultTheme.colors,
+  syntax: defaultTheme.syntax,
+  name: defaultTheme.name,
+  mode: defaultTheme.mode,
+})
+
+export interface ThemeProviderProps {
+  /** Theme name (e.g. "tokyonight", "catppuccin", "dracula") */
+  name?: string
+  /** Color mode */
+  mode?: "dark" | "light"
+  /** Full Theme object (overrides name/mode if provided) */
+  theme?: Theme
+  children: ReactNode
+}
+
+export function ThemeProvider({ name, mode, theme: themeProp, children }: ThemeProviderProps) {
+  const resolved = themeProp
+    ? {
+        theme: themeProp.colors,
+        syntax: themeProp.syntax,
+        name: themeProp.name,
+        mode: themeProp.mode,
+      }
+    : (() => {
+        const t = buildTheme(name ?? DEFAULT_THEME_NAME, mode ?? DEFAULT_MODE)
+        return { theme: t.colors, syntax: t.syntax, name: t.name, mode: t.mode }
+      })()
+
+  return <ThemeContext.Provider value={resolved}>{children}</ThemeContext.Provider>
+}
+
+export function useTheme(): ThemeContextValue {
+  return useContext(ThemeContext)
+}
+
+// ---------------------------------------------------------------------------
+// ThemeSwitcherProvider + useThemeSwitcher
+// ---------------------------------------------------------------------------
+
+interface ThemeSwitcherContextValue extends ThemeContextValue {
+  nextTheme: () => void
+  prevTheme: () => void
+  setTheme: (name: string, opts?: { persist?: boolean }) => void
+  allThemes: string[]
+}
+
+const ThemeSwitcherContext = createContext<ThemeSwitcherContextValue | null>(null)
+
+export interface ThemeSwitcherProviderProps {
+  initialTheme?: string
+  initialMode?: "dark" | "light"
+  children: ReactNode
+}
+
+export function ThemeSwitcherProvider({
+  initialTheme,
+  initialMode,
+  children,
+}: ThemeSwitcherProviderProps) {
+  const allThemes = getThemeNames()
+  const [themeName, setThemeName] = useState(initialTheme ?? DEFAULT_THEME_NAME)
+  const [mode, _setMode] = useState<"dark" | "light">(initialMode ?? DEFAULT_MODE)
+
+  const theme = buildTheme(themeName, mode)
+
+  const nextTheme = useCallback(() => {
+    const idx = allThemes.indexOf(themeName)
+    const next = allThemes[(idx + 1) % allThemes.length]
+    setThemeName(next)
+    writeGlobalConfig({ theme: { name: next, mode } })
+  }, [allThemes, mode, themeName])
+
+  const prevTheme = useCallback(() => {
+    const idx = allThemes.indexOf(themeName)
+    const prev = allThemes[(idx - 1 + allThemes.length) % allThemes.length]
+    setThemeName(prev)
+    writeGlobalConfig({ theme: { name: prev, mode } })
+  }, [allThemes, mode, themeName])
+
+  const setThemeByName = useCallback(
+    (name: string, opts?: { persist?: boolean }) => {
+      setThemeName(name)
+      if (opts?.persist) {
+        writeGlobalConfig({ theme: { name, mode } })
+      }
+    },
+    [mode],
+  )
+
+  const value: ThemeSwitcherContextValue = {
+    theme: theme.colors,
+    syntax: theme.syntax,
+    name: theme.name,
+    mode,
+    nextTheme,
+    prevTheme,
+    setTheme: setThemeByName,
+    allThemes,
+  }
+
+  return (
+    <ThemeSwitcherContext.Provider value={value}>
+      <ThemeContext.Provider
+        value={{ theme: theme.colors, syntax: theme.syntax, name: theme.name, mode }}
+      >
+        {children}
+      </ThemeContext.Provider>
+    </ThemeSwitcherContext.Provider>
+  )
+}
+
+export function useThemeSwitcher(): ThemeSwitcherContextValue {
+  const ctx = useContext(ThemeSwitcherContext)
+  if (!ctx) throw new Error("useThemeSwitcher must be used within ThemeSwitcherProvider")
+  return ctx
+}

package/src/index.ts

@@ -1,21 +1,13 @@
-export {
-  ThemeProvider,
-  ThemeSwitcherProvider,
-  useTheme,
-  useThemeSwitcher,
-  defaultTheme,
-  resolveTheme,
-  buildSyntaxStyle,
-  loadThemes,
-  getThemeNames,
-} from "./theme.js"
-export type {
-  Theme,
-  ThemeJSON,
-  ResolvedTheme,
-  ThemeProviderProps,
-  ThemeSwitcherProviderProps,
-} from "./theme.js"
+export { resolveTheme } from "./types.js"
+export type { ThemeJSON, ResolvedTheme } from "./types.js"
+
+export { buildSyntaxStyle } from "./syntax-rules.js"
+
+export { loadThemes, getThemeNames, defaultTheme } from "./loader.js"
+export type { Theme } from "./loader.js"
+
+export { ThemeProvider, ThemeSwitcherProvider, useTheme, useThemeSwitcher } from "./context.js"
+export type { ThemeProviderProps, ThemeSwitcherProviderProps } from "./context.js"
 
 export { ThemePicker } from "./ThemePicker.js"
 export type { ThemePickerEntry } from "./ThemePicker.js"

package/src/loader.ts

@@ -0,0 +1,155 @@
+import { type SyntaxStyle } from "@opentui/core"
+import { readFileSync, readdirSync, existsSync } from "fs"
+import { join, basename, dirname } from "path"
+import { type ThemeJSON, type ResolvedTheme, resolveTheme } from "./types.js"
+import { buildSyntaxStyle } from "./syntax-rules.js"
+
+// ---------------------------------------------------------------------------
+// Theme loading
+// ---------------------------------------------------------------------------
+
+export interface Theme {
+  name: string
+  mode: "dark" | "light"
+  colors: ResolvedTheme
+  syntax: SyntaxStyle
+}
+
+/** Cache of loaded theme JSONs by name */
+const themeJsonCache = new Map<string, ThemeJSON>()
+
+function loadJsonThemesFromDir(dir: string, target: Map<string, ThemeJSON>) {
+  try {
+    if (!existsSync(dir)) return
+    for (const file of readdirSync(dir)) {
+      if (!file.endsWith(".json")) continue
+      const name = basename(file, ".json")
+      try {
+        const content = readFileSync(join(dir, file), "utf-8")
+        target.set(name, JSON.parse(content) as ThemeJSON)
+      } catch {
+        // skip invalid files
+      }
+    }
+  } catch {
+    // dir not readable
+  }
+}
+
+/** Load all bundled themes from packages/themes/themes/ */
+function loadBundledThemes(): Map<string, ThemeJSON> {
+  if (themeJsonCache.size > 0) return themeJsonCache
+
+  // Bundled themes
+  const bundledDir = join(dirname(new URL(import.meta.url).pathname), "..", "themes")
+  loadJsonThemesFromDir(bundledDir, themeJsonCache)
+
+  // XDG config: ~/.config/tooee/themes/
+  const xdgConfig = process.env.XDG_CONFIG_HOME ?? join(process.env.HOME ?? "", ".config")
+  loadJsonThemesFromDir(join(xdgConfig, "tooee", "themes"), themeJsonCache)
+
+  // Project-local: search upward for .tooee/themes/
+  let dir = process.cwd()
+  const seen = new Set<string>()
+  while (dir && !seen.has(dir)) {
+    seen.add(dir)
+    loadJsonThemesFromDir(join(dir, ".tooee", "themes"), themeJsonCache)
+    const parent = dirname(dir)
+    if (parent === dir) break
+    dir = parent
+  }
+
+  return themeJsonCache
+}
+
+export function loadThemes(): Map<string, ThemeJSON> {
+  return loadBundledThemes()
+}
+
+export function getThemeNames(): string[] {
+  return Array.from(loadThemes().keys()).sort()
+}
+
+// ---------------------------------------------------------------------------
+// Default theme
+// ---------------------------------------------------------------------------
+
+export const DEFAULT_THEME_NAME = "tokyonight"
+export const DEFAULT_MODE: "dark" | "light" = "dark"
+
+export function buildTheme(name: string, mode: "dark" | "light"): Theme {
+  const themes = loadThemes()
+  const json = themes.get(name)
+  if (!json) {
+    // Fall back to tokyonight, then first available, then hardcoded
+    const fallbackJson = themes.get(DEFAULT_THEME_NAME) ?? themes.values().next().value
+    if (fallbackJson) {
+      const resolved = resolveTheme(fallbackJson, mode)
+      return { name, mode, colors: resolved, syntax: buildSyntaxStyle(resolved) }
+    }
+    // Absolute fallback — hardcoded Tokyo Night colors
+    return hardcodedDefaultTheme
+  }
+  const resolved = resolveTheme(json, mode)
+  return { name, mode, colors: resolved, syntax: buildSyntaxStyle(resolved) }
+}
+
+const hardcodedDefaultTheme: Theme = (() => {
+  const colors: ResolvedTheme = {
+    primary: "#7aa2f7",
+    secondary: "#bb9af7",
+    accent: "#7dcfff",
+    error: "#f7768e",
+    warning: "#e0af68",
+    success: "#9ece6a",
+    info: "#7aa2f7",
+    text: "#c0caf5",
+    textMuted: "#565f89",
+    background: "#1a1b26",
+    backgroundPanel: "#1e2030",
+    backgroundElement: "#222436",
+    cursorLine: "#222436",
+    selection: "#1e2030",
+    border: "#565f89",
+    borderActive: "#737aa2",
+    borderSubtle: "#414868",
+    diffAdded: "#4fd6be",
+    diffRemoved: "#c53b53",
+    diffContext: "#828bb8",
+    diffHunkHeader: "#828bb8",
+    diffHighlightAdded: "#b8db87",
+    diffHighlightRemoved: "#e26a75",
+    diffAddedBg: "#20303b",
+    diffRemovedBg: "#37222c",
+    diffContextBg: "#1e2030",
+    diffLineNumber: "#222436",
+    diffAddedLineNumberBg: "#1b2b34",
+    diffRemovedLineNumberBg: "#2d1f26",
+    markdownText: "#c0caf5",
+    markdownHeading: "#bb9af7",
+    markdownLink: "#7aa2f7",
+    markdownLinkText: "#7dcfff",
+    markdownCode: "#9ece6a",
+    markdownBlockQuote: "#e0af68",
+    markdownEmph: "#e0af68",
+    markdownStrong: "#ff966c",
+    markdownHorizontalRule: "#565f89",
+    markdownListItem: "#7aa2f7",
+    markdownListEnumeration: "#7dcfff",
+    markdownImage: "#7aa2f7",
+    markdownImageText: "#7dcfff",
+    markdownCodeBlock: "#c0caf5",
+    syntaxComment: "#565f89",
+    syntaxKeyword: "#bb9af7",
+    syntaxFunction: "#7aa2f7",
+    syntaxVariable: "#c0caf5",
+    syntaxString: "#9ece6a",
+    syntaxNumber: "#ff9e64",
+    syntaxType: "#2ac3de",
+    syntaxOperator: "#89ddff",
+    syntaxPunctuation: "#a9b1d6",
+  }
+  return { name: DEFAULT_THEME_NAME, mode: DEFAULT_MODE, colors, syntax: buildSyntaxStyle(colors) }
+})()
+
+export const defaultTheme: Theme = hardcodedDefaultTheme