theme redux

src/utils/theme-css.ts

@@ -0,0 +1,36 @@
+import { RGBA } from "@opentui/core"
+import type { ColorValue } from "../types/theme-schema"
+
+const toCss = (value: ColorValue | RGBA) => {
+  if (value instanceof RGBA) {
+    const r = Math.round(value.r * 255)
+    const g = Math.round(value.g * 255)
+    const b = Math.round(value.b * 255)
+    return `rgba(${r}, ${g}, ${b}, ${value.a})`
+  }
+  if (typeof value === "number") return `var(--ansi-${value})`
+  if (typeof value === "string") return value
+  return value.dark
+}
+
+export function applyThemeToCSS(theme: Record<string, RGBA | ColorValue>) {
+  const root = document.documentElement
+  for (const [key, value] of Object.entries(theme)) {
+    if (key === "layerBackgrounds" && typeof value === "object") {
+      const layers = value as Record<string, RGBA | ColorValue>
+      for (const [layer, color] of Object.entries(layers)) {
+        root.style.setProperty(`--color-${layer}`, toCss(color))
+      }
+    } else {
+      root.style.setProperty(`--color-${key}`, toCss(value as ColorValue | RGBA))
+    }
+  }
+}
+
+export function setThemeAttribute(themeName: string) {
+  document.documentElement.setAttribute("data-theme", themeName)
+}
+
+export function resolveColorReference(value: ColorValue) {
+  return toCss(value)
+}