跳转到主内容
Frutjam logo Frutjam
v2.2.2
Theme

主题化

最后更新:

Frutjam 的纯 CSS 主题系统使用 CSS 变量和单个数据属性。无需 JavaScript 即可切换浅色、深色和自定义主题。内置 WCAG AA 颜色令牌，可与 Django、HTMX、Laravel 和任何 Tailwind CSS v4 项目配合使用。

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>