ToothFairyAI_Public/tf_code
1
0
Fork 0
mirror of https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git synced 2026-03-29 21:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

use renderer theme mode to switch dark/light mode (#18851)

Browse Source
This commit is contained in:
Sebastian 2026-03-24 00:32:48 +01:00 committed by GitHub
parent 9a006d8700
commit ad78b79b8a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/opencode/src/cli/cmd/tui/context/theme.tsx
View File

@ -1,6 +1,6 @@
import { SyntaxStyle, RGBA, type TerminalColors } from "@opentui/core"
import { CliRenderEvents, SyntaxStyle, RGBA, type TerminalColors } from "@opentui/core"
import path from "path"
import { createEffect, createMemo, onMount } from "solid-js"
import { createEffect, createMemo, onCleanup, onMount } from "solid-js"
import { createSimpleContext } from "./helper"
import { Glob } from "../../../../util/glob"
import aura from "./theme/aura.json" with { type: "json" }
@ -280,6 +280,7 @@ function ansiToRgba(code: number): RGBA {
export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
name: "Theme",
init: (props: { mode: "dark" | "light" }) => {
const renderer = useRenderer()
const config = useTuiConfig()
const kv = useKV()
const [store, setStore] = createStore({
@ -295,7 +296,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
})
function init() {
resolveSystemTheme()
resolveSystemTheme(store.mode)
getCustomThemes()
.then((custom) => {
setStore(
@ -316,14 +317,12 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
onMount(init)
function resolveSystemTheme() {
console.log("resolveSystemTheme")
function resolveSystemTheme(mode: "dark" | "light" = store.mode) {
renderer
.getPalette({
size: 16,
})
.then((colors) => {
console.log(colors.palette)
if (!colors.palette[0]) {
if (store.active === "system") {
setStore(
@ -337,7 +336,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
}
setStore(
produce((draft) => {
draft.themes.system = generateSystem(colors, store.mode)
draft.themes.system = generateSystem(colors, mode)
if (store.active === "system") {
draft.ready = true
}
@ -346,16 +345,30 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
})
}
const renderer = useRenderer()
process.on("SIGUSR2", async () => {
function update(mode: "dark" | "light") {
if (store.mode === mode) return
setStore("mode", mode)
kv.set("theme_mode", mode)
renderer.clearPaletteCache()
init()
resolveSystemTheme(mode)
}
const handle = (mode: "dark" | "light") => {
update(mode)
}
renderer.on(CliRenderEvents.THEME_MODE, handle)
onCleanup(() => {
renderer.off(CliRenderEvents.THEME_MODE, handle)
})
const values = createMemo(() => {
return resolveTheme(store.themes[store.active] ?? store.themes.opencode, store.mode)
})
createEffect(() => {
renderer.setBackgroundColor(values().background)
})
const syntax = createMemo(() => generateSyntax(values()))
const subtleSyntax = createMemo(() => generateSubtleSyntax(values()))
@ -378,8 +391,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
return store.mode
},
setMode(mode: "dark" | "light") {
setStore("mode", mode)
kv.set("theme_mode", mode)
update(mode)
},
set(theme: string) {
setStore("active", theme)