Gruvbox theme for CSS
This works for both dark and light mode.
Name | Variable Name | Class Name |
---|---|---|
Background Hard | --bg_h | bg-hard |
Background Medium | --bg | bg |
Background Soft | --bg_s | bg-soft |
Background 1 | --bg1 | bg1 |
Background 2 | --bg2 | bg2 |
Background 3 | --bg3 | bg3 |
Background 4 | --bg4 | bg4 |
Foreground | --fg | fg |
Foreground 1 | --fg1 | fg1 |
Foreground 2 | --fg2 | fg2 |
Foreground 3 | --fg3 | fg3 |
Foreground 4 | --fg4 | fg4 |
Red | --red | red |
Green | --green | green |
Yellow | --yellow | yellow |
Blue | --blue | blue |
Purple | --purple | purple |
Aqua | --aqua | aqua |
Gray | --gray | gray |
Orange | --orange | orange |
Red Dim | --red-dim | red-dim |
Green Dim | --green-dim | green-dim |
Yellow Dim | --yellow-dim | yellow-dim |
Blue Dim | --blue-dim | blue-dim |
Purple Dim | --purple-dim | purple-dim |
Aqua Dim | --aqua-dim | aqua-dim |
Gray Dim | --gray-dim | gray-dim |
Orange Dim | --orange-dim | orange-dim |
Add colors with the variable or with the class
Example:
<p class="blue">This text will be blue</p>
or
<p style="color: var(--blue);">This text will be blue</p>