@@ -1,14 +1,15 @@
3−To use a theme add `theme = "<name>"` to your [`config.toml`](./configuration.md) at the very top of the file before the first section or select it during runtime using `:theme <name>`.
3+To use a theme add `theme = "<name>"` to the top of your [`config.toml`](./configuration.md) file, or select it during runtime using `:theme <name>`.
5## Creating a theme
5## Creating a theme
7−Create a file with the name of your theme as file name (i.e `mytheme.toml`) and place it in your `themes` directory (i.e `~/.config/helix/themes`). The directory might have to be created beforehand.
7+Create a file with the name of your theme as the file name (i.e `mytheme.toml`) and place it in your `themes` directory (i.e `~/.config/helix/themes` or `%AppData%\helix\themes` on Windows). The directory might have to be created beforehand.
9−The names "default" and "base16_default" are reserved for the builtin themes and cannot be overridden by user defined themes.
9+> 💡 The names "default" and "base16_default" are reserved for built-in themes
10+> and cannot be overridden by user-defined themes.
11−The default theme.toml can be found [here](https://github.com/helix-editor/helix/blob/master/theme.toml), and user submitted themes [here](https://github.com/helix-editor/helix/blob/master/runtime/themes).
12+### Overview
13Each line in the theme file is specified as below:
14Each line in the theme file is specified as below:
@@ -16,7 +17,7 @@ Each line in the theme file is specified as below:
16key = { fg = "#ffffff", bg = "#000000", underline = { color = "#ff0000", style = "curl"}, modifiers = ["bold", "italic"] }
17key = { fg = "#ffffff", bg = "#000000", underline = { color = "#ff0000", style = "curl"}, modifiers = ["bold", "italic"] }
19−where `key` represents what you want to style, `fg` specifies the foreground color, `bg` the background color, `underline` the underline `style`/`color`, and `modifiers` is a list of style modifiers. `bg`, `underline` and `modifiers` can be omitted to defer to the defaults.
20+Where `key` represents what you want to style, `fg` specifies the foreground color, `bg` the background color, `underline` the underline `style`/`color`, and `modifiers` is a list of style modifiers. `bg`, `underline` and `modifiers` can be omitted to defer to the defaults.
21To specify only the foreground color:
22To specify only the foreground color:
@@ -24,15 +25,30 @@ To specify only the foreground color:
24key = "#ffffff"
25key = "#ffffff"
27−if the key contains a dot `'.'`, it must be quoted to prevent it being parsed as a [dotted key](https://toml.io/en/v1.0.0#keys).
28+If the key contains a dot `'.'`, it must be quoted to prevent it being parsed as a [dotted key](https://toml.io/en/v1.0.0#keys).
30"key.key" = "#ffffff"
31"key.key" = "#ffffff"
34+For inspiration, you can find the default `theme.toml`
35+[here](https://github.com/helix-editor/helix/blob/master/theme.toml) and
37+[here](https://github.com/helix-editor/helix/blob/master/runtime/themes).
41+Use the supplied linting tool to check for errors and missing scopes:
44+cargo xtask themelint onedark # replace onedark with <name>
47+## The details of theme creation
33### Color palettes
49### Color palettes
35−It's recommended define a palette of named colors, and refer to them from the
51+It's recommended to define a palette of named colors, and refer to them in the
36configuration values in your theme. To do this, add a table called
52configuration values in your theme. To do this, add a table called
37`palette` to your theme file:
53`palette` to your theme file:
@@ -45,8 +61,8 @@ white = "#ffffff"
45black = "#000000"
61black = "#000000"
48−Remember that the `[palette]` table includes all keys after its header,
64+Keep in mind that the `[palette]` table includes all keys after its header,
49−so you should define the palette after normal theme options.
65+so it should be defined after the normal theme options.
51The default palette uses the terminal's default 16 colors, and the colors names
67The default palette uses the terminal's default 16 colors, and the colors names
52are listed below. The `[palette]` section in the config file takes precedence
68are listed below. The `[palette]` section in the config file takes precedence
@@ -73,9 +89,8 @@ over it and is merged into the default palette.
74### Modifiers
90### Modifiers
76−The following values may be used as modifiers.
92+The following values may be used as modifier, provided they are supported by
78−Less common modifiers might not be supported by your terminal emulator.
93+your terminal emulator.
80| Modifier |
95| Modifier |
@@ -89,14 +104,13 @@ Less common modifiers might not be supported by your terminal emulator.
89| `hidden` |
104| `hidden` |
90| `crossed_out` |
105| `crossed_out` |
92−> Note: The `underlined` modifier is deprecated and only available for backwards compatibility.
107+> 💡 The `underlined` modifier is deprecated and only available for backwards compatibility.
93> Its behavior is equivalent to setting `underline.style="line"`.
108> Its behavior is equivalent to setting `underline.style="line"`.
95−### Underline Style
110+### Underline style
97−One of the following values may be used as a value for `underline.style`.
112+One of the following values may be used as a value for `underline.style`, providing it is
99−Some styles might not be supported by your terminal emulator.
113+supported by your terminal emulator.
101| Modifier |
115| Modifier |
@@ -109,7 +123,7 @@ Some styles might not be supported by your terminal emulator.
110### Inheritance
124### Inheritance
112−Extend upon other themes by setting the `inherits` property to an existing theme.
126+Extend other themes by setting the `inherits` property to an existing theme.
115inherits = "boo_berry"
129inherits = "boo_berry"
@@ -124,19 +138,19 @@ berry = "#2A2A4D"
125### Scopes
139### Scopes
127−The following is a list of scopes available to use for styling.
141+The following is a list of scopes available to use for styling:
129#### Syntax highlighting
143#### Syntax highlighting
131These keys match [tree-sitter scopes](https://tree-sitter.github.io/tree-sitter/syntax-highlighting#theme).
145These keys match [tree-sitter scopes](https://tree-sitter.github.io/tree-sitter/syntax-highlighting#theme).
133−For a given highlight produced, styling will be determined based on the longest matching theme key. For example, the highlight `function.builtin.static` would match the key `function.builtin` rather than `function`.
147+When determining styling for a highlight, the longest matching theme key will be used. For example, if the highlight is `function.builtin.static`, the key `function.builtin` will be used instead of `function`.
135We use a similar set of scopes as
149We use a similar set of scopes as
136−[SublimeText](https://www.sublimetext.com/docs/scope_naming.html). See also
150+[Sublime Text](https://www.sublimetext.com/docs/scope_naming.html). See also
137[TextMate](https://macromates.com/manual/en/language_grammars) scopes.
151[TextMate](https://macromates.com/manual/en/language_grammars) scopes.
139−- `attribute` - Class attributes, html tag attributes
153+- `attribute` - Class attributes, HTML tag attributes
141- `type` - Types
155- `type` - Types
142 - `builtin` - Primitive types provided by the language (`int`, `usize`)
156 - `builtin` - Primitive types provided by the language (`int`, `usize`)
@@ -144,7 +158,7 @@ We use a similar set of scopes as
144 - `variant`
158 - `variant`
145- `constructor`
159- `constructor`
147−- `constant` (TODO: constant.other.placeholder for %v)
161+- `constant` (TODO: constant.other.placeholder for `%v`)
148 - `builtin` Special constants provided by the language (`true`, `false`, `nil` etc)
162 - `builtin` Special constants provided by the language (`true`, `false`, `nil` etc)
149 - `boolean`
163 - `boolean`
150 - `character`
164 - `character`
@@ -162,11 +176,11 @@ We use a similar set of scopes as
163- `comment` - Code comments
177- `comment` - Code comments
164 - `line` - Single line comments (`//`)
178 - `line` - Single line comments (`//`)
165− - `block` - Block comments (e.g. (`/* */`)
179+ - `block` - Block comments (e.g. (`/* */`)
166 - `documentation` - Documentation comments (e.g. `///` in Rust)
180 - `documentation` - Documentation comments (e.g. `///` in Rust)
168- `variable` - Variables
182- `variable` - Variables
169− - `builtin` - Reserved language variables (`self`, `this`, `super`, etc)
183+ - `builtin` - Reserved language variables (`self`, `this`, `super`, etc.)
170 - `parameter` - Function parameters
184 - `parameter` - Function parameters
171 - `other`
185 - `other`
172 - `member` - Fields of composite data types (e.g. structs, unions)
186 - `member` - Fields of composite data types (e.g. structs, unions)
@@ -186,10 +200,10 @@ We use a similar set of scopes as
186 - `return`
200 - `return`
187 - `exception`
201 - `exception`
188 - `operator` - `or`, `in`
202 - `operator` - `or`, `in`
189− - `directive` - Preprocessor directives (`#if` in C)
203+ - `directive` - Preprocessor directives (`#if` in C)
190 - `function` - `fn`, `func`
204 - `function` - `fn`, `func`
191 - `storage` - Keywords describing how things are stored
205 - `storage` - Keywords describing how things are stored
192− - `type` - The type of something, `class`, `function`, `var`, `let`, etc.
206+ - `type` - The type of something, `class`, `function`, `var`, `let`, etc.
193 - `modifier` - Storage modifiers like `static`, `mut`, `const`, `ref`, etc.
207 - `modifier` - Storage modifiers like `static`, `mut`, `const`, `ref`, etc.
195- `operator` - `||`, `+=`, `>`
209- `operator` - `||`, `+=`, `>`
@@ -216,9 +230,9 @@ We use a similar set of scopes as
217 - `italic`
231 - `italic`
219− - `url` - urls pointed to by links
233+ - `url` - URLs pointed to by links
220− - `label` - non-url link references
234+ - `label` - non-URL link references
221− - `text` - url and image descriptions in links
235+ - `text` - URL and image descriptions in links
222 - `quote`
236 - `quote`
224 - `inline`
238 - `inline`
@@ -232,19 +246,19 @@ We use a similar set of scopes as
233#### Interface
247#### Interface
235−These scopes are used for theming the editor interface.
249+These scopes are used for theming the editor interface:
237- `markup`
251- `markup`
238 - `normal`
252 - `normal`
239− - `completion` - for completion doc popup ui
253+ - `completion` - for completion doc popup UI
240− - `hover` - for hover popup ui
254+ - `hover` - for hover popup UI
241 - `heading`
255 - `heading`
242− - `completion` - for completion doc popup ui
256+ - `completion` - for completion doc popup UI
243− - `hover` - for hover popup ui
257+ - `hover` - for hover popup UI
245 - `inline`
259 - `inline`
246− - `completion` - for completion doc popup ui
260+ - `completion` - for completion doc popup UI
247− - `hover` - for hover popup ui
261+ - `hover` - for hover popup UI
250| Key | Notes |
264| Key | Notes |
@@ -270,9 +284,9 @@ These scopes are used for theming the editor interface.
270| `ui.statusline.insert` | Statusline mode during insert mode ([only if `editor.color-modes` is enabled][editor-section]) |
284| `ui.statusline.insert` | Statusline mode during insert mode ([only if `editor.color-modes` is enabled][editor-section]) |
271| `ui.statusline.select` | Statusline mode during select mode ([only if `editor.color-modes` is enabled][editor-section]) |
285| `ui.statusline.select` | Statusline mode during select mode ([only if `editor.color-modes` is enabled][editor-section]) |
272| `ui.statusline.separator` | Separator character in statusline |
286| `ui.statusline.separator` | Separator character in statusline |
273−| `ui.popup` | Documentation popups (e.g Space + k) |
287+| `ui.popup` | Documentation popups (e.g. Space + k) |
274| `ui.popup.info` | Prompt for multiple key options |
288| `ui.popup.info` | Prompt for multiple key options |
275−| `ui.window` | Border lines separating splits |
289+| `ui.window` | Borderlines separating splits |
276| `ui.help` | Description box for commands |
290| `ui.help` | Description box for commands |
277| `ui.text` | Command prompts, popup text, etc. |
291| `ui.text` | Command prompts, popup text, etc. |
278| `ui.text.focus` | |
292| `ui.text.focus` | |
@@ -301,10 +315,4 @@ These scopes are used for theming the editor interface.
301| `diagnostic.warning` | Diagnostics warning (editing area) |
315| `diagnostic.warning` | Diagnostics warning (editing area) |
302| `diagnostic.error` | Diagnostics error (editing area) |
316| `diagnostic.error` | Diagnostics error (editing area) |
304−You can check compliance to spec with
307−cargo xtask themelint onedark # replace onedark with <name>
310[editor-section]: ./configuration.md#editor-section
318[editor-section]: ./configuration.md#editor-section