@opencode-ai/ui 0.0.0-beta-202606251302

package/src/theme/context.tsx

@@ -0,0 +1,370 @@
+// @refresh reload
+
+import { createEffect, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { createSimpleContext } from "../context/helper"
+import oc2ThemeJson from "./themes/oc-2.json"
+import { resolveThemeVariant, themeToCss } from "./resolve"
+import { resolveThemeVariantV2, themeV2ToCss } from "./v2/resolve"
+import type { DesktopTheme } from "./types"
+
+export type ColorScheme = "light" | "dark" | "system"
+
+const STORAGE_KEYS = {
+  THEME_ID: "opencode-theme-id",
+  COLOR_SCHEME: "opencode-color-scheme",
+  THEME_CSS_LIGHT: "opencode-theme-css-light",
+  THEME_CSS_DARK: "opencode-theme-css-dark",
+} as const
+
+const THEME_STYLE_ID = "oc-theme"
+let files: Record<string, () => Promise<{ default: DesktopTheme }>> | undefined
+let ids: string[] | undefined
+let known: Set<string> | undefined
+
+function getFiles() {
+  if (files) return files
+  files = import.meta.glob<{ default: DesktopTheme }>("./themes/*.json")
+  return files
+}
+
+function themeIDs() {
+  if (ids) return ids
+  ids = Object.keys(getFiles())
+    .map((path) => path.slice("./themes/".length, -".json".length))
+    .sort()
+  return ids
+}
+
+function knownThemes() {
+  if (known) return known
+  known = new Set(themeIDs())
+  return known
+}
+
+const names: Record<string, string> = {
+  "oc-2": "OC-2",
+  amoled: "AMOLED",
+  aura: "Aura",
+  ayu: "Ayu",
+  carbonfox: "Carbonfox",
+  catppuccin: "Catppuccin",
+  "catppuccin-frappe": "Catppuccin Frappe",
+  "catppuccin-macchiato": "Catppuccin Macchiato",
+  cobalt2: "Cobalt2",
+  cursor: "Cursor",
+  dracula: "Dracula",
+  everforest: "Everforest",
+  flexoki: "Flexoki",
+  github: "GitHub",
+  gruvbox: "Gruvbox",
+  kanagawa: "Kanagawa",
+  "lucent-orng": "Lucent Orng",
+  material: "Material",
+  matrix: "Matrix",
+  mercury: "Mercury",
+  monokai: "Monokai",
+  nightowl: "Night Owl",
+  nord: "Nord",
+  "one-dark": "One Dark",
+  onedarkpro: "One Dark Pro",
+  opencode: "OpenCode",
+  orng: "Orng",
+  "osaka-jade": "Osaka Jade",
+  palenight: "Palenight",
+  rosepine: "Rose Pine",
+  shadesofpurple: "Shades of Purple",
+  solarized: "Solarized",
+  synthwave84: "Synthwave '84",
+  tokyonight: "Tokyonight",
+  vercel: "Vercel",
+  vesper: "Vesper",
+  zenburn: "Zenburn",
+}
+const oc2Theme = oc2ThemeJson as DesktopTheme
+
+function normalize(id: string | null | undefined) {
+  return id === "oc-1" ? "oc-2" : id
+}
+
+function read(key: string) {
+  if (typeof localStorage !== "object") return null
+  try {
+    return localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+function write(key: string, value: string) {
+  if (typeof localStorage !== "object") return
+  try {
+    localStorage.setItem(key, value)
+  } catch {}
+}
+
+function drop(key: string) {
+  if (typeof localStorage !== "object") return
+  try {
+    localStorage.removeItem(key)
+  } catch {}
+}
+
+function clear() {
+  drop(STORAGE_KEYS.THEME_CSS_LIGHT)
+  drop(STORAGE_KEYS.THEME_CSS_DARK)
+}
+
+function ensureThemeStyleElement(): HTMLStyleElement {
+  const existing = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null
+  if (existing) return existing
+  const element = document.createElement("style")
+  element.id = THEME_STYLE_ID
+  document.head.appendChild(element)
+  return element
+}
+
+function getSystemMode(): "light" | "dark" {
+  if (typeof window !== "object") return "light"
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "dark") {
+  const isDark = mode === "dark"
+  const variant = isDark ? theme.dark : theme.light
+  const tokens = resolveThemeVariant(variant, isDark)
+  const css = themeToCss(tokens)
+  const v2 = themeV2ToCss(resolveThemeVariantV2(variant, isDark))
+
+  if (themeId !== "oc-2") {
+    write(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, `${css}\n  ${v2}`)
+  }
+
+  const fullCss = `:root {
+  color-scheme: ${mode};
+  --text-mix-blend-mode: ${isDark ? "plus-lighter" : "multiply"};
+  ${css}
+  ${v2}
+}`
+
+  document.getElementById("oc-theme-preload")?.remove()
+  ensureThemeStyleElement().textContent = fullCss
+  document.documentElement.dataset.theme = themeId
+  document.documentElement.dataset.colorScheme = mode
+  document.documentElement.style.backgroundColor = isDark ? "#080808" : "#fafafa"
+
+  // Update theme-color meta tag to match light/dark mode
+  const meta = document.querySelector('meta[name="theme-color"]')
+  if (meta) meta.setAttribute("content", isDark ? "#080808" : "#fafafa")
+}
+
+function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
+  if (themeId === "oc-2") return
+  for (const mode of ["light", "dark"] as const) {
+    const isDark = mode === "dark"
+    const variant = isDark ? theme.dark : theme.light
+    const tokens = resolveThemeVariant(variant, isDark)
+    const css = themeToCss(tokens)
+    const v2 = themeV2ToCss(resolveThemeVariantV2(variant, isDark))
+    write(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, `${css}\n  ${v2}`)
+  }
+}
+
+export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
+  name: "Theme",
+  init: (props: { defaultTheme?: string; onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark") => void }) => {
+    const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
+    const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
+    const mode = colorScheme === "system" ? getSystemMode() : colorScheme
+    const [store, setStore] = createStore({
+      themes: {
+        "oc-2": oc2Theme,
+      } as Record<string, DesktopTheme>,
+      themeId,
+      colorScheme,
+      mode,
+      previewThemeId: null as string | null,
+      previewScheme: null as ColorScheme | null,
+    })
+
+    const loads = new Map<string, Promise<DesktopTheme | undefined>>()
+
+    const load = (id: string) => {
+      const next = normalize(id)
+      if (!next) return Promise.resolve(undefined)
+      const hit = store.themes[next]
+      if (hit) return Promise.resolve(hit)
+      const pending = loads.get(next)
+      if (pending) return pending
+      const file = getFiles()[`./themes/${next}.json`]
+      if (!file) return Promise.resolve(undefined)
+      const task = file()
+        .then((mod) => {
+          const theme = mod.default
+          setStore("themes", next, theme)
+          return theme
+        })
+        .finally(() => {
+          loads.delete(next)
+        })
+      loads.set(next, task)
+      return task
+    }
+
+    const applyTheme = (theme: DesktopTheme, themeId: string, mode: "light" | "dark") => {
+      applyThemeCss(theme, themeId, mode)
+      props.onThemeApplied?.(theme, mode)
+    }
+
+    const ids = () => {
+      const extra = Object.keys(store.themes)
+        .filter((id) => !knownThemes().has(id))
+        .sort()
+      const all = themeIDs()
+      if (extra.length === 0) return all
+      return [...all, ...extra]
+    }
+
+    const loadThemes = () => Promise.all(themeIDs().map(load)).then(() => store.themes)
+
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
+        const next = normalize(e.newValue)
+        if (!next) return
+        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
+        setStore("themeId", next)
+        if (next === "oc-2") {
+          clear()
+          return
+        }
+        void load(next).then((theme) => {
+          if (!theme || store.themeId !== next) return
+          cacheThemeVariants(theme, next)
+        })
+      }
+      if (e.key === STORAGE_KEYS.COLOR_SCHEME && e.newValue) {
+        setStore("colorScheme", e.newValue as ColorScheme)
+        setStore("mode", e.newValue === "system" ? getSystemMode() : (e.newValue as "light" | "dark"))
+      }
+    }
+
+    onMount(() => {
+      makeEventListener(window, "storage", onStorage)
+
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+      const onMedia = () => {
+        if (store.colorScheme !== "system") return
+        setStore("mode", getSystemMode())
+      }
+      makeEventListener(mediaQuery, "change", onMedia)
+
+      const rawTheme = read(STORAGE_KEYS.THEME_ID)
+      const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2"
+      const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
+      if (rawTheme && rawTheme !== savedTheme) {
+        write(STORAGE_KEYS.THEME_ID, savedTheme)
+        clear()
+      }
+      if (savedTheme !== store.themeId) setStore("themeId", savedTheme)
+      if (savedScheme !== store.colorScheme) setStore("colorScheme", savedScheme)
+      setStore("mode", savedScheme === "system" ? getSystemMode() : savedScheme)
+      void load(savedTheme).then((theme) => {
+        if (!theme || store.themeId !== savedTheme) return
+        cacheThemeVariants(theme, savedTheme)
+      })
+    })
+
+    createEffect(() => {
+      const theme = store.themes[store.themeId]
+      if (!theme) return
+      applyTheme(theme, store.themeId, store.mode)
+    })
+
+    const setTheme = (id: string) => {
+      const next = normalize(id)
+      if (!next) {
+        console.warn(`Theme "${id}" not found`)
+        return
+      }
+      if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) {
+        console.warn(`Theme "${id}" not found`)
+        return
+      }
+      setStore("themeId", next)
+      if (next === "oc-2") {
+        write(STORAGE_KEYS.THEME_ID, next)
+        clear()
+        return
+      }
+      void load(next).then((theme) => {
+        if (!theme || store.themeId !== next) return
+        cacheThemeVariants(theme, next)
+        write(STORAGE_KEYS.THEME_ID, next)
+      })
+    }
+
+    const setColorScheme = (scheme: ColorScheme) => {
+      setStore("colorScheme", scheme)
+      write(STORAGE_KEYS.COLOR_SCHEME, scheme)
+      setStore("mode", scheme === "system" ? getSystemMode() : scheme)
+    }
+
+    return {
+      themeId: () => store.themeId,
+      colorScheme: () => store.colorScheme,
+      mode: () => store.mode,
+      ids,
+      name: (id: string) => store.themes[id]?.name ?? names[id] ?? id,
+      loadThemes,
+      themes: () => store.themes,
+      setTheme,
+      setColorScheme,
+      registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
+      previewTheme: (id: string) => {
+        const next = normalize(id)
+        if (!next) return
+        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
+        setStore("previewThemeId", next)
+        void load(next).then((theme) => {
+          if (!theme || store.previewThemeId !== next) return
+          const mode = store.previewScheme
+            ? store.previewScheme === "system"
+              ? getSystemMode()
+              : store.previewScheme
+            : store.mode
+          applyTheme(theme, next, mode)
+        })
+      },
+      previewColorScheme: (scheme: ColorScheme) => {
+        setStore("previewScheme", scheme)
+        const mode = scheme === "system" ? getSystemMode() : scheme
+        const id = store.previewThemeId ?? store.themeId
+        void load(id).then((theme) => {
+          if (!theme) return
+          if ((store.previewThemeId ?? store.themeId) !== id) return
+          if (store.previewScheme !== scheme) return
+          applyTheme(theme, id, mode)
+        })
+      },
+      commitPreview: () => {
+        if (store.previewThemeId) {
+          setTheme(store.previewThemeId)
+        }
+        if (store.previewScheme) {
+          setColorScheme(store.previewScheme)
+        }
+        setStore("previewThemeId", null)
+        setStore("previewScheme", null)
+      },
+      cancelPreview: () => {
+        setStore("previewThemeId", null)
+        setStore("previewScheme", null)
+        void load(store.themeId).then((theme) => {
+          if (!theme) return
+          applyTheme(theme, store.themeId, store.mode)
+        })
+      },
+    }
+  },
+})

package/src/theme/default-themes.ts

@@ -0,0 +1,116 @@
+import type { DesktopTheme } from "./types"
+import oc2ThemeJson from "./themes/oc-2.json"
+import amoledThemeJson from "./themes/amoled.json"
+import auraThemeJson from "./themes/aura.json"
+import ayuThemeJson from "./themes/ayu.json"
+import carbonfoxThemeJson from "./themes/carbonfox.json"
+import catppuccinThemeJson from "./themes/catppuccin.json"
+import catppuccinFrappeThemeJson from "./themes/catppuccin-frappe.json"
+import catppuccinMacchiatoThemeJson from "./themes/catppuccin-macchiato.json"
+import cobalt2ThemeJson from "./themes/cobalt2.json"
+import cursorThemeJson from "./themes/cursor.json"
+import draculaThemeJson from "./themes/dracula.json"
+import everforestThemeJson from "./themes/everforest.json"
+import flexokiThemeJson from "./themes/flexoki.json"
+import githubThemeJson from "./themes/github.json"
+import gruvboxThemeJson from "./themes/gruvbox.json"
+import kanagawaThemeJson from "./themes/kanagawa.json"
+import lucentOrngThemeJson from "./themes/lucent-orng.json"
+import materialThemeJson from "./themes/material.json"
+import matrixThemeJson from "./themes/matrix.json"
+import mercuryThemeJson from "./themes/mercury.json"
+import monokaiThemeJson from "./themes/monokai.json"
+import nightowlThemeJson from "./themes/nightowl.json"
+import nordThemeJson from "./themes/nord.json"
+import oneDarkThemeJson from "./themes/one-dark.json"
+import oneDarkProThemeJson from "./themes/onedarkpro.json"
+import opencodeThemeJson from "./themes/opencode.json"
+import orngThemeJson from "./themes/orng.json"
+import osakaJadeThemeJson from "./themes/osaka-jade.json"
+import palenightThemeJson from "./themes/palenight.json"
+import rosepineThemeJson from "./themes/rosepine.json"
+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 vercelThemeJson from "./themes/vercel.json"
+import vesperThemeJson from "./themes/vesper.json"
+import zenburnThemeJson from "./themes/zenburn.json"
+
+export const oc2Theme = oc2ThemeJson as DesktopTheme
+export const amoledTheme = amoledThemeJson as DesktopTheme
+export const auraTheme = auraThemeJson as DesktopTheme
+export const ayuTheme = ayuThemeJson as DesktopTheme
+export const carbonfoxTheme = carbonfoxThemeJson as DesktopTheme
+export const catppuccinTheme = catppuccinThemeJson as DesktopTheme
+export const catppuccinFrappeTheme = catppuccinFrappeThemeJson as DesktopTheme
+export const catppuccinMacchiatoTheme = catppuccinMacchiatoThemeJson as DesktopTheme
+export const cobalt2Theme = cobalt2ThemeJson as DesktopTheme
+export const cursorTheme = cursorThemeJson as DesktopTheme
+export const draculaTheme = draculaThemeJson as DesktopTheme
+export const everforestTheme = everforestThemeJson as DesktopTheme
+export const flexokiTheme = flexokiThemeJson as DesktopTheme
+export const githubTheme = githubThemeJson as DesktopTheme
+export const gruvboxTheme = gruvboxThemeJson as DesktopTheme
+export const kanagawaTheme = kanagawaThemeJson as DesktopTheme
+export const lucentOrngTheme = lucentOrngThemeJson as DesktopTheme
+export const materialTheme = materialThemeJson as DesktopTheme
+export const matrixTheme = matrixThemeJson as DesktopTheme
+export const mercuryTheme = mercuryThemeJson as DesktopTheme
+export const monokaiTheme = monokaiThemeJson as DesktopTheme
+export const nightowlTheme = nightowlThemeJson as DesktopTheme
+export const nordTheme = nordThemeJson as DesktopTheme
+export const oneDarkTheme = oneDarkThemeJson as DesktopTheme
+export const oneDarkProTheme = oneDarkProThemeJson as DesktopTheme
+export const opencodeTheme = opencodeThemeJson as DesktopTheme
+export const orngTheme = orngThemeJson as DesktopTheme
+export const osakaJadeTheme = osakaJadeThemeJson as DesktopTheme
+export const palenightTheme = palenightThemeJson as DesktopTheme
+export const rosepineTheme = rosepineThemeJson as DesktopTheme
+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 vercelTheme = vercelThemeJson as DesktopTheme
+export const vesperTheme = vesperThemeJson as DesktopTheme
+export const zenburnTheme = zenburnThemeJson as DesktopTheme
+
+export const DEFAULT_THEMES: Record<string, DesktopTheme> = {
+  "oc-2": oc2Theme,
+  amoled: amoledTheme,
+  aura: auraTheme,
+  ayu: ayuTheme,
+  carbonfox: carbonfoxTheme,
+  catppuccin: catppuccinTheme,
+  "catppuccin-frappe": catppuccinFrappeTheme,
+  "catppuccin-macchiato": catppuccinMacchiatoTheme,
+  cobalt2: cobalt2Theme,
+  cursor: cursorTheme,
+  dracula: draculaTheme,
+  everforest: everforestTheme,
+  flexoki: flexokiTheme,
+  github: githubTheme,
+  gruvbox: gruvboxTheme,
+  kanagawa: kanagawaTheme,
+  "lucent-orng": lucentOrngTheme,
+  material: materialTheme,
+  matrix: matrixTheme,
+  mercury: mercuryTheme,
+  monokai: monokaiTheme,
+  nightowl: nightowlTheme,
+  nord: nordTheme,
+  "one-dark": oneDarkTheme,
+  onedarkpro: oneDarkProTheme,
+  opencode: opencodeTheme,
+  orng: orngTheme,
+  "osaka-jade": osakaJadeTheme,
+  palenight: palenightTheme,
+  rosepine: rosepineTheme,
+  shadesofpurple: shadesOfPurpleTheme,
+  solarized: solarizedTheme,
+  synthwave84: synthwave84Theme,
+  tokyonight: tokyonightTheme,
+  vercel: vercelTheme,
+  vesper: vesperTheme,
+  zenburn: zenburnTheme,
+}

package/src/theme/index.ts

@@ -0,0 +1,78 @@
+export type {
+  DesktopTheme,
+  ThemePaletteColors,
+  ThemeSeedColors,
+  ThemeVariant,
+  HexColor,
+  OklchColor,
+  ResolvedTheme,
+  ColorValue,
+  CssVarRef,
+  V2ColorValue,
+  ResolvedV2Theme,
+} from "./types"
+
+export {
+  hexToRgb,
+  rgbToHex,
+  hexToOklch,
+  oklchToHex,
+  rgbToOklch,
+  oklchToRgb,
+  generateScale,
+  generateNeutralScale,
+  generateAlphaScale,
+  fitOklch,
+  blend,
+  mixColors,
+  shift,
+  lighten,
+  darken,
+  withAlpha,
+} from "./color"
+
+export { resolveThemeVariant, resolveTheme, themeToCss } from "./resolve"
+export { resolveThemeVariantV2, resolveThemeV2, themeV2ToCss, generateV2Primitives } from "./v2/resolve"
+export { applyTheme, loadThemeFromUrl, getActiveTheme, removeTheme, setColorScheme } from "./loader"
+export { ThemeProvider, useTheme, type ColorScheme } from "./context"
+
+export {
+  DEFAULT_THEMES,
+  oc2Theme,
+  amoledTheme,
+  auraTheme,
+  ayuTheme,
+  carbonfoxTheme,
+  catppuccinTheme,
+  catppuccinFrappeTheme,
+  catppuccinMacchiatoTheme,
+  cobalt2Theme,
+  cursorTheme,
+  draculaTheme,
+  everforestTheme,
+  flexokiTheme,
+  githubTheme,
+  gruvboxTheme,
+  kanagawaTheme,
+  lucentOrngTheme,
+  materialTheme,
+  matrixTheme,
+  mercuryTheme,
+  monokaiTheme,
+  nightowlTheme,
+  nordTheme,
+  oneDarkTheme,
+  oneDarkProTheme,
+  opencodeTheme,
+  orngTheme,
+  osakaJadeTheme,
+  palenightTheme,
+  rosepineTheme,
+  shadesOfPurpleTheme,
+  solarizedTheme,
+  synthwave84Theme,
+  tokyonightTheme,
+  vercelTheme,
+  vesperTheme,
+  zenburnTheme,
+} from "./default-themes"

package/src/theme/loader.ts

@@ -0,0 +1,112 @@
+import type { DesktopTheme, ResolvedTheme, ResolvedV2Theme } from "./types"
+import { resolveThemeVariant, themeToCss } from "./resolve"
+import { resolveThemeVariantV2, themeV2ToCss } from "./v2/resolve"
+
+let activeTheme: DesktopTheme | null = null
+const THEME_STYLE_ID = "opencode-theme"
+
+function ensureLoaderStyleElement(): HTMLStyleElement {
+  const existing = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null
+  if (existing) {
+    return existing
+  }
+  const element = document.createElement("style")
+  element.id = THEME_STYLE_ID
+  document.head.appendChild(element)
+  return element
+}
+
+export function applyTheme(theme: DesktopTheme, themeId?: string): void {
+  activeTheme = theme
+  const lightTokens = resolveThemeVariant(theme.light, false)
+  const darkTokens = resolveThemeVariant(theme.dark, true)
+  const lightV2Tokens = resolveThemeVariantV2(theme.light, false)
+  const darkV2Tokens = resolveThemeVariantV2(theme.dark, true)
+  const targetThemeId = themeId ?? theme.id
+  const css = buildThemeCss(lightTokens, darkTokens, lightV2Tokens, darkV2Tokens, targetThemeId)
+  const themeStyleElement = ensureLoaderStyleElement()
+  themeStyleElement.textContent = css
+  document.documentElement.setAttribute("data-theme", targetThemeId)
+}
+
+function buildThemeCss(
+  light: ResolvedTheme,
+  dark: ResolvedTheme,
+  lightV2: ResolvedV2Theme,
+  darkV2: ResolvedV2Theme,
+  themeId: string,
+): string {
+  const isDefaultTheme = themeId === "oc-2"
+  const lightCss = `${themeToCss(light)}\n  ${themeV2ToCss(lightV2)}`
+  const darkCss = `${themeToCss(dark)}\n  ${themeV2ToCss(darkV2)}`
+
+  if (isDefaultTheme) {
+    return `
+:root {
+  color-scheme: light;
+  --text-mix-blend-mode: multiply;
+
+  ${lightCss}
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+    --text-mix-blend-mode: plus-lighter;
+
+    ${darkCss}
+  }
+}
+`
+  }
+
+  return `
+html[data-theme="${themeId}"] {
+  color-scheme: light;
+  --text-mix-blend-mode: multiply;
+
+  ${lightCss}
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+    --text-mix-blend-mode: plus-lighter;
+
+    ${darkCss}
+  }
+}
+`
+}
+
+export async function loadThemeFromUrl(url: string): Promise<DesktopTheme> {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Failed to load theme from ${url}: ${response.statusText}`)
+  }
+  return response.json()
+}
+
+export function getActiveTheme(): DesktopTheme | null {
+  const activeId = document.documentElement.getAttribute("data-theme")
+  if (!activeId) {
+    return null
+  }
+  if (activeTheme?.id === activeId) {
+    return activeTheme
+  }
+  return null
+}
+
+export function removeTheme(): void {
+  activeTheme = null
+  const existingElement = document.getElementById(THEME_STYLE_ID)
+  if (existingElement) {
+    existingElement.remove()
+  }
+  document.documentElement.removeAttribute("data-theme")
+}
+
+export function setColorScheme(scheme: "light" | "dark" | "auto"): void {
+  if (scheme === "auto") {
+    document.documentElement.style.removeProperty("color-scheme")
+  } else {
+    document.documentElement.style.setProperty("color-scheme", scheme)
+  }
+}