Gruvbox theme for CSS
Dark:
Light:
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>