zed-industries / zed

Code at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
https://zed.dev
Other
50.79k stars 3.15k forks source link

Custom Theme "variable" color doesn't appear to work #19382

Open jamauro opened 1 month ago

jamauro commented 1 month ago

Check for existing issues

Describe the bug / provide steps to reproduce it

I used Zed's theme importer for the Bearded Bear Arc theme and made a few tweaks to match the original one from vs code. One thing I noticed is that setting a color for variable doesn't appear to work as I'd expect. Here's the theme json:

theme.json ``` { "$schema": "https://zed.dev/schema/themes/v0.1.0.json", "name": "Bearded Theme", "author": "BeardedBear", "themes": [ { "name": "Bearded Theme Arc", "appearance": "dark", "style": { "background.appearance": "opaque", "accents": [], "border": "#11161f", "border.variant": "#11161f", "border.focused": "#405275", "border.selected": "#11161f", "border.transparent": "#11161f", "border.disabled": "#11161f", "elevated_surface.background": "#212a3b", "surface.background": "#1a212f", "background": "#1c2433", "element.background": "#8196b580", "element.hover": "#2e3c5333", "element.active": null, "element.selected": "#37486473", "element.disabled": null, "drop_target.background": "#8196b515", "ghost_element.background": null, "ghost_element.hover": "#2e3c5333", "ghost_element.active": null, "ghost_element.selected": "#37486473", "ghost_element.disabled": null, "text": "#afbbd2", "text.muted": "#4a5e84", "text.placeholder": null, "text.disabled": null, "text.accent": null, "icon": null, "icon.muted": null, "icon.disabled": null, "icon.placeholder": null, "icon.accent": null, "status_bar.background": "#1c2433", "title_bar.background": "#151b26", "title_bar.inactive_background": null, "toolbar.background": "#1c2433", "tab_bar.background": "#181f2c", "tab.inactive_background": "#181f2c", "tab.active_background": "#1c2433", "search.match_background": null, "panel.background": "#1a212f", "panel.focused_border": null, "pane.focused_border": null, "pane_group.border": "#11161f", "scrollbar.thumb.background": "#d0d7e426", "scrollbar.thumb.hover_background": "#d0d7e433", "scrollbar.thumb.border": "#d0d7e426", "scrollbar.track.background": "#1c2433", "scrollbar.track.border": "#11161f", "editor.foreground": "#d0d7e4", "editor.background": "#1c2433", "editor.gutter.background": "#1c2433", "editor.subheader.background": null, "editor.active_line.background": "#8196b50f", "editor.highlighted_line.background": null, "editor.line_number": "#404a5f", "editor.active_line_number": "#d0d7e4", "editor.invisible": null, "editor.wrap_guide": "#11161f", "editor.active_wrap_guide": "#11161f", "editor.indent_guide": null, "editor.indent_guide_active": null, "editor.document_highlight.read_background": null, "editor.document_highlight.write_background": null, "editor.document_highlight.bracket_background": null, "terminal.background": "#1a212f", "terminal.foreground": null, "terminal.ansi.background": null, "terminal.bright_foreground": null, "terminal.dim_foreground": null, "terminal.ansi.black": "#1c2433", "terminal.ansi.bright_black": "#3e4f71", "terminal.ansi.dim_black": null, "terminal.ansi.red": "#E35535", "terminal.ansi.bright_red": "#ff4319", "terminal.ansi.dim_red": null, "terminal.ansi.green": "#3CEC85", "terminal.ansi.bright_green": "#29ff82", "terminal.ansi.dim_green": null, "terminal.ansi.yellow": "#EACD61", "terminal.ansi.bright_yellow": "#ffd94c", "terminal.ansi.dim_yellow": null, "terminal.ansi.blue": "#69C3FF", "terminal.ansi.bright_blue": "#69c3ff", "terminal.ansi.dim_blue": null, "terminal.ansi.magenta": "#F38CEC", "terminal.ansi.bright_magenta": "#ff80f6", "terminal.ansi.dim_magenta": null, "terminal.ansi.cyan": "#22ECDB", "terminal.ansi.bright_cyan": "#0fffeb", "terminal.ansi.dim_cyan": null, "terminal.ansi.white": "#d0d7e4", "terminal.ansi.bright_white": "#ffffff", "terminal.ansi.dim_white": null, "link_text.hover": "#69C3FF", "conflict": "#8196b5", "conflict.background": null, "conflict.border": null, "created": "#3CEC85cc", "created.background": null, "created.border": null, "deleted": "#E35535cc", "deleted.background": null, "deleted.border": null, "error": "#E35535", "error.background": "#212a3b", "error.border": "#00000000", "hidden": "#4a5e84", "hidden.background": null, "hidden.border": null, "hint": "#afbbd290", "hint.background": null, "hint.border": null, "ignored": "#4a5e84", "ignored.background": null, "ignored.border": null, "info": null, "info.background": null, "info.border": "#00000000", "modified": "#69C3FFcc", "modified.background": null, "modified.border": null, "predictive": null, "predictive.background": null, "predictive.border": null, "renamed": null, "renamed.background": null, "renamed.border": null, "success": null, "success.background": null, "success.border": null, "unreachable": null, "unreachable.background": null, "unreachable.border": null, "warning": "#EACD61", "warning.background": "#212a3b", "warning.border": "#00000000", "players": [], "syntax": { "attribute": { "color": "#EACD61", "background_color": null, "font_style": null, "font_weight": null }, "comment": { "color": "#4a5e84", "background_color": null, "font_style": "italic", "font_weight": null }, "comment.doc": { "color": "#4a5e84", "background_color": null, "font_style": "italic", "font_weight": null }, "constant": { "color": "#E35535", "background_color": null, "font_style": null, "font_weight": null }, "constructor": { "color": "#69C3FF", "background_color": null, "font_style": null, "font_weight": null }, "emphasis": { "color": "#FF955C", "background_color": null, "font_style": "italic", "font_weight": null }, "emphasis.strong": { "color": "#FF738A", "background_color": null, "font_style": null, "font_weight": 700 }, "function": { "color": "#69C3FF", "background_color": null, "font_style": null, "font_weight": null }, "keyword": { "color": "#EACD61", "background_color": null, "font_style": null, "font_weight": null }, "link_text": { "color": "#69C3FF", "background_color": null, "font_style": null, "font_weight": null }, "link_uri": { "color": "#69C3FF", "background_color": null, "font_style": null, "font_weight": null }, "number": { "color": "#FF955C", "background_color": null, "font_style": null, "font_weight": null }, "operator": { "color": "#EACD61", "background_color": null, "font_style": null, "font_weight": null }, "property": { "color": "#EACD61", "background_color": null, "font_style": null, "font_weight": null }, "punctuation": { "color": "#4a5e84", "background_color": null, "font_style": null, "font_weight": null }, "punctuation.bracket": { "color": "#69C3FF", "background_color": null, "font_style": null, "font_weight": null }, "punctuation.delimiter": { "color": "#4a5e84", "background_color": null, "font_style": null, "font_weight": null }, "punctuation.list_marker": { "color": "#4a5e84", "background_color": null, "font_style": null, "font_weight": null }, "punctuation.special": { "color": "#F38CEC", "background_color": null, "font_style": null, "font_weight": null }, "string": { "color": "#3CEC85", "background_color": null, "font_style": null, "font_weight": null }, "string.escape": { "color": "#3CEC85", "background_color": null, "font_style": null, "font_weight": null }, "string.regex": { "color": "#3CEC85", "background_color": null, "font_style": null, "font_weight": null }, "string.special": { "color": "#3CEC85", "background_color": null, "font_style": null, "font_weight": null }, "string.special.symbol": { "color": "#FF955C", "background_color": null, "font_style": null, "font_weight": null }, "tag": { "color": "#69C3FF", "background_color": null, "font_style": null, "font_weight": null }, "text.literal": { "color": "#3CEC85", "background_color": null, "font_style": null, "font_weight": null }, "type": { "color": "#B78AFF", "background_color": null, "font_style": null, "font_weight": null }, "variable": { "color": "#FF738A", "background_color": null, "font_style": null, "font_weight": null }, "variable.member": { "color": "#FF738A", "font_style": null, "font_weight": null }, "variable.parameter": { "color": "#FF738A", "font_style": null, "font_weight": null }, "variable.special": { "color": "#FF738A", "font_style": null, "font_weight": null } } } } ] } ```
Screenshot 2024-10-17 at 12 00 28 PM

I would expect variables, like text in the above example, to have a reddish color #FF738A, and instead they are light grey. Is there another setting I should be using? I'm kind of guessing a bit at what these colors represent since I didn't find any docs.

Environment

Zed: v0.157.5 (Zed) OS: macOS 13.7.0 Memory: 16 GiB Architecture: aarch64

If applicable, add mockups / screenshots to help explain present your vision of the feature

No response

If applicable, attach your Zed.log file to this issue.

Zed.log


notpeter commented 1 month ago

The theme highlighting depends on the tree-sitter queries for the language in question. What language is this?

If you open debug: open syntax tree view you can see how it's currently being recognized

For example here's me editing a Lua file.

Screenshot 2024-10-17 at 16 27 34

And the identifier tree-sitter capture is being mapped to @variable here: https://github.com/zed-industries/zed/blob/3c32f01a8f3b7d038ce3ac2a9c79c3a1b2906714/extensions/lua/languages/lua/highlights.scm#L125-L128

jamauro commented 1 month ago

Thanks for the quick response. The language is elixir. I see the variable being labeled as identifier in the tree.

I took a peek at elixir's highlights.scm and I didn't see anything being mapped to @variable. Maybe that is the root cause?

notpeter commented 1 month ago

Looks like it. Might be as simple as adding (identifier) @variable to elixir/highlights.scm You could certainly try making that, change building Zed from source and seeing if that solves your issue. It's surprisingly straightforward, see Building Zed for MacOS in the docs and then just run cargo run -- project_dir and away you go.

Happy to review PRs.