文字與樣式
以色彩、文字屬性與主題 Token 設定部署卡片的樣式。
本章內容
- 文字屬性
- 主題 token
- 部署卡片
- 主題
每個儲存格都有一個字元、前景色、背景色和一組屬性。Text.js 將這些編譯成 %c CSS span，讓主控台顯示實際的色彩、粗體和斜體。
文字屬性
<Text> 接受 bold、dim、italic、underline 和 strikethrough。巢狀的 <Text> 元素會成為同一行內帶有樣式的 span。
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>主題 token
color prop 接受十六進位值、一般色彩名稱（emerald）和主題 token；Tailwind 調色盤的色階則透過 class（text-emerald-400）設定。Token 會隨目前的主題變化，因此有語意用途的色彩應優先使用 token。新增一個狀態元件：
app/status.tsx+15tsx
新增：import { Text } from "@textjs/app";新增：新增：export type DeployStatus = "ready" | "building" | "error" | "queued";新增：新增：export const STATUS = {新增： ready: { label: "Ready", color: "success" },新增： building: { label: "Building", color: "warning" },新增： error: { label: "Error", color: "danger" },新增： queued: { label: "Queued", color: "subtle" },新增：} as const;新增：新增：export function Status({ status }: { status: DeployStatus }) {新增： const s = STATUS[status];新增： return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;新增：}部署卡片
bg-surface 讓卡片從背景中浮現。部署 ID 使用狀態色彩，建置時顯示為斜體，發生錯誤時加上刪除線。
app/page.tsx+23-1tsx
移除：import { Box, Spacer, Text, useInput } from "@textjs/app";新增：import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";新增：import { Status, STATUS, type DeployStatus } from "./status";新增：新增：const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];新增：export default function Page() {新增： const { theme, cycleTheme } = useAppTheme();新增： const [status, setStatus] = useState<DeployStatus>("ready");新增：新增： useInput((e) => {新增： if (e.input === "t") cycleTheme();新增： if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);新增： });新增： return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}新增： <Box className="flex-col border rounded px-2 py-1 bg-surface">新增： <Box className="flex-row gap-2 h-1">新增： <Text bold>acme-web</Text>新增： <Status status={status} />新增： </Box>新增： <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>新增： <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>新增： dpl_8fK2新增： </Text>新增： </Box> </Box> );}wrap="truncate-end" 會以 … 結束過長的提交訊息，避免換到第二列。
主題
Text.js 內建五種主題：Geist Dark、OpenCode Dark、Tokyo Night、Amber CRT 和 Geist Light。在主控台按 t 即可依序切換。整個影格會以新的調色盤重繪，因為上方每個顏色都使用主題 token。
試用
這是本章結束時的 Acme Deploys，正在 DevTools 中執行。點擊操作區，再使用下方按鍵。
▼ 03 · 文字與樣式
開啟主控台
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
應用程式在 DevTools 中渲染。先在 Safari「設定」→「進階」中開啟「顯示網頁開發者功能」。 接著點擊這裡並按 t。
在電腦上開啟
此應用程式在 DevTools 主控台中渲染，需要桌面版瀏覽器。
測驗
2 個問題回答所有問題以完成本章。