Passer au contenu principal
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 est livré avec un système de thème Berry – un ensemble de thèmes nommés basés sur les valeurs de couleur OKLCH. Appliquez un thème à l'ensemble de votre application ou imbriquez des thèmes dans des sections spécifiques à l'aide de l'attribut data-theme. CSS uniquement, aucun JavaScript requis, WCAG AA accessible – fonctionne avec Django, HTMX, Laravel, React et tout projet Tailwind CSS v4.

Thèmes intégrés

Frutjam comprend deux thèmes intégrés prêts à l'emploi :

Symphorine (léger)

Le thème de lumière par défaut. Appliqué automatiquement lorsqu'aucun data-theme n'est défini.

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>

Baie noire (foncée)

Le thème sombre intégré.

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>

Appliquer un thème

Ajoutez data-theme à n'importe quel élément HTML. Le thème s’applique à tous les enfants.

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

Thèmes imbriqués

Les thèmes peuvent être imbriqués : un élément enfant remplace le thème parent pour son sous-arbre.

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>

Variante du mode sombre

Utilisez le préfixe dark: de Tailwind — il s'active à la fois sur data-theme="dark" et data-theme="darkberry".

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

Thèmes personnalisés

Créez votre propre thème en définissant des variables CSS dans un sélecteur [data-theme]. Consultez la page Configuration pour la référence complète des variables.

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>