onedark.vim icon indicating copy to clipboard operation
onedark.vim copied to clipboard

Support dart highlighting

Open l0nax opened this issue 5 years ago • 15 comments

Description

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

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: Screenshot_20200706_151348

NOTE: Thanks for your awesome theme :D

l0nax avatar Jul 06 '20 13:07 l0nax

Thanks for your proposal! I basically threw your suggestion verbatim into https://github.com/joshdick/onedark.vim/pull/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 avatar Jul 07 '20 16:07 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?

joshdick avatar Jul 07 '20 16:07 joshdick

@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 avatar Jul 07 '20 20:07 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 :shrug: (just my opinion btw this is already an improvement) dart-highlight

akinsho avatar Jul 07 '20 20:07 akinsho

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

l0nax avatar Jul 08 '20 06:07 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.

l0nax avatar Jul 08 '20 06:07 l0nax

@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

joshdick avatar Jul 08 '20 07:07 joshdick

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.

l0nax avatar Jul 08 '20 08:07 l0nax

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.

joshdick avatar Jul 18 '20 04:07 joshdick

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 https://github.com/joshdick/onedark.vim/blob/c0f22072c8780494afce1bc0c5ea4de252c4516f/colors/onedark.vim#L364 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 :shrug:

akinsho avatar Jul 18 '20 13:07 akinsho

@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.

l0nax avatar Jul 20 '20 06:07 l0nax

@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.

joshdick avatar Jul 22 '20 04:07 joshdick

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.

l0nax avatar Jul 22 '20 05:07 l0nax

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 :shrug:

akinsho avatar Jul 22 '20 12:07 akinsho

Why the darthighlighting branch was not merged?

Grieey avatar Nov 18 '22 06:11 Grieey