跳至主要內容
Frutjam logo Frutjam
v2.2.5
Theme

色彩系統

最後更新:

Frutjam 的顏色系統使用語義 CSS 標記，旨在滿足開箱即用的 WCAG AA 對比。無需 JavaScript，支援深色模式，相容於 Tailwind CSS v4。適用於 Django、HTMX、Laravel 和任何純 CSS 堆疊。

Frutjam 使用 CSS 自訂屬性作為所有顏色的設計標記。每種顏色都是根據主題定義的，並自動與 Tailwind CSS 實用程式類別一起使用 - 無需額外配置。僅 CSS，無需 JavaScript。 WCAG AA 對比度保證每個顏色對，適用於 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 專案。

顏色名稱

Frutjam 定義了以下語意顏色角色。每種顏色都有一個匹配的 on-{color} 標記，用於可存取的前景文字。

保證 WCAG AA 對比。 每對 on-{color} 均在 OKLCH 中手動調整，以透過 WCAG AA 對比度要求。與自動計算前景色的庫不同，Frutjam 為您提供明確的、經過驗證的顏色對 - 因此您的組件可以通過設計而不是偶然訪問。
顏色 代幣 目的
base--color-base頁面背景
neutral--color-neutral表面、側邊欄、覆蓋層
primary--color-primary主要品牌顏色
secondary--color-secondary次品牌色
accent--color-accent強調/突出顯示顏色
info--color-info資訊性訊息
success--color-success成功狀態
warning--color-warning警告狀態
error--color-error錯誤和破壞性狀態

顏色實用程式類

所有 Frutjam 顏色均可與任何 Tailwind CSS 顏色實用程式搭配使用。將 {color} 替換為上表中的任何顏色名稱。

班級 描述
bg-{color}背景顏色
text-{color}文字顏色
border-{color}邊框顏色
ring-{color}戒指顏色
outline-{color}輪廓顏色
shadow-{color}陰影顏色
fill-{color}SVG 填滿顏色
stroke-{color}SVG 描邊顏色
decoration-{color}文字裝飾顏色
caret-{color}輸入插入符號顏色
placeholder-{color}佔位符文字顏色
divide-{color}分隔線邊框顏色
Primary background
Secondary background
Primary border and text
html 
1
2
3
<div class="bg-primary text-on-primary p-4 rounded">Primary background</div>
<div class="bg-secondary text-on-secondary p-4 rounded">Secondary background</div>
<div class="border border-primary text-primary p-4 rounded">Primary border and text</div>

不透明度修改器

使用 /{value} 修飾符控制顏色不透明度，就像任何 Tailwind 顏色一樣。

10% primary background
20% primary background
60% opacity text
html 
1
2
3
<div class="bg-primary/10 text-primary p-4 rounded">10% primary background</div>
<div class="bg-primary/20 text-primary p-4 rounded">20% primary background</div>
<div class="text-on-base/60 p-4">60% opacity text</div>

主題 CSS 變數

這些是您在建立自訂主題時定義的根標記。所有其他顏色標記都是根據這些自動計算的。

CSS 變數 描述
--scheme-color配色：淺色 或 深色
--border-radius組件的基礎邊框半徑
--color-base頁面背景顏色
--color-on-base基本背景上的預設文字顏色
--color-neutral中性表面顏色
--color-on-neutral中性表面上的文字顏色
--color-primary主要品牌顏色
--color-on-primary主要背景上的文字顏色
--color-secondary次品牌色
--color-on-secondary輔助背景上的文字顏色
--color-accent強調色
--color-on-accent強調背景上的文字顏色
--color-info訊息顏色
--color-on-info資訊背景上的文字顏色
--color-success成功色
--color-on-success成功背景上的文字顏色
--color-warning警告色
--color-on-warning警告背景上的文字顏色
--color-error錯誤顏色
--color-on-error錯誤背景上的文字顏色

計算顏色標記

Frutjam 會根據您的根主題變數自動計算這些標記 - 您無需手動設定它們。它們可用於自訂 CSS。

規模 (50–950)

每種顏色都會產生完整的 11 級色調/色調等級。將 {color} 替換為任何顏色名稱。

CSS 變數 描述
--color-{color}-50最淺的色調（4% 顏色混合）
--color-{color}-100色調非常淺
--color-{color}-200淺色調
--color-{color}-300中淺色調
--color-{color}-400輕微色調
--color-{color}-500基底色（與 --color-{color} 相同）
--color-{color}-600輕微陰影
--color-{color}-700中等陰影
--color-{color}-800深色陰影
--color-{color}-900非常暗的陰影
--color-{color}-950最暗的陰影

軟&積極的

互動式元素的狀態感知變體，自動適應淺色和深色主題。

CSS 變數 描述
--color-{color}-soft柔和的變體的微妙有色背景
--color-on-{color}-soft用於柔和背景的文字顏色
--color-{color}-active懸停和活動狀態的深色/淺色陰影
--color-body計算出的正文文字顏色（從 on-base 稍微柔化）

自訂主題範例

覆蓋根令牌以建立自訂主題。 Frutjam 會自動計算所有尺度和狀態。

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@import "tailwindcss";
@plugin "frutjam";

[data-theme="mytheme"] {
  --scheme-color: light;
  --border-radius: 0.5rem;

  --color-base: oklch(98% 0 0);
  --color-on-base: oklch(15% 0 0);

  --color-neutral: oklch(20% 0 0);
  --color-on-neutral: oklch(98% 0 0);

  --color-primary: oklch(55% 0.25 260);
  --color-on-primary: oklch(98% 0 0);

  --color-secondary: oklch(60% 0.20 320);
  --color-on-secondary: oklch(98% 0 0);

  --color-accent: oklch(65% 0.22 180);
  --color-on-accent: oklch(15% 0 0);

  --color-info: oklch(68% 0.17 237);
  --color-on-info: oklch(15% 0 0);

  --color-success: oklch(75% 0.20 150);
  --color-on-success: oklch(15% 0 0);

  --color-warning: oklch(82% 0.19 90);
  --color-on-warning: oklch(15% 0 0);

  --color-error: oklch(58% 0.24 27);
  --color-on-error: oklch(98% 0 0);
}