---
title: "Themes"
type: guide
version: "2.2.1"
doc_version: "2.4.5"
status: stable
date: 2026-04-21
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 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.

Snowberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxNiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxNiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgcnk9IjIiIHJ4PSIyIiB4PSI4IiB3aWR0aD0iMTQiIHk9IjgiIGhlaWdodD0iMTQiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Darkberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgeT0iOCIgeD0iOCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiByeD0iMiIgcnk9IjIiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Blueberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgeT0iOCIgeD0iOCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiByeD0iMiIgcnk9IjIiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Strawberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgaGVpZ2h0PSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMTYiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgcnk9IjIiIHJ4PSIyIiB4PSI4IiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHk9IjgiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Grapeberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaGVpZ2h0PSIxNCIgeD0iOCIgd2lkdGg9IjE0IiB5PSI4IiByeD0iMiIgcnk9IjIiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

Peachberry

P

S

A

![SVG Image](data:image/svg+xml;base64,PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgeT0iOCIgd2lkdGg9IjE0IiByeT0iMiIgaGVpZ2h0PSIxNCIgeD0iOCIgcng9IjIiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCAxNmMtMS4xIDAtMi0uOS0yLTJWNGMwLTEuMS45LTIgMi0yaDEwYzEuMSAwIDIgLjkgMiAyIiAvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=)

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