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
44.04k stars 2.37k forks source link

Change Theme Colors For Structs, Enum, Traits, Union #13961

Open codeitlikemiley opened 1 month ago

codeitlikemiley commented 1 month ago

Check for existing issues

Describe the feature

Is it possible to do the same theme customization like on vscode?

I would like to make a distinction between Traits , Enums, Structs and Union.

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

see Example settings on Vscode, If Zed is using Tree Sitter then this is possible ... But Yeah there is a little info on how to create a custom theme , I would like to create one that would easily let me see different Class name for structs, enums, traits... as it is for me important :)

See Example Settings
``` "editor.tokenColorCustomizations": { "[Default Dark Modern]": { "textMateRules": [ { "scope": [ "keyword.other.rust", "support.type", "support.type.primitive", ], "settings": { "foreground": "#569CD6" } }, // Trait { "scope": [ "entity.name.type.trait.rust" ], "settings": { "foreground": "#b681ef" } }, // Enum, Struct, Union { "scope": [ "entity.name.type.struct.rust", "entity.name.type.union.rust", "variable.other.property", "variable.other.member" ], "settings": { "foreground": "#4EC9B0" } }, { "scope": [ "entity.name.type.enum.rust", // "variable.other.enummember.rust" ], "settings": { "foreground": "#eca4c3" } }, // Namespace { "scope": [ "entity.name.namespace" ], "settings": { "foreground": "#ffffffb2" } }, // Functions and Type Declarations { "scope": [ "entity.name.type.declaration.rust", "entity.name.function.rust" ], "settings": { "foreground": "#DCDCAA" } }, // Properties // Lifetimes and Parameters { "scope": [ "storage.modifier.lifetime.rust", "variable.parameter" ], "settings": { "foreground": "#ed5c5c" } }, // Comments { "scope": [ "comment" ], "settings": { "fontStyle": "italic" } }, ] }, }, ```

See currently on Zed:

Screenshot 2024-07-09 at 10 36 43 AM

On Vs Code:

Screenshot 2024-07-09 at 10 37 06 AM
codeitlikemiley commented 1 month ago

I saw this https://github.com/zed-industries/zed/blob/main/crates/languages/src/rust/highlights.scm

I manage to made progress on some of the available tokens

Rust Theme Settings

Rust Theme Settings
```json { "$schema": "https://zed.dev/schema/themes/v0.1.0.json", "name": "Rust Theme for Zed", "author": "uriah", "themes": [ { "name": "Rust Theme for Zed", "appearance": "dark", "style": { "border": null, "border.variant": null, "border.focused": null, "border.selected": null, "border.transparent": null, "border.disabled": null, "elevated_surface.background": null, "surface.background": null, "background": "#1e1e1e", "element.background": null, "element.hover": null, "element.active": null, "element.selected": null, "element.disabled": null, "drop_target.background": "#383b3d", "ghost_element.background": null, "ghost_element.hover": null, "ghost_element.active": null, "ghost_element.selected": null, "ghost_element.disabled": null, "text": null, "text.muted": null, "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": "#303030", "title_bar.background": null, "toolbar.background": "#1e1e1e", "tab_bar.background": null, "tab.inactive_background": null, "tab.active_background": null, "search.match_background": null, "panel.background": null, "panel.focused_border": null, "pane.focused_border": null, "scrollbar_thumb.background": null, "scrollbar.thumb.hover_background": null, "scrollbar.thumb.border": null, "scrollbar.track.background": "#1e1e1e", "scrollbar.track.border": null, "editor.foreground": "#d4d4d4", "editor.background": "#1e1e1e", "editor.gutter.background": "#1e1e1e", "editor.subheader.background": null, "editor.active_line.background": null, "editor.highlighted_line.background": null, "editor.line_number": null, "editor.active_line_number": "#d4d4d4", "editor.invisible": null, "editor.wrap_guide": null, "editor.active_wrap_guide": null, "editor.document_highlight.read_background": null, "editor.document_highlight.write_background": null, "terminal.background": "#1e1e1e", "terminal.foreground": null, "terminal.bright_foreground": null, "terminal.dim_foreground": null, "terminal.ansi.black": "#808080", "terminal.ansi.bright_black": "#808080", "terminal.ansi.dim_black": null, "terminal.ansi.red": "#d16969", "terminal.ansi.bright_red": "#d16969", "terminal.ansi.dim_red": null, "terminal.ansi.green": "#608b4e", "terminal.ansi.bright_green": "#b5cea8", "terminal.ansi.dim_green": null, "terminal.ansi.yellow": "#d7ba7d", "terminal.ansi.bright_yellow": "#ce9178", "terminal.ansi.dim_yellow": null, "terminal.ansi.blue": "#569cd6", "terminal.ansi.bright_blue": "#9cdcfe", "terminal.ansi.dim_blue": null, "terminal.ansi.magenta": "#c586c0", "terminal.ansi.bright_magenta": "#c586c0", "terminal.ansi.dim_magenta": null, "terminal.ansi.cyan": "#4ec9b0", "terminal.ansi.bright_cyan": "#4ec9b0", "terminal.ansi.dim_cyan": null, "terminal.ansi.white": "#d4d4d4", "terminal.ansi.bright_white": "#d4d4d4", "terminal.ansi.dim_white": null, "link_text.hover": null, "conflict": "#d16969", "conflict.background": null, "conflict.border": null, "created": "#608b4e", "created.background": null, "created.border": null, "deleted": "#d16969", "deleted.background": null, "deleted.border": null, "error": "#d16969", "error.background": null, "error.border": "#1e1e1e", "hidden": null, "hidden.background": null, "hidden.border": null, "hint": "#969696ff", "hint.background": null, "hint.border": null, "ignored": "#808080", "ignored.background": null, "ignored.border": null, "info": "#9cdcfe", "info.background": null, "info.border": "#1e1e1e", "modified": "#d7ba7d", "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": "#d7ba7d", "warning.background": null, "warning.border": "#1e1e1e", "players": [], "syntax": { "comment": { "color": "#505050", "font_style": "italic", "font_weight": null }, "constant": { "color": "#0ca425c3", "font_weight": 900 }, "constructor": { "color": "#569cd6", "font_style": null, "font_weight": null }, "function": { "color": "#dcdcaa", "font_style": null, "font_weight": null }, "function.special": { "color": "#4ec9b0", "font_style": null, "font_weight": null }, "function.special.definitio": { "color": "#ed5c5c", "font_style": null, "font_weight": null }, "property": { "color": "#ed5c5c" }, "keyword": { "color": "#569cd6", "font_style": null, "font_weight": null }, "number": { "color": "#b5cea8", "font_style": null, "font_weight": null }, "operator": { "color": "#c586c0", "font_style": null, "font_weight": null }, "punctuation.bracket": { "color": "#808080", "font_style": null, "font_weight": null }, "punctuation.delimiter": { "color": "#ffffff", "font_style": null, "font_weight": null }, "punctuation.special": { "color": "#808080", "font_style": "italic" }, "string": { "color": "#ce9178", "font_style": null, "font_weight": null }, "type": { "color": "#4ec9b0", "font_style": null, "font_weight": null }, "type.builtin": { "color": "#9c851f8e", "font_style": null, "font_weight": null }, "type.interface": { "color": "#b681ef" }, "lifetime": { "color": "#ed5c5c", "font_style": null, "font_weight": null }, "variable": { "color": "#9cdcfe", "font_style": null, "font_weight": null }, "variable.special": { "color": "#808080", "font_weight": 900 }, } } } ] } ```

Thats is how far as I can get changing the theme so .. I manage to change a bunch as shown on the settings

Im wondering why we cant do something like

        "keyword.enum": {
          "color": "#b681ef",
          "font_style": null,
          "font_weight": null
        }

Hope This would be added in near future...

insunaa commented 1 month ago

imo there should be at least some debug mode where you can hover over (or right-click) a text element in the buffer and let it tell you which exact setting of the theme is affecting this element. Right now it's mostly guesswork whatever I have to override in the settings to get the desired look.

In C++ member functions should also not have to share their color value with editor.foreground when there already is a function type for syntax highlighting Also hint.background and hint.border should actually do something... anything

After a few thousand lines the theming engine seems to break regardless of anything: image

In this example see how SqlStatementID is suddenly treated differently for no apparent reason?

Also note how the string literal in CreateStatement("... is just white text, when it should be green. Switching themes does not change that these sections are miscolored