Adjustment in String color and Function color in JavaScript ?

[GulajavaMinistudio]

Hello again, i have some suggestion or some discussion to talk about. In your theme, the color for string and function is green. I find it getting problem when string and function used in JavaScript Template Literals with backtick . You can see in below screenshot.

helloWorldFunction and string color is green, and not easy to distinguish when we use function in string template literals.

And for comparison, here's syntax coloring from default VS Code theme function color is different from string color, so it's easy to differentiate in code navigation. String color is red , and function color is bright yellow.

And here again from Monokai theme from default theme in VS Code.

What do you think about it ? Green color for string and function in Gruvbox Material, need adjustment or not ?

[sainnhe]

Thanks for your suggestion :)

To be honest, I knew this problem from the very beginning.

The original gruvbox in vim uses green as function name

The syntax highlighting in vim is much worse than in vscode, many scopes don't have colors, even the function name.

And in vim, an option is provided to enable bold in function name in order to better distinguish function name between strings.

For the above reasons, I decided to keep the green function name when I was designing gruvbox-material for vim. After all, from the beginning, the goal of this project was to change nothing but the palette.

So this design is actually inherited from here, but this doesn't seem to work for vscode. There is no option to enable bold in function name, and the syntax highlighting is much better than vim. This is something I didn't consider when designing the vscode theme.

I have an idea. Would you like to maintain this theme for vscode? You seem to know more about vscode than I do.

I'm a vim user, and I rarely use vscode actually, so there may be all sorts of minor problems with this theme just like this case.

If you are willing to maintain this project, you can change this theme as you want, and publish this extension whenever you like.

This project is ver very easy to maintain, I promise you can learn how to modify the theme in one minute.

1. Press Ctrl + Shift + P to launch the quick open.
2. Input Inspect TM Scopes
3. Place the cursor on a code scope and you can get the scope name(the scope name is variable.other.constant.ts in this case)

4. Edit themes/*.json, add something like this

        {
            "name": "TypeScript aqua",  // Fill in whatever you like
            "scope": "variable.other.constant.ts",  // the scope name
            "settings": {
                "foreground": "#89b482"  // The colors are defined in colors-dark.yml and colors-light.yml
            }
        },

What do you think? Would you like to maintain this project?

[GulajavaMinistudio]

I think it's a great idea. Can i fork your theme, and customize my own color on it. Can I ? And with forking your project, i can make customization, without harming your theme color.

[sainnhe]

Of course yes :)

I don't care my theme color is modified or not honestly. My idea is creating an organization so that more people can maintain this theme in the future.

But if you prefer to fork it and maintain this theme by yourself, I'll stop maintain my branch and notice this in readme, let users to use your fork instead.

[sainnhe]

Organization is more conducive to the long-term development of this project.

The author of solarized and gruvbox didn't create an org, maybe they thought they can maintain their project all the time, but they didn't. I don't know much about solarized, but gruvbox was taken over by gruvbox-community and is now in active development.

But I find it inconvenient to create org. I personally prefer to maintain a project by myself to be frank. If I were you, I would prefer to maintain a fork.

So both two choices are acceptable to me, the key question is to see which one you prefer.

If you decided to maintain your own fork, please tell me and I'll archive my repository, then release a new version to tell users to use your fork instead.

[GulajavaMinistudio]

It's up to you then. But i suggest, this repository should not be archived. And keep this repository available for you and others (if someone want become a contributor for this project) .

Also creating Organization is good idea for maintaining project. Maybe we can contact other Gruvbox VS Code Theme creator, so they can join in your Gruvbox Theme .organization.

I am also still learning about creating custom theme and understanding Theme API in VS Code. Not to expert about theme and styling in syntax .

[sainnhe]

Hello, I've invited you, would you like to join this org?

[GulajavaMinistudio]

Yes, i have accepted this invitation. You can verify that now. Hope this community can grow and maintain Gruvbox material theme :)

[sainnhe]

Can you push to this repository now?

Also, do you have an account for dev.azure.com? I want to add you to the publisher of marketplace so you can publish this extension by yourself. If you have an account, please tell me the email of this account.

[GulajavaMinistudio]

Yes i can, i can push this repository now. And for publisher in vs code marketplace , i have an account. Can i email you the account name and email ?

[sainnhe]

Yes, please email me at sainnhe@gmail.com

[GulajavaMinistudio]

I have sent email to you.

Btw, i still learning how to customize this theme. I try change the String color from 'a9b665' to 'd8a657' . I pick from gruvbox color palette , so this string color will same with 'String Escape' color.

What do you think ? Is this string color now different from function / method color ?

[sainnhe]

I have some suggestions about this problem.

First of all, I think change the color of string to yellow is not a good idea.

Green is widely used as the color of string, and I think it's the best choice. Some users even said that they can't stand with color schemes that don't use green as the color of string.

You can imagine python code with lots of strings, if you use yellow, this will cause the entire screen to be yellow, some users may not accept this.

I would suggest 2 solutions.

1. Use italic in string. It's easy, but they may still not be easily distinguishable.
2. Change the color of function name, but it's very hard, because you'll need to modify the colors in all the languages that have optimized.

I personally think 1 is better, what do you think?

[sainnhe]

Hello, the palette files have been moved to gruvbox-material/gruvbox-material, you can found the color reference in palette-dark.yml and palette-light.yml.

[GulajavaMinistudio]

I think its better idea to make String to become green color with italic font style. Or make the green color for string a little bit bright color, so it's not the same color as function color.

Maybe we should close this issue, and move to new repository. Ok.

[sainnhe]

Using a brighter green color might be a good idea in other color schemes, but to be honest, I think doing this in this color scheme will break the balance of the color palette.

Did you find that the colors used in this color scheme is very balanced? All these colors has been very carefully adjusted so that all of these colors have the same brightness and contrast. You can try to use a brighter green color in String, and you will found that it will be very different from the rest.

Anyway, it's a good idea but I think using italic might be better in this case.

[sainnhe]

Don't worry, I decided to make a big change recently. There are two big problems in this theme:

1. There are too many colors in this theme, but not every scope needs to be highlighted. If everything is special, then nothing is special. So I decided to reduce highlighted scopes, i.e, change the syntax highlighting logic.
2. The workbench colors are based on another gruvbox theme which used too many borders, it's ugly. I'm going redesign the workbench colors.

Close this issue since I will change the entire syntax highlighting logic.