Support dart highlighting

[l0nax]

Description

Currently, using this color scheme while writing dart/ flutter code looks like this:

Which isn't beautiful because most text is colored yellow.

Proposal

Since the official dart plugin (https://github.com/dart-lang/dart-vim-plugin) does create the syntax keywords, they can be used to colorize the specific words.

I've created some highlight definitions to manually make the theme work better with dart/ flutter code:

call onedark#set_highlight("dartTypeDef", { "fg": s:red })
call onedark#set_highlight("dartClassDecl", { "fg": s:red })
call onedark#set_highlight("dartInterpolation", { "fg": s:blue })
highlight link dartLibrary Include
call onedark#set_highlight("dartCoreClasses", { "fg": s:cyan })
call onedark#set_highlight("dartSdkClas", { "fg": s:cyan })
call onedark#set_highlight("dartStorageClass", { "fg": s:dark_red })
highlight link dartExceptions Exception
highlight link dartStatement Statement
call onedark#set_highlight("dartConstant", { "fg": s:dark_yellow })

Where dartCoreClasses comes from here: https://gist.github.com/kika/7a3a37ab0edeb1cc54c225ff4fa00afc (renamed dartFlutterClasses).

Screenshot after changes:

NOTE: Thanks for your awesome theme :D

[joshdick]

Thanks for your proposal! I basically threw your suggestion verbatim into #229. A A quick manual test seems to be working as intended to me, but can you verify that it works for you as expected, since I'm unfamiliar with Dart?

[joshdick]

I also don't understand the intention behind dartCoreClasses since it seemingly doesn't appear in https://github.com/dart-lang/dart-vim-plugin; can you clarify how the gist you linked is related?

[akinsho]

@joshdick just butting in as I use dart a lot and would love to see the highlighting improved. I think what @l0nax means is that the gist adds a bunch of core classes (similar to Node JS apis or web api's in JS) to the dartCoreClasses syntax group which means they can be highlighted. All the cyan items in his screenshot are not picked up by dart-vim-plugin syntax plugin normally and you'd need to add the syntax definitions to pick those up. All in all not sure if adding those should go into that plugin vs here but it would be great to get more/better highlighting for dart

[akinsho]

Also just my 2 cents but I think the purple that is used for those highlight groups in the vscode version-ish of this theme is nicer, less alarming 🤷 (just my opinion btw this is already an improvement)

[l0nax]

As @Akin909 said: The dartCoreClasses is an additional syntax group to improve highlighting.

[l0nax]

@joshdick do you have some "reference" colors?
Because I'd like to have the colors consistent to the other color "schemes" of the other languages.

[joshdick]

@l0nax All colors currently used by the theme are located here: https://github.com/joshdick/onedark.vim/blob/master/build/build.js#L8

The build system substitutes them into the theme thusly: https://github.com/joshdick/onedark.vim/blob/master/autoload/onedark.vim#L5

[l0nax]

Yes, but do you have a scheme like "operators are colored red", ...

I tried to use the colors from the other languages, but it would be nice to have the same colors for (mostly) the same types over all languages.

[joshdick]

Yes, but do you have a scheme like "operators are colored red", ...

Those types of relationships are defined in colors/onedark.vim starting here: https://github.com/joshdick/onedark.vim/blob/master/colors/onedark.vim#L169

The dartCoreClasses is an additional syntax group to improve highlighting.

I understood this, but the gist you linked contains dartFlutterClasses and not dartCoreClasses; as you stated, you renamed it from what's in the gist. What I don't understand is where and how the renaming applies; did you just manually rename the groups in that gist and include them in your own configuration? If so, dartCoreClasses probably doesn't belong explicitly in onedark.vim since it would only apply to your personal configuration. However, this could still be cleanly represented in your configuration instead of in onedark.vim directly, by using onedark.vim's built-in customization functions.

[akinsho]

Yes, but do you have a scheme like "operators are colored red", ...

I tried to use the colors from the other languages, but it would be nice to have the same colors for (mostly) the same types over all languages.

@joshdick, @l0nax based on the colors in

onedark.vim/colors/onedark.vim

Line 364 in c0f2207

call s:h("jsStorageClass", { "fg": s:purple })

it looks like other languages in this theme use s:purple for StorageClass e.g. call s:h("jsStorageClass", { "fg": s:purple }) and call s:h("perlStatementStorage", { "fg": s:purple }). As is also the case for class keywords (js is the only example in that file)

call s:h("jsClassKeyword", { "fg": s:purple })
call s:h("jsClassMethodType", { "fg": s:purple })
call s:h("javascriptClassExtends", { "fg": s:purple })
call s:h("javascriptClassKeyword", { "fg": s:purple })

Dark red (based on searching in that file) only seems to be used for template strings 🤷

[l0nax]

@joshdick you're right. dartCoreClasses is a custom syntax group which I created. Sorry for this mistake. I don't think that this has to be added to this colorscheme.

[joshdick]

@Akin909's comment made me dig into this further, see my comments in #229.

@l0nax Were your color changes based on personal preference due to disliking theme's default colors when used with https://github.com/dart-lang/dart-vim-plugin ? That plugin appears to be using sensible default highlight groups that all point at ones that already exist in onedark.vim.

Finally, @Akin909's comment made me realize that the main call s:h("StorageClass", { "fg": s:yellow }) in onedark.vim should likely be changed to purple to match the individual language overrides, which would maybe make the overrides redundant.

[l0nax]

I made those changes because dart files did appear completely yellow.
And I tried to use colors from other language specific colors from this theme.

[akinsho]

Looking at the highlighting for dart in using One Dark pro in vscode (which is what I'm comparing against primarily just as a GUI editor example with a similar theme) most of the highlighting appears pretty similar apart from the StorageClass highlights which I personally think would be more consistent and subjectively nicer as purple rather than current yellow. It's especially obvious in dart that there is a lot of yellow which I think the purple would break up but would also make it more similar to languages like JS.

Without trying to undermine the original issue I think in dart especially in flutter most things are classes so are highlighted as such so you see a lot of the same highlight come up, but I think this is more due to language's usage in flutter. I personally think whilst I like the special highlighting for coreClasses etc that would be a better addition to the dart-vim-plugin 🤷

[Grieey]

Why the darthighlighting branch was not merged？