theme rendering

This commit is contained in:
2026-08-07 13:42:03 -04:00
parent 85cb9fba26
commit 25fe7f6ac9

View File

@@ -19,7 +19,7 @@
import { For, Show, onMount, onCleanup, createMemo } from "solid-js"; import { For, Show, onMount, onCleanup, createMemo } from "solid-js";
import { rgbToHex, type RGBA } from "@opentui/core"; import { rgbToHex, type RGBA } from "@opentui/core";
import { useTheme } from "@/context/ThemeContext"; import { useTheme, type ThemeResolved } from "@/context/ThemeContext";
import { import {
useNavigation, useNavigation,
NavMode, NavMode,
@@ -494,13 +494,15 @@ function ThemeBreakdown() {
const { theme, selected } = useTheme(); const { theme, selected } = useTheme();
return ( return (
<box flexDirection="column" paddingTop={1} gap={1}> <box flexDirection="column" paddingTop={1} gap={1}>
<text fg={theme.accent}>Theme · {selected()}</text> <text fg={theme.accent}>Theme · {selected}</text>
<For each={THEME_ROLES}> <For each={THEME_ROLES}>
{(role) => { {(role) => {
const color = theme[role.key] as RGBA | undefined; const color = theme[role.key] as RGBA | undefined;
return ( return (
<box flexDirection="row" gap={1} alignItems="center"> <box flexDirection="row" gap={1} alignItems="center">
<text backgroundColor={color}> </text> <box backgroundColor={color}>
<text>{" "}</text>
</box>
<text fg={theme.text}>{role.label}</text> <text fg={theme.text}>{role.label}</text>
<box flexGrow={1} /> <box flexGrow={1} />
<text fg={theme.textMuted}> <text fg={theme.textMuted}>