Skip to main content
Frutjam logo Frutjam
v2.2.1
Theme

Theming

Frutjam's theming system lets you switch between light, dark, and custom themes using CSS variables and a single data attribute. Extend or override any token directly in your stylesheet without JavaScript or a build step, and ship polished on-brand interfaces with ease.

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.

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>