樣式

使用 className 工具類別或具型別的 props 設定元件樣式。Text.js 應用程式沒有樣式表。

#工具類別

className 接受 Tailwind 風格的工具類別。1 個單位就是 1 個儲存格。

<Box className="flex-row gap-2 p-1 border rounded">  <Box className="flex-col grow border rounded px-1 bg-surface">    <Text bold>p-1 · gap-2</Text>    <Text color="muted">1 unit = 1 cell</Text>  </Box>  <Box className="flex-col grow border rounded px-1 border-accent">    <Text color="accent">border-accent</Text>  </Box></Box>

#具型別的 props

每個工具類別都有對應的 prop。Props 的優先順序高於 className。

<Box flexDirection="column" padding={1} border="rounded" borderColor="accent">  <Text bold>Typed props</Text></Box>

#色彩

使用十六進位色碼、Tailwind 名稱或主題 Token，例如 fg、muted、surface、accent、success 和 danger。Token 會隨目前的主題變動。

#主題

內建 5 種預設主題：geistDark、geistLight、opencodeDark、tokyoNight 和 amberCrt。

<ThemeProvider theme="amberCrt">  <Box className="border rounded p-1">    <Text color="accent">amberCrt</Text>  </Box></ThemeProvider>

const brand = createTheme({ id: "brand", name: "Brand", accent: "#ffffff" }, "geistDark");

#響應式檢視區

應用程式預設會填滿停駐的 DevTools 主控台（viewport.responsive），並隨著你拖曳面板調整大小。使用 flex 配置版面，並在需要時讀取尺寸：

const { cols } = useViewport();const sidebar = cols >= 90;

頁面只能偵測停駐的面板。頁面無法偵測未停駐的 DevTools、DevTools 縮放比例及主控台側邊欄，因此應用程式會使用 viewport.width × viewport.height（預設為 120×36）或你固定的尺寸：

text.resize(120, 36)   // pin a sizetext.responsive(true)  // fit the console again