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

Theming

Frutjam's CSS-only theming system uses CSS variables and a single data attribute. Switch light, dark, and custom themes with no JavaScript. WCAG AA color tokens built in, works with Django, HTMX, Laravel, and any Tailwind CSS v4 project.

Frutjam 附帶了 Berry 主題系統 - 一組基於 OKLCH 顏色值構建的命名主題。使用 data-theme 屬性將主題套用到整個應用程式或將主題嵌套在特定部分內。僅 CSS，無需 JavaScript，可存取 WCAG AA — 適用於 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 專案。

內建主題

Frutjam 包含兩個開箱即用的內建主題：

雪莓（淡）

預設淺色主題。當未設定data-theme時自動套用。

html 
1
2
3
4
5
6
7
<html data-theme="snowberry">
  <!-- or use the alias -->
</html>

<html data-theme="light">
  <!-- same as snowberry -->
</html>

黑莓（深色）

內建深色主題。

html 
1
2
3
4
5
6
7
<html data-theme="darkberry">
  <!-- or use the alias -->
</html>

<html data-theme="dark">
  <!-- same as darkberry -->
</html>

應用主題

將 data-theme 新增到任何 HTML 元素。這個主題層層疊疊地影響著所有的孩子。

html 
1
2
3
4
5
6
<!-- Apply globally -->
<html data-theme="snowberry">
  <body>
    <!-- All components use snowberry theme -->
  </body>
</html>

嵌套主題

主題可以嵌套 - 子元素覆蓋其子樹的父主題。

html 
1
2
3
4
5
6
7
8
9
<html data-theme="snowberry">
  <section data-theme="darkberry">
    <!-- This section uses the dark theme -->
    <button class="btn btn-primary">Dark Button</button>
  </section>

  <!-- Back to light theme here -->
  <button class="btn btn-primary">Light Button</button>
</html>

深色模式變體

使用 Tailwind 的 dark: 前綴 — 它會在 data-theme="dark" 和 data-theme="darkberry" 上啟動。

html 
1
2
3
<p class="text-on-base dark:text-primary">
  Adapts to the active theme automatically.
</p>

自訂主題

透過在 [data-theme] 選擇器中定義 CSS 變數來建立您自己的主題。請參閱配置頁面以取得完整的變數參考。

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@layer theme {
  :is([data-theme="myberry"]) {
    --scheme-color: light;
    --border-radius: 0.5rem;
    --color-base: oklch(1 0 0);
    --color-primary: oklch(55% 0.22 142);
    --color-secondary: oklch(60% 0.18 280);
    --color-accent: oklch(70% 0.20 60);
  }
}
html 
1
2
3
<html data-theme="myberry">
  <!-- Your custom theme is active -->
</html>