Dark

v2.3.4

Neutral dark theme with optional color variants (blue, green, red)

Package
@keenmate/pure-admin-core
Font
Play
Dark Custom Font

Variants

Default
dist/dark.css

Neutral gray with blue accent

Mode accent background header sidebar surface text
Dark (default)
#4dabf7
#1a1a1a
#2d2d2d
#242424
#2a2a2a
#ffffff
Blue
pa-color-blue dist/dark.css

Slate blue tinted backgrounds

Mode accent background header sidebar surface text
Dark (default)
#3b82f6
#0f172a
#0f172a
#1e293b
#1e293b
#ffffff
Green
pa-color-green dist/dark.css

Green tinted backgrounds

Mode accent background header sidebar surface text
Dark (default)
#22c55e
#0f1e13
#0f1e13
#1a2e1f
#1a2e1f
#ffffff
Red
pa-color-red dist/dark.css

Red tinted backgrounds

Mode accent background header sidebar surface text
Dark (default)
#ef4444
#1f0f0f
#1f0f0f
#2d1a1a
#2d1a1a
#ffffff

Dark

A versatile dark theme with a neutral base and optional color variants. The default palette uses soft blue accents on dark grays, but you can switch to green or red tints for a completely different feel.

Highlights

  • Color variants — switch between Default (blue), Blue, Green, and Red accents
  • Neutral gray base that works well with any content
  • System fonts — no custom font download required
  • Light mode included as an alternative

Color Variants

Apply a variant by adding a CSS class to <body>:

<body class="pa-mode-dark">                     <!-- default blue accent -->

<body class="pa-mode-dark pa-color-blue">        <!-- slate blue tint -->

<body class="pa-mode-dark pa-color-green">       <!-- green tint -->

<body class="pa-mode-dark pa-color-red">         <!-- red tint -->

Usage

<link rel="stylesheet" href="css/dark.css">

Defaults to dark mode. Auto-switching via prefers-color-scheme is enabled by default.