pouyakary / procolors

A collection of coding themes for syntax highlighting and the editors that are designed to be available in dark and light modes with a very high precision of harmony and token definition coverage.

Pro Colors is a theme designed in the most careful manners for harmony and happy looking. The idea is to have a theme that looks pretty and reminds you of candy, has harmony in it's look, changes the feel of programming to something completely different and is fairly professional.

→ Get Pro Colors for Code

First-class Language Support

Pro Colors supports a big range of languages very good. It fully implements the TextMate's tmTheme colors so all of the languages are supported, but Pro Colors provides first-class support for these languages, First-class support means that each token of the language grammar has it's own unique Pro Colors custom coloring, making sure all tokens are colored and the overall experience is harmonized and legible.

Name	Token Coverage	Grammar Provider	Grammar Quality (Token Coverage)
AppleScript	Full	Jan T. Sott	High
Arendelle	Full	Kary	High
Bash	Full	Microsoft	Very Low
C	Full	Microsoft	High
C#	Full	Microsoft	Normal
C++	Full	Microsoft	High
F#	Full	Microsoft	Good
F#	Known Tokens	Microsoft	Very Low
Fish Shell	Full	Kary	Good
GLSL	Full	@stef-levesque	High
GNU Make	Full	Microsoft	Good
Go	Full	Microsoft	High
Haskell	Known Tokens	Justus Adam	Very Low
Haxe	Full	vshaxe	High
HTML	Full	Microsoft	High
IDF	Full	Kary	High
JavaScript	Full	Microsoft	High
Jison	Full	Kary	High
JSON	Full	Microsoft	High
KaryScript	Full	Kary	High
LESS	Full	Microsoft	High
Make	Known Tokens	Microsoft	Very Low
Markdown	Full	Microsoft	High
Nearely	Full	Kary	High
Ohm	Full	Attila Hajdrik	Very Good
Pageman	Full	Kary	Very Good
PEG.js	Full	Tobias Kahlert	High
PHP	Full	Microsoft	Very Good
PureScript	Known Tokens	Nicholas Wolverson	Good
Python	Full	Microsoft	Very Low
Racket	Full	Kary	Low
Regular Expressions	Full	Various Authors	High
Ruby	Full	Microsoft	Low
Rust	Full	Microsoft	Very Good
Swift	Full	Microsoft	Normal
SCSS	Full	Microsoft	High
TypeScript	Full	Microsoft	High
V	Full	V Language + Kary	Very Good
WebAssembly	Full	WebAssembly Foundation	Very Good
XML	Full	Microsoft	High
Yaml	Full	Microsoft	High

procolors's Issues

The light theme may be have a bug, the color of status bar become pink

JSX brackets are not rendering right

JSON is not correctly colored when an Array

I like the sample screenshot of JSON with the green key names and blue key value strings. However, my JSON files do not look like that:

Activity bar is not being themed in 12.0 update

Was excited to see the new update take advantage of the new VSCode workbench theming. Unfortunately, my activity bar is not being themed like your screenshot.

It seems like the download is not updated?

Javascript in php file - Bracket colors acting up since 12.0.0

I noticed some inconsistency in Javascript bracket/parentheses/punctuation coloring within "<script>" tags in php-based files (Laravel Blade in my case).

It does not seem to affect .html or .js files.

New (12.*.0)

Old (11.1.0)

Themes for Prism?

Hi @pmkary, back again with a hopeful question - have you made or considered making the Kary themes for PrismJS library? Apart from my self-interest in being able to use it, it will also help promote the themes more given the popularity of PrismJS - https://github.com/PrismJS/prism-themes

Dart lang support

Thanks for the awesome theme! But I can't see here support for dart/flutter, it would better if you add.

How to change ruby comment text color?

Hi Puuya!

I'm having similar issue like this one here Low contrast for comments and selection (light themes) #26

I'm trying to override the comment color, but to no avail.

I've found this helpful comment, but still no luck:
#23 (comment)

Here's what the popup says when I do: "> Developer: Inspect Editor Tokens and Scopes":

I tried many different combinations, but nothing works:

"workbench.colorCustomizations": {
    "[Kary Pro Colors － Eye Light]": {
      "comment.line.number-sign.ruby": "#ff0000"
    }
  }

"editor.tokenColorCustomizations": {
    "[Kary Pro Colors － Light]": {
      "comments": "#FF0000"
    }
  }

Any suggestions?

Thanks!

"Default" color same as comments

Unknown tokens are colored (effectively) the same as comments. This makes readability difficult, since code can easiliy be mistaken for comments.

Request: Independent from first class language support, non-comments should be better distuingishable from comments.

Differentiate focused file from other

Hi,
First thanks to this great theme.
One thing that's bothering me: it's hard to differentiate the focused and unfocused tabs (in the tab bar).

Pro colors Dark theme (v32.3.0 latest in visual studio marketplace):

Default dark+ theme :

Thanks
Fabien

Babel Definition Problems

Babel Definitions are needed

Improve syntax highlighting for PHP

I've been working with the light theme in VS Code and am loving it so far!

I'm just wondering if there's any chance for improved PHP support? It doesn't look like much tweaking is needed but I'm coding in Laravel at the moment and have noticed some things aren't being colorized (classes in use statement, classes/methods called statically, etc):

Thanks!

Suggestion: Background of the selected node from the Explorer panel's tree items should be the same even when lost focus

Hello, I have one more feedback that i notice when i was working with this VSCode theme.

This is the initial state of the selected tree node from the Explorer panel tree items

But it seems that the color will change to somewhat not visible when it loses focus from the explorer panel (Eg. while typing code in the editor) as shown below. (ps: I have marked the difference between selected node and hover node when editor is still in focused.)

IMO, i think that the same color scheme for selected should be maintained in explorer even when it has lost focus, because imagine you're working with multiple partial project files, it might be useful to get to know where you are in your tree directory. VSCode team has made a good job to automatically set the selected tree node according to your current selected tab on top, i just feel that it might be better if the selected color will be the same as it is when it's active.

Thanks.
(ps: The icons in the tree items are from VSCode icons (https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons) just in case you're wondering).

keep the activebar black in kary-light

like the dark bar on top of github.com, leave a dark bar in the left is a design principles of contrast.
when the left activebar is dark, it can't bother me when coding.

as robin williams says in Non-Designers-Design-Book:

Contrast on a page draws our eyes to it; our eyes like contrast. If you are putting two elements on the page that are not the same (such as two typefaces or two line widths), they cannot be similar—for contrast to be effective, the two elements must be very different.

Low contrast for comments and selection (light themes)

The contrast of comments’ foreground color to the background of both light variations of the theme is way too low. I can barely read the text.

Similarly, the background color of selections is too low. In the below screenshot, addShortcode is selected.

Any chance the colors are going to be changed?

Poor Contrast Entering Text via User Snippet

First, compliments on the theme. It's by far my favorite. Thank you for creating it and all your effort!

In the light theme, when inserting HTML (or CSS) via a user snippet and then typing into the tabstop via the $1 in the html.json or css.json file, the contrast between the highlight background color and foreground text color is poor, especially for comments. See attached screenshot.

Question: Is it possible to consider variable scope for colours?

Thank you for the nice theme. I am not sure, if this is possible, here is an example:

function f (x) {
  return function g(y) {
    // Ideally, x and y would be coloured according to the function scope, they are declared in :)
    return x + y  
  }
}

Color contrast in references panel

When showing the references, the list of filenames are barely readable if not selected.

Background color mismatch in Kary Pro Colors - Minimal Dark

I've noticed that two areas of the background color of the editor are mismatched in the "Kary Pro Colors - Minimal Dark" theme.

I'm running VSCode Version 1.35.0 on MacOS Mojave 10.14.5 (18F132).

I'm attaching two screenshots.

This first one has only been manipulated to hide the code as it is my employer's. (Sorry about that.)

This second screenshot is the same as the first one, but to exaggerate the effect (since the original can be difficult to spot the difference) I've gone into The Gimp and used the flood fill tool with a threshold of 0 to fill the two different colors in red and blue to make the borders more obvious.

Highlighted phrases not visible when searching

Using Kary Dark and Kary Minimal Dark theme, search results are barely visible:

Using default Dark+ theme, the same scenario looks like this:

It is hard to find search results in long lines of code because of this issue.

Implement workbench theming from VS Code 1.12

Now that VS Code supports workbench theming, would it be possible to update the Kary Foundation themes to incorporate this feature. I've done something quick and dirty for the light theme as an example but it would be awesome to have something officially implemented in a future update!

"workbench.colorCustomizations": {
    "activityBar.background": "#f7f7f7",
    "activityBar.foreground": "#bdbdbd",
    "activityBarBadge.background": "#c94824",
    "activityBarBadge.foreground": "#f7f7f7",
    "button.background": "#985da3",
    "button.foreground": "#f7f7f7",
    "contrastBorder": "#e5e5e5",
    "editorLineNumber.foreground": "#ccc",
    "list.activeSelectionBackground": "#f2f2f2",
    "list.activeSelectionForeground": "#428226",
    "list.hoverBackground": "#f2f2f2",
    "list.inactiveSelectionBackground": "#f2f2f2",
    "notification.background": "#00945e",
    "notification.foreground": "#f7f7f7",
    "panelTitle.activeBorder": "#a56416",
    "panelTitle.activeForeground": "#a56416",
    "panelTitle.inactiveForeground": "#bdbdbd",
    "sideBar.background": "#f7f7f7",
    "sideBarSectionHeader.background": "#f7f7f7",
    "sideBarTitle.foreground": "#9b9b9b",
    "statusBar.background": "#f7f7f7",
    "statusBar.debuggingBackground": "#c94824",
    "statusBar.foreground": "#ccc",
    "statusBar.noFolderBackground": "#f7f7f7",
    "tab.activeBackground": "#fff9ed",
    "tab.activeForeground": "#a56416",
    "tab.inactiveBackground": "#f7f7f7",
    "tab.inactiveForeground": "#bdbdbd",
    "titleBar.activeBackground": "#f7f7f7",
    "titleBar.activeForeground": "#6c6c6c"
}

Differentiate const and let

Thanks for a great theme!

Would it be possible to adjust the colors for const and let variables in JavaScript/TypeScript? They use the same color right now.

Kary Pro Theme

Kary Pro Dark

Kary Pro Light

Other themes

Dark+

Dark+ V2 (Experimental)

GitHub Dark Default

Light+

Light+ V2 (Experimental)

GitHub Light Default

Yellow color contrasts in Eye Light theme

Hi @pmkary, firstly, thank you for the excellent work in developing these themes. It is the first light theme that I've gotten to and is actually pleasant to the eye!

The only thing that I see myself squinting at always is the yellow color, like you'd see in the screenshot here: https://cl.ly/0L1C231o1K31

Notice the yellow paranthesis in the screenshot above. I appreciate the intention there of driving the focus to the actual code that matters but if you have some nested code like that, it becomes hard to see if that is a ')' or '}' and feels a little too close to the off-white background.

I wonder if you agree that the contrast there could be experimented with?

Terminal white is unreadable in light theme

ANSI white and bright white seem to still be white in the light theme, and therefore can't be read in the light theme; it looks like the text is missing (because it matches the background).

I had to override and make it a gray.

Support Sass highlighting better

Hi,

First off, great theme!

It would be nice if Scss files had better highlighting. See this demo below where one is selected as Sass language mode and the other is CSS.

Sass:

CSS:

I don't think either are necessarily correct for Sass but the CSS one seems a better direction with more colour to differentiate parts.

Thanks,
Dave.

Appreciation ❤️

No bugs here sorry! Just wanted to say thanks for your hard work!

I love light themes but unfortunately they are very rare compared to dark themes and most of them are not pleasant and accessible like yours. You did a really good job! 🔥

minimap in kary-light

drag minimap use a ugly orange block is very unhappy.
could you please set it as good as kary-dark?

Support for `editor.bracketPairColorization`

In Visual Studio Code 1.60, a new option has been added to support bracket pair colorization in the editor. Bracket pair colorization is themable (see editorBracketHighlight, etc), meaning this extension could provide its own bracket pair colors!

By default it looks like this, some rather garish color choices by the VSCode team.

Would be awesome if this could be added, thanks!

Ask for the theme on Mac iterm2 :)

Hi, Vary appreciate for your theme, I love it very much.
But sadly I can't use it on Mac iterm2. May you please add this theme for item2 ?

Php highlighting "broken" in 12.0.0?

Methods, statics, strings, arrays, even the brackets are all green (to me at least).

Before (11.1.0):

After (12.0.0):

Nice to have ProColors theme for Intellij IDEA

The excellent theme would be great to have this theme for IntelliJ IDEA

Support Zed editor

Hey,

I love this theme and I have been using it with VSCode for quite a while already. However, I've moved recently to Zed and I really miss this theme.

Is there a way to port it over there?

Thanks!

Border around hover widget?

Hi,

first let me say that I really, really like your Lite theme! 💛 I'm using in in VS Code.

There is only a minor thing that bothers me from time to time: It's sometimes hard to recognize the hover widget as a hover widget. The first time I saw it, i thought its a rendering bug:

I think it would be better I there were at least a thin border around and/or a slightly different background color. For Example:

What do you think?

More green in php language mode (HTML foreground)

Unfortunately I've found another issue with green coloring in php scope, this time html foreground...
Can't believe I didn't spot this until now.

New (12.*)

Old (11.*)

Typo in VS marketplace Readme

its simple.. here is a shot

just change PEG to PUG
i would make pull req. but I didn't found this file in the repo(not searched well)
looking forward 😄

SCSS scopes are missing

I forked your theme and noticed the various colors applied to css and less files do not apply to scss files. For example:

  - name: CSS property
    scope: property-name.css
    color: .green

I assume this should be

  - name: CSS property
    scopes: 
      - property-name.css
      - property-name.scss
    color: .green

I'm happy to add these in a PR but I'm a bit confused by the theme generation process with themeX. I installed the node package, and the test passes but I can't actually generate any editor themes. I will read the docs and see if I can figure it out. In the meantime, it would be great to add SCSS to the CSS and LESS defs.

Unclosed angle brackets causing issue

When using with react, if there's unclosed angle brackets, the charactors behind is invisible.

Kary Light in high resolution tires the eye

I don't know if this counts as an issue on the theme or my monitor or even my eye. I'm using a 4k display and VSCode maximised. As you can see in the screenshot below there is way too much whitespace and when I'm focused on the code it quickly tires my eye. I've changed the background color to #eee as you suggested but it doesn't help very much. Also doing this makes current line almost indistinguishable.

Without the color configuration, it looks like this:

Looks different

For some reasons them in my VSC looks completely different than on an example ( I guess something wrong with contrast)

any ideas how to fix it?

alternative color for rust `use` and `impl` keyword (like `for` in pink)?