SkillAgentSearch skills...

Gruvbox

🎨 Sublime Text themes & color schemes with pastel 'retro groove' colors

GenerateConvertImprove

Install / Use

/learn @Briles/Gruvbox
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

GitHub Tag Package Control Build Status

<p align="center"> <img src="https://cdn.rawgit.com/Briles/gruvbox/master/assets/banner-image.svg" alt="gruvbox for Sublime Text" width="327px" height="122px"> </p>

Based on gruvbox for Vim

Screenshot Dark Screenshot Light

Contrast options

Screenshot Contrast Options

Installation

<details> <summary>Package Control</summary>

The easiest way to install is using Package Control

  1. Open Command Palette using menu item Tools -> Command Palette... (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>P</kbd> on Mac) (<kbd>ctrl</kbd><kbd>shift</kbd><kbd>P</kbd> on Windows)
  2. Choose Package Control: Install Package
  3. Find gruvbox and hit <kbd>Enter</kbd>
  4. Activate the theme by adding the code below to Preferences > Setting - User:
  5. Restart Sublime Text
</details> <details> <summary>Manual</summary>

You can also install the theme manually:

  1. Download the .zip
  2. Unzip and rename the folder to gruvbox
  3. Copy the folder into Packages directory, which you can find using the menu item Sublime Text -> Preferences -> Browse Packages...
  4. Activate the theme by adding the code below to Preferences > Setting - User:
  5. Restart Sublime Text
</details>

How to Activate

Activate the UI theme and color scheme by modifying your user preferences file, which you can find using the menu item Sublime Text -> Preferences -> Settings - User (<kbd>⌘</kbd><kbd>,</kbd> on Mac).

Note: Don't forget to restart Sublime Text after activating the theme.

// gruvbox Dark Hard Contrast
{
  "theme": "gruvbox.sublime-theme",
  "color_scheme": "Packages/gruvbox/gruvbox (Dark) (Hard).sublime-color-scheme",
}

// gruvbox Dark Medium Contrast
{
  "theme": "gruvbox.sublime-theme",
  "color_scheme": "Packages/gruvbox/gruvbox (Dark) (Medium).sublime-color-scheme",
}

// gruvbox Dark Soft Contrast
{
  "theme": "gruvbox.sublime-theme",
  "color_scheme": "Packages/gruvbox/gruvbox (Dark) (Soft).sublime-color-scheme",
}

// gruvbox Light Hard Contrast
{
  "theme": "gruvbox.sublime-theme",
  "color_scheme": "Packages/gruvbox/gruvbox (Light) (Hard).sublime-color-scheme",
}

// gruvbox Light Medium Contrast
{
  "theme": "gruvbox.sublime-theme",
  "color_scheme": "Packages/gruvbox/gruvbox (Light) (Medium).sublime-color-scheme",
}

// gruvbox Light Soft Contrast
{
  "theme": "gruvbox.sublime-theme",
  "color_scheme": "Packages/gruvbox/gruvbox (Light) (Soft).sublime-color-scheme",
}

Color Scheme Variations

gruvbox comes with color scheme variations which have different brightness, saturation, or colors than their parent color schemes while still maintaining that excellent gruvbox tone.

No Dimmed Colors

A variant without out any neutral / dimmed colors

"color_scheme": "Packages/gruvbox/gruvbox (Dark) (Hard) NDC.sublime-color-scheme",
"color_scheme": "Packages/gruvbox/gruvbox (Dark) (Medium) NDC.sublime-color-scheme",
"color_scheme": "Packages/gruvbox/gruvbox (Dark) (Soft) NDC.sublime-color-scheme",
"color_scheme": "Packages/gruvbox/gruvbox (Light) (Hard) NDC.sublime-color-scheme",
"color_scheme": "Packages/gruvbox/gruvbox (Light) (Medium) NDC.sublime-color-scheme",
"color_scheme": "Packages/gruvbox/gruvbox (Light) (Soft) NDC.sublime-color-scheme",

Configuration

<details> <summary>Accent Colors</summary>

Accent Colors

Accent colors affect icons and certain text.

  "gruvbox_accent_aqua": true,    // uses the cyanish color from the color scheme
  "gruvbox_accent_blue": true,    // uses the bluish color from the color scheme
  "gruvbox_accent_green": true,   // uses the greenish color from the color scheme
  "gruvbox_accent_orange": true,  // uses the orangish color from the color scheme
  "gruvbox_accent_purple": true,  // uses the purplish color from the color scheme
  "gruvbox_accent_red": true,     // uses the redish color from the color scheme
  "gruvbox_accent_yellow": true,  // uses the yellowish color from the color scheme
  "gruvbox_accent_pink": true,    // uses the pinkish color from the color scheme
</details> <details> <summary>AutoComplete Spacing</summary>

Change the space between autocomplete rows

  // sizes are top/bottom in px
  "gruvbox_autocomplete_cramped": true,      //  v  2
  "gruvbox_autocomplete_compact": true,      //  |  4
                                             //  |  6 (Default)
  "gruvbox_autocomplete_comfortable": true,  //  |  8
  "gruvbox_autocomplete_cozy": true,         //  v  10
</details> <details> <summary>AutoComplete Border</summary>

Add a border around the autocomplete popup

  "gruvbox_autocomplete_border": true,
  "gruvbox_autocomplete_border_thick": true,
</details> <details> <summary>Sideline Selected AutoComplete Row</summary>

Add a border to the left of the selected autocomplete row

All thicknesses require gruvbox_sideline_autocomplete_row to be true.

  "gruvbox_sideline_autocomplete_row": true,           //  v  1 (Default)
  "gruvbox_sideline_autocomplete_row_thick": true,     //  |  2
  "gruvbox_sideline_autocomplete_row_thickest": true,  //  v  3
</details> <details> <summary>Disable Selected AutoComplete Row Highlight</summary>

Remove the highlight from the selected autocomplete row.

  "gruvbox_disable_autocomplete_row_highlight": true,
</details> <details> <summary>Sidebar Spacing</summary>

Change the space between sidebar tree rows

  // sizes are top/bottom in px
  "gruvbox_sidebar_cozy": true,         //  v  1
  "gruvbox_sidebar_comfortable": true,  //  |  3
                                        //  |  5 (Default)
  "gruvbox_sidebar_compact": true,      //  |  7
  "gruvbox_sidebar_cramped": true,      //  v  9
</details> <details> <summary>Sidebar Indent</summary>

Change the indent of sidebar tree rows

  "gruvbox_sidebar_indent_xxs": true,  //  v  4
  "gruvbox_sidebar_indent_xs": true,   //  |  8
  "gruvbox_sidebar_indent_s": true,    //  |  12
                                       //  |  16 (Default)
  "gruvbox_sidebar_indent_l": true,    //  |  20
  "gruvbox_sidebar_indent_xl": true,   //  |  24
  "gruvbox_sidebar_indent_xxl": true,  //  v  28
</details> <details> <summary>Sidebar Font Sizes</summary>

Change the font size of the sidebar labels

Increasing the font size will distort the icons in the sidebar.

  "gruvbox_sidebar_font_size_10": true,  //  v  10
                                         //  |  11 (Default)
  "gruvbox_sidebar_font_size_12": true,  //  |  12
  "gruvbox_sidebar_font_size_13": true,  //  |  13
  "gruvbox_sidebar_font_size_14": true,  //  |  14
  "gruvbox_sidebar_font_size_15": true,  //  |  15
  "gruvbox_sidebar_font_size_16": true,  //  v  16
</details> <details> <summary>Bold Sidebar Labels</summary>

Toggle bold fonts for sidebar labels

  "gruvbox_sidebar_heading_bold": true,
  "gruvbox_sidebar_label_bold": true,
</details> <details> <summary>Command Palette Spacing</summary>

Change the space between command palette rows

  // sizes are top/bottom in px
  "gruvbox_command_palette_cozy": true,         //  v  16
  "gruvbox_command_palette_comfortable": true,  //  |  14
                                                //  |  12 (Default)
  "gruvbox_command_palette_compact": true,      //  |  8
  "gruvbox_command_palette_cramped": true,      //  v  4
</details> <details> <summary>Sideline Selected Command Palette Row</summary>

Add a border to the left of the selected Command Palette row

All thicknesses require gruvbox_sideline_command_palette_row to be true.

  "gruvbox_sideline_command_palette_row": true,           //  v  1 (Default)
  "gruvbox_sideline_command_palette_row_thick": true,     //  |  2
  "gruvbox_sideline_command_palette_row_thickest": true,  //  v  3
</details> <details> <summary>Disable Selected Command Palette Row Highlight</summary>

Remove the highlight from the selected Command Palette row.

  "gruvbox_disable_command_palette_row_highlight": true,
</details> <details> <summary>Statusbar Sizes</summary>

Change the height of the statusbar

  // sizes are in px
  "gruvbox_statusbar_xxs": true,  //  v  20
  "gruvbox_statusbar_xs": true,   //  |  25
  "gruvbox_statusbar_s": true,    //  |  30
                                  //  |  35 (Default)
  "gruvbox_statusbar_l": true,    //  |  40
  "gruvbox_statusbar_xl": true,   //  |  45
  "gruvbox_statusbar_xxl": true,  //  v  50
</details> <details> <summary>Statusbar Button Widths</summary>

Change the minimum width of the buttons in the statusbar

  // sizes are in px
  "gruvbox_statusbar_button_xxs": true,  //  v  44
  "gruvbox_statusbar_button_xs": true,   //  |  55
  "gruvbox_statusbar_button_s": true,    //  |  65
                                         //  |  75 (Default)
  "gruvbox_statusbar_button_l": true,    //  |  85
  "gruvbox_statusbar_button_xl": true,   //  |  95
  "gruvbox_statusbar_button_xxl": true,  //  v  105
</details> <details> <summary>Statusbar Font Sizes</summary>

Change the font size of the status bar labels

  "gruvbox_statusbar_font_size_10": true,  //  v  10
                                           //  |  11 (Default)
  "gruvbox_statusbar_font

Briles

View profile

View on GitHub
GitHub Stars278
CategoryDevelopment
Updated9d ago
Forks11
Briles/gruvbox

Languages

JavaScript

Security Score

100/100

Audited on Mar 29, 2026

No findings