Gruvbox

Retro groove color scheme with warm earthy tones and orange accents

Package
Font
System default
Light Dark

Variants

Dark
dist/gruvbox.css

Medium contrast dark mode with warm earthy tones

Mode accent background header sidebar surface text
Dark (default)
#fe8019
#282828
#1d2021
#3c3836
#3c3836
#ebdbb2
Soft
pa-color-soft dist/gruvbox.css

Warmer dark mode with lower contrast

Mode accent background header sidebar surface text
Dark (default)
#fe8019
#32302f
#3c3836
#32302f
#3c3836
#ebdbb2
Light
pa-color-light dist/gruvbox.css

Warm cream backgrounds with earthy accents

Mode accent background header sidebar surface text
Light (default)
#d65d0e
#fbf1c7
#1d2021
#ebdbb2
#f9f5d7
#3c3836

Gruvbox

A retro groove color scheme inspired by the legendary Gruvbox palette for Vim. Warm, earthy tones with vibrant accents create a comfortable, low-fatigue interface.

Highlights

  • Three variants — Dark (medium contrast, default), Soft (warmer, lower contrast), and Light (cream backgrounds)
  • Orange accent (#fe8019) — the signature Gruvbox color
  • System fonts — no custom font download required
  • Warm, desaturated backgrounds reduce eye strain

Variants

Switch variants by adding a CSS class to <body>:

<body> <!-- Dark (default) -->
<body class="pa-color-soft"> <!-- Soft dark -->
<body class="pa-color-light"> <!-- Light -->

Usage

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