Mono

Pure grayscale — zero chroma, maximum contrast. Timeless monochrome.

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 mono

Or paste CSS

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

CSS

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

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

  --color-accent:        oklch(92% 0 0);
  --color-accent-dim:    oklch(92% 0 0 / 0.10);
  --color-accent-border: oklch(92% 0 0 / 0.22);
  --color-accent-text:   oklch(86% 0 0);
  --color-accent-glow-sm: oklch(92% 0 0 / 0.15);
  --color-accent-glow-lg: oklch(92% 0 0 / 0.25);

  --color-text-1: oklch(97% 0 0);
  --color-text-2: oklch(72% 0 0);
  --color-text-3: oklch(50% 0 0);
  --color-text-4: oklch(33% 0 0);
}

.light {
  --color-bg:        oklch(100% 0 0);
  --color-surface-1: oklch(97%  0 0);
  --color-surface-2: oklch(94%  0 0);
  --color-surface-3: oklch(91%  0 0);
  --color-border:    oklch(0% 0 0 / 0.08);
  --color-border-hover: oklch(0% 0 0 / 0.16);

  --color-accent:        oklch(15% 0 0);
  --color-accent-dim:    oklch(15% 0 0 / 0.08);
  --color-accent-border: oklch(15% 0 0 / 0.18);
  --color-accent-text:   oklch(25% 0 0);
  --color-accent-glow-sm: oklch(15% 0 0 / 0.12);
  --color-accent-glow-lg: oklch(15% 0 0 / 0.20);

  --color-text-1: oklch(10%  0 0);
  --color-text-2: oklch(28%  0 0);
  --color-text-3: oklch(45%  0 0);
  --color-text-4: oklch(62%  0 0);
}

← All themes Theme Generator →