Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Tema

Terakhir diperbarui:

Sistem tema khusus CSS Frutjam menggunakan variabel CSS dan atribut data tunggal. Ganti tema terang, gelap, dan khusus tanpa JavaScript. Token warna WCAG AA bawaan, berfungsi dengan Django, HTMX, Laravel, dan proyek Tailwind CSS v4 apa pun.

Frutjam dikirimkan dengan sistem tema Berry — serangkaian tema bernama yang dibangun berdasarkan nilai warna OKLCH. Terapkan tema ke seluruh aplikasi atau tema gabungan di dalam bagian tertentu menggunakan atribut data-theme. Khusus CSS, tidak memerlukan JavaScript, WCAG AA dapat diakses — berfungsi dengan Django, HTMX, Laravel, React, dan proyek Tailwind CSS v4 apa pun.

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

Tema dapat disarangkan — elemen anak menggantikan tema induk untuk subpohonnya.

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

Gunakan awalan dark: Tailwind — awalan ini aktif di data-theme="dark" dan 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>