---
title: "Themes"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Frutjam theming with CSS variables. Light, dark, and custom themes -no JavaScript required, instant updates, Tailwind CSS v4 compatible."
url: https://frutjam.com/tr/docs/themes
---

# Theming

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.

Snowberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iMTQiIHg9IjgiIHk9IjgiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Darkberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iMTQiIHg9IjgiIHk9IjgiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Blueberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iMTQiIHg9IjgiIHk9IjgiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Strawberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iMTQiIHg9IjgiIHk9IjgiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Grapeberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iMTQiIHg9IjgiIHk9IjgiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Peachberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iMTQiIHg9IjgiIHk9IjgiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

## 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
<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
<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
<!-- 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
<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
<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](/docs/configuration) sayfasına bakın.

```css
@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
<html data-theme="myberry">
  <!-- Your custom theme is active -->
</html>
```