---
title: "Themes"
type: guide
version: "2.3.0"
status: stable
date: 2026-07-13
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/docs/themes
---

# 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.

<ThemeCards />

## 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
<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
<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
<!-- 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
<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
<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](/docs/configuration) page for the full variable reference.

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