Skip to main content
Frutjam logo Frutjam
v2.2.1
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 ships with a Berry theming system — a set of named themes built on OKLCH color values. Apply a theme to your entire app or nest themes inside specific sections using the data-theme attribute. CSS-only, no JavaScript required, WCAG AA accessible — works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

Built-in Themes

Frutjam includes two built-in themes out of the box:

Snowberry (Light)

The default light theme. Applied automatically when no data-theme is set.

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>

Darkberry (Dark)

The built-in dark theme.

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>

Applying a Theme

Add data-theme to any HTML element. The theme cascades down to all children.

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

Nested Themes

Themes can be nested — a child element overrides the parent theme for its subtree.

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 Variant

Use Tailwind's dark: prefix — it activates on both data-theme="dark" and data-theme="darkberry".

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

Custom Themes

Create your own theme by defining CSS variables inside a [data-theme] selector. See the Configuration page for the full variable reference.

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>