Dutchy.
Theme:

Theme Switching Demo

Dynamic
Themes.

Switch between Dutch Orange, Royal Purple, and Crimson Red themes using the buttons above.

100%

CSS Variables

3

Theme Options

0ms

Page Reload

HSL

Color Format

Features

CSS Variables

Theme colors are defined using CSS custom properties (variables) making them easy to update dynamically.

Instant Updates

Theme changes happen instantly without page reload. A smooth transition effect enhances the experience.

HSL Format

Using HSL color format allows easy manipulation of lightness and saturation for variants.

Color Blocks

Dark Block

High contrast inverted content.

Primary Block

Dynamic theme color block.

Light Block

Standard content block.

Muted Block

Subtle background block.

Button
Variants.

SecondaryOutlineGhost

Contact Form

Implementation

/* CSS Variables for Theme */
:root {
  /* Dutch Orange (Default) */
  --primary-h: 25;
  --primary-s: 95%;
  --primary-l: 53%;
}

[data-theme="purple"] {
  /* Royal Purple */
  --primary-h: 263;
  --primary-s: 70%;
  --primary-l: 58%;
}

[data-theme="crimson"] {
  /* Crimson Red */
  --primary-h: 0;
  --primary-s: 84%;
  --primary-l: 50%;
}

/* Apply theme colors */
.bg-primary {
  background-color: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
}

/* JavaScript Theme Switcher */
function setTheme(theme) {
  if (theme === 'orange') {
    document.documentElement.removeAttribute('data-theme');
  } else {
    document.documentElement.setAttribute('data-theme', theme);
  }
  localStorage.setItem('theme', theme);
}