theme rendering
This commit is contained in:
@@ -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}>
|
||||||
|
|||||||
Reference in New Issue
Block a user