Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.2
Theme

Thematisierung

Zuletzt aktualisiert:

Das reine CSS-Designsystem von Frutjam verwendet CSS-Variablen und ein einzelnes Datenattribut. Wechseln Sie ohne JavaScript zwischen hellen, dunklen und benutzerdefinierten Designs. Integrierte WCAG AA-Farbtoken, funktioniert mit Django, HTMX, Laravel und jedem Tailwind CSS v4-Projekt.

Frutjam wird mit einem Berry-Themensystem ausgeliefert – einer Reihe benannter Themen, die auf OKLCH-Farbwerten basieren. Wenden Sie ein Thema auf Ihre gesamte App an oder verschachteln Sie Themen mithilfe des Attributs data-theme in bestimmten Abschnitten. Nur CSS, kein JavaScript erforderlich, WCAG AA zugänglich – funktioniert mit Django, HTMX, Laravel, React und jedem Tailwind CSS v4-Projekt.

Integrierte Themes

Frutjam enthält standardmäßig zwei integrierte Themen:

Schneebeere (hell)

Das Standard-Lichtthema. Wird automatisch angewendet, wenn kein data-theme festgelegt ist.

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>

Dunkelbeere (dunkel)

Das integrierte dunkle Thema.

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>

Anwenden eines Themas

Fügen Sie data-theme zu jedem HTML-Element hinzu. Das Thema wird auf alle Kinder übertragen.

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

Verschachtelte Themen

Themen können verschachtelt werden – ein untergeordnetes Element überschreibt das übergeordnete Thema für seinen Unterbaum.

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-Variante

Verwenden Sie das Präfix dark: von Tailwind – es wird sowohl auf data-theme="dark" als auch auf data-theme="darkberry" aktiviert.

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

Benutzerdefinierte Themen

Erstellen Sie Ihr eigenes Theme, indem Sie CSS-Variablen in einem [data-theme]-Selektor definieren. Die vollständige Variablenreferenz finden Sie auf der Seite Konfiguration.

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>