Yellow function names in WebStorm 2019.3xx

[mariojackson]

Hi,

I'm getting a lot of yellow colors after the installation of the Nord theme in WebStorm 2019.3xx. This happens only after the initial installation and a restart of the IDE. Before the restart, the yellow colors are a light blue one (I guess the correct one). This happens on both Arch Linux and macOS Catalina. However, this does not happen in GoLand for example.

After initial plugin installation and before the restart

After IDE restart

After the first restart, the colors stay like that.

It seems to be related to #77. My Nord plugin version installed is 0.9.0

Thank for creating my favorite theme and please let me know if you need any further information regarding the issue.

[arcticicestudio]

Hi @mariojackson :wave:

This is a known problem and it might be that you're using a customized copy of Nord. When setting a color or UI theme that is provided by a plugin and editing any of the editor's code styles, the IDE will automatically create a copy of the theme with your modifications. Can you please check if there's a Nord file in your configuration directory in the colors folder. You can find the path to the directory for your OS in the official documentation about default IDE directories.

If there's a file named Nord (might have different file extensions) you need to delete it. Afterwards restart WebStorm and set Nord as editor scheme again. This will use the styles provided by the plugin instead of using a (maybe outdated) copy.

Anyway, it's interesting to see that it work fine in GoLand for JavaSript/TypeScript code even though WebStorm is focused on such web-scoped languages :thinking: I'm still not sure what exactly is causing issues like #77, but maybe this fact is a sign that the theme engines used in the different IDEs differ a little.

[mariojackson]

Hi @arcticicestudio

Thanks for getting back at me so quickly.

I've went to the specified config directory which for me is located under ~/.WebStorm2019.3. I could not find any colors directory and I think this is the case for me since I did not make any customization to the theme.

To make sure that I did not miss anything, I went ahead and deleted the whole .WebStorm2019.3 directory, uninstalled WebStorm and re-installed it, without importing a previous configuration and without enabling settings sync. Afterwards the only plugin I installed was Nord, but unfortunately it gave me the same behavior.

To double check, I went into the .WebStorm2019.3 directory and searched for all files which included the name nord and I think the found ones are just the default ones.

I have not been exact with GoLand though, sorry. I have had a similar problem with Go code in GoLand in the past, but it was fixed and still is fixed for me in version 2019.3.

[mariojackson]

P.S. on macOS the colors directory exists, probably because I've made some customization to the default template. The filename of the only file found inside that directory is called _@user_Default.icls.

[arcticicestudio]

First of: Thanks a lot for your sponsorship :blue_heart: This really helps a lot to keep on working on these projects :smile:

The _@user_Default.icls file is stores changes you've made to the default JetBrains theme. When customizing other themes a file like _@user_Nord.icls would have been created. The other files from the screenshot are all fine.

I had the idea that your problem might be the same like the one fixed in #77: Some default values of syntax highlighting theme keys are not set correctly (like described in #77) by inheriting the parent theme key so they fall back to the default JetBrains theme (Darcula). My guess is that this is the case for functions of the TypeScript syntax theme keys. I'll try to reproduce the problem tomorrow by installing WebStorm and applying the Nord theme in debug mode to see how the theme keys for TypeScript functions are defined.

[mariojackson]

You are welcome! Thanks for creating this theme and porting it to different applications :).

It could be that it is your stated problem. I hope that you do manage to fix it without investing too much time. Please let me know if I can help or if you need any further information.

[Tom1206]

I had the idea that your problem might be the same like the one fixed in #77: Some default values of syntax highlighting theme keys are not set correctly (like described in #77) by inheriting the parent theme key so they fall back to the default JetBrains theme (Darcula)

Is this a requirement to have Nord use parent_scheme="Darcula"? Because it cause a lot of inconsistencies in the colours when it need to fall back to Darcula colours. Wouldn't it be a lot cleaner if all missing colours are juste the default nord4 text colour? In PHP and C/C++ for exemple there is a lot of (ugly) purple by default because of that.

[arcticicestudio]

@Tom1206 That's a good question 👍

The editor scheme was initially created a long time ago way before the new UI theme API has been introduced. Maybe this causes the colors from using the defined parent value of the Nord theme and it falls back to Darcula. I'll also test this, maybe be can finally remove the property and prevent highlighting pronlems for other languages that are not explicitly defined by Nord.

[arcticicestudio]

I've tested a lot scenarios and came up with some interesting results. Unfortunately there is only a spare amount of documentation about the syntax and XML schema of editor color schemes, so this required some time to get into the IntelliJ Community Edition source code that is the origin code base for all JetBrain IDEs. Another major difficulty to test this is the fact that I was able to reproduce the wrong syntax highlight only randomly. After setting up my IntelliJ Ultimate Edition for TypeScript/JavaScript/React development and starting it for the first time, the syntax highlighting was totally messed up and many colors were inherited from the Darcula theme instead from Nord, but after changing some attributes on the editor color scheme and re-applying it all elements were highlighted correctly. I was not able to reproduce the wrong colors afterwards, even after re-installing the plugin, but only when using a "fresh" IntelliJ instance (tested via VirtualBox). This is a really strange behavior 😒

Colors only applied correct after restart.

Anyway, @Tom1206's idea might be a good start to mitigate the problem since it looks like the parent_scheme property is not required at all, but more like a fallback for missing color definitions of the theme or maybe just a hint to know which theme was used as base. I've simply created a copy of the Nord editor color scheme and the scheme root element doesn't used the parent_scheme at all:

<scheme name="Nord copy" version="142">

I removed the parent_scheme from Nord, re-installed the plugin from local disk and all colors were applied correctly after restarting the IDE, but somehow the Darcula colors were still applied somewhere in the background. Right after changing the editor scheme in the preferences, one can see the wrong colors being applied just for some millseconds (short flickering of colors) and then changed to the ones defined by the actually activated theme. Another indicator is that the Darcula colors are still active for other elements like the quick documentation popup:

Some colors are still inherited from Darcula even after removing the parent_scheme property.

Quick Doc of React component

Quick Doc of constant

Quick Doc of function

Quick Doc of React props

Quick Doc of TypeScript type

As you can see, there are still the wrong colors of the Darcula theme.

@mariojackson Could you please manually install the following plugin to see if it works for you? It's the test with the removed parent_scheme attribute of the editor scheme. You need to uninstall the current plugin (installed via JetBrains Plugin Marketplace) and install it manually from disk.

nord-jetbrains-no_parent_scheme.zip

While searching for some documentations about the XML schema of editor color scheme, I also stumbled across a blog post from 2017 that includes information about a bundledColorScheme XML tag that can be placed inside the extensions tag in the plugin.xml file. I've also checked many other popular color scheme plugins, including official ones, but none of them made use of this tag. This might be because the UI theme API includes the editorScheme field that is used to define the path to a matching editor color scheme for the corresponding UI theme. Anyway, it's quite interesting that the bundledColorScheme tag is still used when exporting a editor color scheme from within the IDE using the “Color scheme plugin .jar“ option.

I'll add this tag to Nord to see if this (positively) affects and improves the loading of the correct colors for the syntax elements.

If all of that doesn't help, I'll go with the way that worked for the same problems with the Go programming language: Adding explicit support for the theme keys of TypeScript and JavaScript syntax elements instead of letting them inherit the colors from base elements of the theme.

[arcticicestudio]

This (IDE) bug really bothers me a lot since it can appear for many other languages whose syntax highlighting definitions are changed in upcoming IDE updates and versions. The inherited values are a great way to prevent theme breakage, but when they don't work the way they should it's a feature of the IDE that is almost useless 😞

Anyway, I'll definitively want to fix this since I'm currently also trying to move my whole development workflow for TypeScript/javaScript/React based applications from VS Code to IntelliJ (which has all the features of WebStorm since all other IDEs are only "lightweight" variants of IntelliJ 😄 ). I use IntelliJ for all of my projects, mainly Go and some Java/Spring for my job, but sticked with VS Code for TypeScript/javaScript/React since it works fine out-of-the-box with due to the fact that it itself is written in TypeScript. The only reason not to use IntelliJ was that some years ago the support for TypeScript with React and all of the ecosystem (Babel, Prettier, Yarn etc.) was not really existent, but today it works like a charm thanks to unified systems like the “language server“ specification and protocols. Even compiler/transpiler/bundler feature like import aliases are not a problem anymore :100: Therefore I'll finally move on to IntelliJ as my all-in-one IDE and want it to work great with Nord for both, me and all Nord users 🚀

[mariojackson]

Hi @arcticicestudio

First of all thank you for all your already invested time into fixing this bug :smile:

I've also started with IntelliJ in the past which was my only IDE. When working with big projects, my IDE was slowing down a little because it indexed all the files and the RAM was getting a little out of hand. Therefore I decided to use the 'stripped down' versions when possible to have a more smooth experience, since less total plugins are installed and thus less plugins taking resources for analyzing the code (other plugins were analyzing code even though it wasn't needed but you can disable this). But it's not worth the extra bucks I'd say.

I also like VSCode for smaller projects but the autocompletion, intellisens and the nice hints make the JetBrains products my preferable ones.

I just wanted to ask you about the link to the plugin file to download, but just saw that you have now already provided it. Thank you!

I also like it very much that you always take your time when answering, since your answers are always very thoughtful and it also shows that you care. This is one of the reasons why I decided to sponsor the first time ever on Github. Also, your website does look very good :).

---

I just installed the provided plugin locally from disk and it works even after an IDE restart :tada:

[Tom1206]

Hi, Thank's a lot @arcticicestudio for all the feedback. I discovered your theme last year on VSCode, and instantly fell in love with it. I tried almost every theme out there, and Nord is by far the most polished, beautiful and productive I found. Hats off to you. This year, as I am starting a dev carrer (as trainee student), I switched almost all my development on the Intelij platform (the exemplar support by Nord played a part it the decision 😉). I'm so glad to learn that you are also moving IDEs, and that Nord support will be even better going forward.

Anyway, I also tried installing nord-jetbrains-no_parent_scheme, and it fixed everything for me. I tried it on IntelliJ for Erlang, fixed the ugly Darcula purple function arguments. On WebStorm, fixed the yellow function names. On PhpStorm, fixed all the purple for the variables. Everything worked fined on restart also. Seems to me you fixed the problem 🙌

[arcticicestudio]

@mariojackson Using a "lightweight" JetBrains IDE makes total sense when you're scoped to a specific type of development like e.g. WebStorm for web & frontend work. I guess that the main reason why all these different exist at all, otherwise IntelliJ would be the one-for-all solution :wink: : I use IntelliJ since I'd consider myself what's called a "full stack" developer. I love to build with Go and it's my main language, even though my daily job is heavily influenced by Java with Spring (Boot). My private and open source projects are all build with Go when it comes to lightweight, performant backends and React with TypeScript for frontends all the time. Since this would require too many "lightweight" IDEs, IntelliJ Ultimate is the perfect solution by installing the plugins that add the full functionality for Go and TypeScript/JavaScript. Ah, and because we need it for Java for sure :smile:

Also thanks for the kind words, feedback like this makes it fun to work on any open source project! During the years as developer I've learned to write and document things down as detailed as they are in my head. This way information won't get lost and can simply be find again by other and myself too. Most of the time I reuse such analysis like above to include them in PR descriptions, commit messages and projects docs. Writing them down here saves the time to remind all these things later on :laughing:

@Tom1206 Nice to see you like Nord that much! You really don't want to use any other IDE aynmore after using one from JetBrains, it's like coding on steroids :smile: It's also a nice side effect, especially as trainee, that all these smart intentions, code analysis and error preventions of the IDE will help you to dive deeper into a language and focusing on clean code instead of requiring you to deal with small bugs or language quirks.

And by the way: I haven't fixed it, I've only applied the idea of the parent_scheme that you suggested so you fixed it. Thanks again for this :muscle:

[arcticicestudio]

I've submitted #116 that adds explicit highlighting for some of the wrongly colored JavaScript syntax elements, TypeScript correctly inherits these so there currently no need to add these too.

Another PR will follow soon that removes the parent_scheme attribute like contributed by @Tom1206.

[arcticicestudio]

Also submitted #117 in order to remove the parent_scheme attribute.

[arcticicestudio]

The fix has been merged and released in version 0.10.0 🏷 The new plugin version has been deployed to the JetBrains Plugin Marketplace and should be available within the next 24 hours 🚀

[mariojackson]

@arcticicestudio awesome! Thank you for your great work Sven!

Also, I'm a "full stack" developer myself and also love using Go 😄

Have a great day!