Rose

Warm rose/pink accent on deep garnet surfaces. Dramatic and editorial.

Token preview

Dark

--color-surface-1

--color-surface-2

--color-accent

Light

--color-surface-1

--color-surface-2

--color-accent

Installation

Via CLI

The CLI applies the theme tokens automatically:

bash

npx particleui-cli add rose

Or paste CSS

Copy the CSS block below and paste it into your globals.css, replacing the existing .dark and .light overrides.

CSS

/* ParticleUI Rose Theme — paste inside your globals.css */

.dark {
  --color-bg:        oklch(4%  0.006 15);
  --color-surface-1: oklch(8%  0.005 15);
  --color-surface-2: oklch(12% 0.005 15);
  --color-surface-3: oklch(16% 0.004 15);
  --color-border:    oklch(100% 0 0 / 0.07);
  --color-border-hover: oklch(100% 0 0 / 0.14);

  --color-accent:        oklch(70% 0.22 15);
  --color-accent-dim:    oklch(70% 0.22 15 / 0.10);
  --color-accent-border: oklch(70% 0.22 15 / 0.22);
  --color-accent-text:   oklch(77% 0.18 15);
  --color-accent-glow-sm: oklch(70% 0.22 15 / 0.25);
  --color-accent-glow-lg: oklch(70% 0.22 15 / 0.40);

  --color-text-1: oklch(97% 0.003 15);
  --color-text-2: oklch(72% 0.003 15);
  --color-text-3: oklch(50% 0.002 15);
  --color-text-4: oklch(33% 0.001 15);
}

.light {
  --color-bg:        oklch(99%  0.004 15);
  --color-surface-1: oklch(96%  0.004 15);
  --color-surface-2: oklch(93%  0.003 15);
  --color-surface-3: oklch(90%  0.003 15);
  --color-border:    oklch(0% 0 0 / 0.08);
  --color-border-hover: oklch(0% 0 0 / 0.16);

  --color-accent:        oklch(42% 0.20 15);
  --color-accent-dim:    oklch(42% 0.20 15 / 0.08);
  --color-accent-border: oklch(42% 0.20 15 / 0.18);
  --color-accent-text:   oklch(36% 0.18 15);
  --color-accent-glow-sm: oklch(42% 0.20 15 / 0.20);
  --color-accent-glow-lg: oklch(42% 0.20 15 / 0.30);

  --color-text-1: oklch(10%  0.005 15);
  --color-text-2: oklch(28%  0.003 15);
  --color-text-3: oklch(45%  0.002 15);
  --color-text-4: oklch(62%  0.001 15);
}

← All themes Theme Generator →