Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Theming

Frutjam's CSS-only theming system uses CSS variables and a single data attribute. Switch light, dark, and custom themes with no JavaScript. WCAG AA color tokens built in, works with Django, HTMX, Laravel, and any Tailwind CSS v4 project.

Frutjam, OKLCH renk değerlerine dayalı bir dizi adlandırılmış temadan oluşan Berry tema sistemiyle birlikte gelir. data-theme özelliğini kullanarak uygulamanızın tamamına bir tema uygulayın veya temaları belirli bölümlerin içine yerleştirin. Yalnızca CSS, JavaScript gerekmez, WCAG AA'ya erişilebilir — Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.

Yerleşik Temalar

Frutjam kutudan çıktığı gibi iki yerleşik tema içerir:

Kar Üzümü (Hafif)

Varsayılan ışık teması. Hiçbir data-theme ayarlanmadığında otomatik olarak uygulanır.

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>

Karayemiş (Koyu)

Yerleşik karanlık tema.

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>

Tema Uygulamak

Herhangi bir HTML öğesine data-theme ekleyin. Tema tüm çocuklara yayılıyor.

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

İç İçe Temalar

Temalar iç içe yerleştirilebilir; bir alt öğe, alt ağacı için ana temayı geçersiz kılar.

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>

Karanlık Mod Varyantı

Tailwind'in dark: önekini kullanın; hem data-theme="dark" hem de data-theme="darkberry" üzerinde etkinleşir.

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

Özel Temalar

[data-theme] seçici içinde CSS değişkenlerini tanımlayarak kendi temanızı oluşturun. Değişken referansının tamamı için Yapılandırma sayfasına bakın.

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>