Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Konfigurasi

Terakhir diperbarui:

Konfigurasikan plugin Tailwind CSS khusus Frutjam CSS. Tetapkan tema default, tentukan token warna khusus, alihkan sistem awalan - tidak diperlukan JavaScript. Default WCAG dapat diakses, bekerja dengan Django, HTMX, Laravel, dan kerangka kerja apa pun.

Konfigurasikan plugin Tailwind CSS khusus Frutjam CSS agar sesuai dengan proyek Anda. Tetapkan tema, tentukan token warna khusus, alihkan sistem awalan, dan komponen pilihan — tidak diperlukan JavaScript. Default WCAG AA dapat diakses. Bekerja dengan Django, HTMX, Laravel, React, dan proyek Tailwind CSS v4 apa pun.

Basic Setup

Tambahkan Frutjam ke file CSS Anda menggunakan direktif @plugin. Tidak diperlukan opsi apa pun — semuanya berjalan dengan baik.

css 
1
2
@import "tailwindcss";
@plugin "frutjam";

Plugin Options

Customize Frutjam by passing options inside the @plugin block:

css 
1
2
3
4
5
6
7
8
9
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
  reset: true;
  root: :host;
  include: button, card, alert;
  /* or: */
  exclude: table, timeline;
}

prefix

Adds a prefix to all Frutjam class names to avoid conflicts with your own CSS.

css 
1
2
3
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn fj-btn-primary">Send mail</button>

How prefix behaves depends on whether you also use Tailwind's prefix() option:

Frutjam prefix only

Frutjam class names are prefixed. Use them directly in HTML.

css 
1
2
3
4
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn">Button</button>

Tailwind prefix only

prefix() Tailwind berfungsi sebagai varian — semua utilitas (termasuk Frutjam) memerlukan awalan sebagai pemilih varian dalam HTML.

css 
1
2
@import "tailwindcss" prefix(tw);
@plugin "frutjam";
html 
<button class="tw:btn">Button</button>

Both prefixes

Frutjam renames its classes (e.g. fj-btn), and Tailwind's variant prefix is required on top.

css 
1
2
3
4
@import "tailwindcss" prefix(tw);
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="tw:fj-btn">Button</button>

reset

Controls whether Frutjam injects base element resets (reboot styles). Defaults to true.

Saat true, Frutjam menyetel ulang model kotak, tipografi, daftar, media, dan elemen formulir — mirip dengan prapenerbangan Tailwind. Ketika false, hanya token variabel CSS yang dimasukkan; gaya elemen mentah dilewati seluruhnya.

Setel ke false ketika Anda sudah menggunakan kerangka kerja CSS lain (Bootstrap, Bulma, dll.) atau pengaturan ulang Anda sendiri, untuk menghindari konflik pada elemen seperti *, html, body, h1-h6, dan button.

css 
1
2
3
@plugin "frutjam" {
  reset: false;
}

root

The CSS selector where Frutjam registers its design token variables (--color-primary, --color-base, etc.). Defaults to :root.

There are three useful values:

ValueWhen to use
:rootDefault. Tokens are available globally across the whole page.
:hostShadow DOM / Web Components. Scopes tokens inside the component so they don't leak out.
Any selector (e.g. #app)Scopes tokens to a specific wrapper element. Useful when Frutjam coexists with another framework on the same page.

Default — token global

css 
1
2
3
@plugin "frutjam" {
  root: :root;
}

Shadow DOM / Web Components

css 
1
2
3
@plugin "frutjam" {
  root: :host;
}

Scoped to a wrapper element

If another framework already controls :root (e.g. Bootstrap sets its own --bs-* variables and body colors), point Frutjam at a container element instead. This moves color, background-color, and all CSS variables off :root so they only apply inside that wrapper.

css 
1
2
3
4
5
@plugin "frutjam" {
  prefix: fj;
  reset: false;
  root: #my-app;
}
html 
1
2
3
4
<div id="my-app" data-theme="blueberry">
  <!-- Frutjam components here, Bootstrap outside -->
  <button class="fj-btn fj-btn-primary">Send</button>
</div>

include

Load only specific components instead of the full library. Useful for reducing output size in production.

css 
1
2
3
@plugin "frutjam" {
  include: button, card, alert, badge;
}

exclude

Load all components except the ones listed. Use when you only need to drop a few components from the full build.

css 
1
2
3
@plugin "frutjam" {
  exclude: table, timeline, chat;
}

Create a custom theme

To create your own theme, just assign your color values to the provided CSS variables within a [data-theme="your-theme-name"] selector

1. The "Automatic" Approach (Minimal)

Dalam versi ini, kami menghilangkan variabel --color-on-*. Frutjam mendeteksi variabel yang hilang dan menghitung warna teks yang optimal—biasanya beralih antara nilai OKLCH yang sangat terang atau sangat gelap—untuk memastikan komponen tetap dapat diakses dan dibaca.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-info: oklch(0.685 0.169 237.323);
        --color-success: oklch(0.792 0.209 151.711);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-error: oklch(0.577 0.245 27.325);
    }
}

2. The "Manual" Approach (Full Control)

In this version, we explicitly define the --color-on-* variables. This is ideal when you have specific brand guidelines (like using a tinted off-white instead of pure white) or when you want to achieve a specific "vibe," such as a low-contrast sophisticated look that still passes accessibility checks.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-on-base:oklch(0.22 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-on-neutral: oklch(1 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-on-primary: oklch(96.2% 0.018 272.314);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-on-secondary: oklch(1 0 0);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-on-accent: oklch(1 0 0);
        --color-info: oklch(0.685 0.169 237.323);
        --color-on-info: oklch(0.15 0 0);
        --color-success: oklch(0.792 0.209 151.711);
        --color-on-success: oklch(0.15 0 0);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-on-warning: oklch(0.15 0 0);
        --color-error: oklch(0.577 0.245 27.325);
        --color-on-error: oklch(1 0 0);
    }
}

To apply your custom theme to your project in your HTML, use data-theme="your-theme-name" to an HTML element.

html 
1
2
3
<html data-theme="your-theme-name">
 ...
</html>

Tema dapat disarangkan—Anda dapat menerapkan tema tertentu ke bagian mana pun di HTML Anda, menggantikan tema global untuk area tersebut.

html 
1
2
3
4
5
6
7
8
<html data-theme="light">
  <div data-theme="dark">
    This div uses the dark theme.
    <span data-theme="your-custom-theme">
      This span uses the your-custom-theme
    </span>
  </div>
</html>

Further Reading