catppuccin / helix

➿ Soothing pastel theme for Helix!

Catppuccin for Helix

Usage

1. Helix itself includes the default variant of the theme. For other variants, copy the contents of the themes/... folder into $HOME/.config/helix/themes/ to overwrite.
2. Choose a palette (latte, frappe, macchiato, mocha) and add theme = "catppuccin_(palette)" to your config.toml
3. (Optional) modify your $HOME/.config/helix/config.toml to activate features:

   [editor]
   line-number = "relative"
   cursorline = true
   color-modes = true
   
   [editor.cursor-shape]
   insert = "bar"
   normal = "block"
   select = "underline"
   
   [editor.indent-guides]
   render = true

Customizations

You can customize the themes by inheriting your preferred flavor and applying your own modifications. For example, to create a pure black theme based on catppuccin_mocha, create a new file in $HOME/.config/helix/themes/ with the following content:

inherits = "catppuccin_mocha"

[palette]
base = "#000000"
mantle = "#010101"
crust = "#020202"

FAQ

The theme isn't loading or working properly

Make sure the theme is in the correct directory and the theme field in your config.toml is set correctly.

If the theme is still not working, it may be due to true color support. Make sure your terminal emulator supports true color and is configured correctly. If you are certain that your terminal emulator supports true color, then you can try overriding Helix's true color detection in your config file as follows:

[editor]
true-color = true

If you still can't get the theme to work, please open an issue!

Building the themes

Modfiy the themes by editing the template (data/template.tmpl), the palettes (/data/palettes) or the configs (/data/configs). To generate all the themes execute python generate.py.

💝 Thanks to

• ohxxm

 

Copyright © 2021-present Catppuccin Org

helix's Issues

Feature request: Cursor colours by mode

Helix has recently added support for coloured cursors depending on mode (i.e. normal, insert, select):

helix-editor/helix#5130

So it's now possible for themes to set primary and non-primary cursor colours for each mode.

I've done some quick local theme overrides to Catppuccin Mocha in order to demo this functionality in the clip below:

cursor-colours.mov

This makes for a really nice editing experience and it would be great to have this functionality as part of this official Catppuccin theme for Helix. 🙂

In case it's helpful, below is the theme override configuration I used for the clip above.

From my NixOS config:

{
  programs.helix.themes = {
    custom = {
      "inherits" = "catppuccin_mocha";
      "ui.statusline.normal" = { fg = "base"; bg = "lavender"; };
      "ui.statusline.insert" = { fg = "base"; bg = "green"; };
      "ui.statusline.select" = { fg = "base"; bg = "yellow"; };
      "ui.cursor.primary.normal" = { fg = "base"; bg = "lavender"; };
      "ui.cursor.primary.insert" = { fg = "base"; bg = "green"; };
      "ui.cursor.primary.select" = { fg = "base"; bg = "yellow"; };
      # The non-primary cursor colours need to be a dimmed version of the above
      "ui.cursor.normal" = { fg = "base"; bg = "#A6ADC8"; };
      "ui.cursor.insert" = { fg = "base"; bg = "#AACCC6"; };
      "ui.cursor.select" = { fg = "base"; bg = "#B6A98B"; };
    };
  };
}

Please note that the colours and combinations were quickly thrown together and are not perfect.

It should be possible to derive something nicer when blending existing palette colours like done here.

Meta Issue - No emoji in the description of the repository.

There are multiple emoji that would fit here like: 🧬 or ✏️

Theme doesn't seems so colorful as the repo screenshot

i don't know if i need to activate a specific config on helix or if it is my terminal emulator, but catppuccin seems less colorful than the neovim version and this repo screenshots.

Helix (wezterm) - catppuccin frappé

Neovim (wezterm) - cappuccino frappé

Don't change color of text with diagnostics messages

Currently the theme has

"diagnostic.error" = { fg = "red", underline = { color = "red", style = "curl" } }
"diagnostic.warning" = { fg = "yellow", underline = { color = "yellow", style = "curl" } }
"diagnostic.info" = { fg = "sky", underline = { color = "sky", style = "curl" } }
"diagnostic.hint" = { fg = "teal", underline = { color = "teal", style = "curl" } }

which sets foreground color of text which has diagnostics messages to the color of that message, for example:

I would argue that shouldn't be tha case, because it looks bad, that's not how it is in other Helix themes, and I don't think catppuccin does that for other editors (here is vscode for examle)

(Also I just noticed function color is different and I think vscode's is better)

The fix is very simple, just remove the fg = "..." from the code above

Invert bufferline tab background

Hey again!

Same issue as this one: catppuccin/wezterm#8

Just for the new bufferline in helix:

Redesign bufferline

Problem

The current bufferline design causes inconsistency in the appearance of the editor. Since the inactive bufferline background is a different color than the statusline background, this creates and additional visual element that may not be necessary.

Currently theme has three different background for bufferline:

• mantle for inactive buffers
• base for active buffer
• surface0 for background

Also, in latte version it's difficult to read name of inactive buffer:

Possible Solutions

1. Make bufferline background same as inactive buffers background

The fix is very simple, we just need change bg to mantle for ui.bufferline.background.

2. Make inactive buffers background same as active background and use statusline background for bufferline background

Inlay hints are unreadable

Inlay hints are considerably hard to read as they blend in too much with the background

Possible solutions

1. Use overlay1 for the foreground and surface0 for the background
   

2. Use overlay0 for the foreground and base for the background
   

Add ui.text.inactive Theme Key

There is a new key added for prompt suggestions under ui.text.inactive. Upstream is suggesting comment is a good color to start with.

helix-editor/helix#5104

Recommend usage of `inherits` theme key in README

The README currently suggests copying the contents of the theme file in order to make edits, but Helix now allows for themes to inherit other themes, so the better option to recommend to users would be to create a blank theme file in their config themes directory, and put an inherits = … line at the top, then put whatever overrides they want to in that file.