對於應用程式開發人員

造型組件

將現有元件指向語意 CSS 變數；主題變更不需要 CSS 重建或元件重新渲染。

直接使用語意變數

不要為每個預設產生靜態樣式表或從運行時主題值建立類別名稱。保持規則穩定並讓運行時替換變數值。

css

.card {
  color: var(--oria-color-surface-fg);
  background: var(--oria-color-surface-raised);
  border: var(--oria-border-width-default) solid var(--oria-color-border);
  border-radius: var(--oria-radius-lg);
  box-shadow: var(--oria-shadow-md);
}

.page {
  background: var(--oria-pattern-bg, none),
    var(--oria-gradient-bg, var(--oria-color-bg));
}

Tailwind v4 中的映射語意值

使用 @oriatheme/tailwind 中的预构建静态桥跳过手写映射（@oriatheme/tailwind/oria.css；使用 oria 主题 tailwind-bridge 生成自定义前缀）。

css

@import "tailwindcss";

@theme inline {
  --color-background: var(--oria-color-bg);
  --color-foreground: var(--oria-color-fg);
  --color-surface: var(--oria-color-surface);
  --color-primary: var(--oria-color-primary);
  --color-primary-foreground: var(--oria-color-primary-fg);
  --radius-lg: var(--oria-radius-lg);
  --shadow-md: var(--oria-shadow-md);
}

tsx

<section className="rounded-lg bg-surface p-4 text-foreground shadow-md">
  <button className="bg-primary px-4 py-2 text-primary-foreground">
    Save changes
  </button>
</section>

基色保持穩定

@oriatheme/colors provides 26 fixed families and 11 steps for selection and general styling; they do not change with a theme. Only semantic --oria-* variables respond to the theme.

續：React 和 Next.js