Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Chủ đề

Cập nhật lần cuối:

Hệ thống tạo chủ đề chỉ CSS của Frutjam sử dụng các biến CSS và một thuộc tính dữ liệu duy nhất. Chuyển đổi chủ đề sáng, tối và tùy chỉnh mà không cần JavaScript. Mã thông báo màu WCAG AA được tích hợp sẵn, hoạt động với Django, HTMX, Laravel và bất kỳ dự án Tailwind CSS v4 nào.

Frutjam cung cấp hệ thống chủ đề Berry - một tập hợp các chủ đề được đặt tên được xây dựng trên các giá trị màu OKLCH. Áp dụng chủ đề cho toàn bộ ứng dụng của bạn hoặc lồng các chủ đề bên trong các phần cụ thể bằng thuộc tính data-theme. Chỉ CSS, không cần JavaScript, có thể truy cập WCAG AA — hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.

Built-in Themes

Frutjam includes two built-in themes out of the box:

Snowberry (Light)

The default light theme. Applied automatically when no data-theme is set.

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>

Darkberry (Dark)

The built-in dark theme.

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>

Applying a Theme

Add data-theme to any HTML element. The theme cascades down to all children.

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

Nested Themes

Các chủ đề có thể được lồng vào nhau - một phần tử con sẽ ghi đè chủ đề gốc cho cây con của nó.

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>

Dark Mode Variant

Sử dụng tiền tố dark: của Tailwind — tiền tố này kích hoạt trên cả data-theme="dark" và data-theme="darkberry".

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

Custom Themes

Create your own theme by defining CSS variables inside a [data-theme] selector. See the Configuration page for the full variable reference.

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>