메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.1
Theme

테마

Frutjam의 CSS 전용 테마 시스템은 CSS 변수와 단일 데이터 속성을 사용합니다. JavaScript 없이 밝은 테마, 어두운 테마, 맞춤 테마를 전환하세요. WCAG AA 색상 토큰이 내장되어 있으며 Django, HTMX, Laravel 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.

Frutjam ships with a Berry theming system — a set of named themes built on OKLCH color values. Apply a theme to your entire app or nest themes inside specific sections using the data-theme attribute. CSS-only, no JavaScript required, WCAG AA accessible — works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

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

Themes can be nested — a child element overrides the parent theme for its subtree.

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

Use Tailwind's dark: prefix — it activates on both data-theme="dark" and 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>