ToothFairyAI_Public/tf_code
1
0
Fork 0
mirror of https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git synced 2026-03-30 05:43:55 +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 path from "path"
import { createEffect, createMemo, onMount } from "solid-js" import { createEffect, createMemo, onCleanup, onMount } from "solid-js"
import { createSimpleContext } from "./helper" import { createSimpleContext } from "./helper"
import { Glob } from "../../../../util/glob" import { Glob } from "../../../../util/glob"
import aura from "./theme/aura.json" with { type: "json" } 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({ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
name: "Theme", name: "Theme",
init: (props: { mode: "dark" | "light" }) => { init: (props: { mode: "dark" | "light" }) => {
const renderer = useRenderer()
const config = useTuiConfig() const config = useTuiConfig()
const kv = useKV() const kv = useKV()
const [store, setStore] = createStore({ const [store, setStore] = createStore({
@ -295,7 +296,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
}) })
function init() { function init() {
resolveSystemTheme() resolveSystemTheme(store.mode)
getCustomThemes() getCustomThemes()
.then((custom) => { .then((custom) => {
setStore( setStore(
@ -316,14 +317,12 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
onMount(init) onMount(init)
function resolveSystemTheme() { function resolveSystemTheme(mode: "dark" | "light" = store.mode) {
console.log("resolveSystemTheme")
renderer renderer
.getPalette({ .getPalette({
size: 16, size: 16,
}) })
.then((colors) => { .then((colors) => {
console.log(colors.palette)
if (!colors.palette[0]) { if (!colors.palette[0]) {
if (store.active === "system") { if (store.active === "system") {
setStore( setStore(
@ -337,7 +336,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
} }
setStore( setStore(
produce((draft) => { produce((draft) => {
draft.themes.system = generateSystem(colors, store.mode) draft.themes.system = generateSystem(colors, mode)
if (store.active === "system") { if (store.active === "system") {
draft.ready = true draft.ready = true
} }
@ -346,16 +345,30 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
}) })
} }
const renderer = useRenderer() function update(mode: "dark" | "light") {
process.on("SIGUSR2", async () => { if (store.mode === mode) return
setStore("mode", mode)
kv.set("theme_mode", mode)
renderer.clearPaletteCache() 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(() => { const values = createMemo(() => {
return resolveTheme(store.themes[store.active] ?? store.themes.opencode, store.mode) return resolveTheme(store.themes[store.active] ?? store.themes.opencode, store.mode)
}) })
createEffect(() => {
renderer.setBackgroundColor(values().background)
})
const syntax = createMemo(() => generateSyntax(values())) const syntax = createMemo(() => generateSyntax(values()))
const subtleSyntax = createMemo(() => generateSubtleSyntax(values())) const subtleSyntax = createMemo(() => generateSubtleSyntax(values()))
@ -378,8 +391,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
return store.mode return store.mode
}, },
setMode(mode: "dark" | "light") { setMode(mode: "dark" | "light") {
setStore("mode", mode) update(mode)
kv.set("theme_mode", mode)
}, },
set(theme: string) { set(theme: string) {
setStore("active", theme) setStore("active", theme)