Skip to main content
ParticleUI
ParticleUI

Slate

Cool blue-gray surfaces with an electric blue accent. The canonical dark-tech look.

Token preview

Dark
--color-surface-1
--color-surface-2
--color-accent
Light
--color-surface-1
--color-surface-2
--color-accent

Installation

1

Via CLI

The CLI applies the theme tokens automatically:

bash
npx particleui-cli add slate
2

Or paste CSS

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

CSS
/* ParticleUI Slate Theme — paste inside your globals.css */

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

  --color-accent:        oklch(62% 0.17 250);
  --color-accent-dim:    oklch(62% 0.17 250 / 0.10);
  --color-accent-border: oklch(62% 0.17 250 / 0.22);
  --color-accent-text:   oklch(70% 0.14 250);
  --color-accent-glow-sm: oklch(62% 0.17 250 / 0.25);
  --color-accent-glow-lg: oklch(62% 0.17 250 / 0.40);

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

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

  --color-accent:        oklch(40% 0.17 250);
  --color-accent-dim:    oklch(40% 0.17 250 / 0.08);
  --color-accent-border: oklch(40% 0.17 250 / 0.18);
  --color-accent-text:   oklch(35% 0.15 250);
  --color-accent-glow-sm: oklch(40% 0.17 250 / 0.20);
  --color-accent-glow-lg: oklch(40% 0.17 250 / 0.30);

  --color-text-1: oklch(10%  0.004 250);
  --color-text-2: oklch(28%  0.003 250);
  --color-text-3: oklch(45%  0.002 250);
  --color-text-4: oklch(62%  0.001 250);
}
← All themesTheme Generator →