Przejdź do głównej treści
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 jest dostarczany z systemem motywów Berry — zestawem nazwanych motywów zbudowanych na podstawie wartości kolorów OKLCH. Zastosuj motyw do całej aplikacji lub zagnieź motywy w określonych sekcjach, używając atrybutu data-theme. Tylko CSS, nie wymaga JavaScript, dostępny WCAG AA — współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.

Wbudowane motywy

Frutjam zawiera dwa wbudowane motywy:

Śnieżka (Jasna)

Domyślny jasny motyw. Stosowane automatycznie, jeśli nie ustawiono żadnego data-theme.

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>

Ciemna Jagoda (Ciemna)

Wbudowany ciemny motyw.

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>

Stosowanie motywu

Dodaj data-theme do dowolnego elementu HTML. Temat dotyczy wszystkich dzieci.

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

Zagnieżdżone motywy

Motywy można zagnieżdżać — element podrzędny zastępuje motyw nadrzędny w swoim poddrzewie.

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>

Wariant trybu ciemnego

Użyj przedrostka dark: Tailwinda — aktywuje się on zarówno w data-theme="dark", jak i data-theme="darkberry".

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

Motywy niestandardowe

Stwórz własny motyw, definiując zmienne CSS w selektorze [data-theme]. Pełne odwołanie do zmiennych znajdziesz na stronie Konfiguracja.

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>