feat(app): color themes (#30824)

Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>

packages/ui/src/theme/loader.ts

@@ -1,5 +1,6 @@
-import type { DesktopTheme, ResolvedTheme } from "./types"
+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"
@@ -19,17 +20,25 @@ 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, targetThemeId)
+  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, themeId: string): string {
+function buildThemeCss(
+  light: ResolvedTheme,
+  dark: ResolvedTheme,
+  lightV2: ResolvedV2Theme,
+  darkV2: ResolvedV2Theme,
+  themeId: string,
+): string {
   const isDefaultTheme = themeId === "oc-2"
-  const lightCss = themeToCss(light)
-  const darkCss = themeToCss(dark)
+  const lightCss = `${themeToCss(light)}\n  ${themeV2ToCss(lightV2)}`
+  const darkCss = `${themeToCss(dark)}\n  ${themeV2ToCss(darkV2)}`
 
   if (isDefaultTheme) {
     return `