Mocha: Please change color scheme

[octref]

I've read through https://github.com/visionmedia/mocha/issues/802 and https://github.com/visionmedia/mocha/issues/590

I believe I've found where the issue lies:
Snippet from base.js
https://github.com/visionmedia/mocha/blob/master/lib/reporters/base.js

exports.colors = {
    'pass': 90
  , 'fail': 31
  , 'bright pass': 92
  , 'bright fail': 91
  , 'bright yellow': 93
  , 'pending': 36
  , 'suite': 0
  , 'error title': 0
  , 'error message': 31
  , 'error stack': 90
  , 'checkmark': 32
  , 'fast': 90
  , 'medium': 33
  , 'slow': 31
  , 'green': 32
  , 'light': 90
  , 'diff gutter': 90
  , 'diff added': 42
  , 'diff removed': 41
};

var color = exports.color = function(type, str) {
  if (!exports.useColors) return str;
  return '\u001b[' + exports.colors[type] + 'm' + str + '\u001b[0m';
};

So the color function takes in a type and uses the conversion table above to get the ANSI escape color.
A chart can be found here:
http://en.wikipedia.org/wiki/ANSI_escape_code#CSI_codes

As you can see:

Seems to be a closed-source terminal from IBM AIX.
I believe nobody is using mocha on it. (Correct me if I'm wrong)

Furthermore, I found the ECMA specification:
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-048.pdf
Here is page 62:

Color 90-99 are not in the specification. Most terminals wouldn't care implementing these colors correctly and god knows what color they'll fall back into.
And not everyone uses iTerm2, which has a contrast setting.
Please use color 30-37, if you want increased intensity then \u001b[30;1m would use the intense variant.
I think users are only responsible for configuring their terminals so the 16 colors look great on their bg/fg colors. So please don't just say _"It's the theme's fault"_ and close the issue. It's mocha's problem not using color from the standard palette.

[yoshuawuyts]

Can you PR it?

[timoxley]

@octref how many people are still using 16-colour terminals though?

[yoshuawuyts]

@timoxley afaik most people. Although nowadays you can choose what those colors look like.

[octref]

@yoshuawuyts
Just made the request. Sorry I was new to git and github so it took me some time to learn it.
That's my first time making a PR. If there's anything wrong with it please let me know!

[octref]

@timoxley
Do you mean that most people are using 256 color terminals?
That is not really related to ANSI escape code.

In ANSI escape code 30-37 correspond to the colors(red, green, blue, etc) defined in your terminal.
So if you do node -e "console.log('\33[31mfoo')", because 31 corresponds to red, the terminal will output the text in whatever color you defined for red.
But color 90-99 is not in the standard. So node -e "console.log('\33[91mfoo')" generates text in some text the users have no direct control of.

Mocha outputs a lot of message in color 90. https://github.com/visionmedia/mocha/pull/1212/files

In my theme color 90 is too close to my background color that I can't see it.
In the case of Solarized theme, color 90 also seems to produce color close to Solarized bg. See #802 and #590 .

[jeffmay]

I don't really care about the framework. I just need to be able to run tests. I am going to switch to a different framework since the color scheme is basically unreadable, and I don't have time to figure out how to fix it.

Here is how it looks for me:

It looks pretty terrible in every terminal color scheme I have, but in my favorite scheme, the stack trace is invisible.

[wilzbach]

+1 for pushing this :)

[jeffmay]

In what terminal theme does a light green background color look good? I don't even know how mocha is supposed to look.

[MarcusSorealheis]

So you do care about Thea

On Oct 17, 2014, at 3:03 PM, Jeff May [email protected] wrote:

In what terminal theme does a light green background color look good? I don't even know how mocha is supposed to look.

—
Reply to this email directly or view it on GitHub.

[MarcusSorealheis]

So you do care about the framework of you need to run tests with it.

On Oct 17, 2014, at 3:03 PM, Jeff May [email protected] wrote:

In what terminal theme does a light green background color look good? I don't even know how mocha is supposed to look.

—
Reply to this email directly or view it on GitHub.

[jeffmay]

I'm sorry. My message was confusing. I meant that I would be fine with a less powerful framework, so long as I can run tests that are visible. Mocha could be an awesome framework, but if my first experience with it is unreadable output, then I'm not going to care about how awesome it may be, I am going to switch to another framework.

This was the first experience I had with mocha, and then I searched the internet for why I can't customize the output, and a bunch of people are saying that it isn't something mocha needs to fix. But if it isn't mocha's responsibility to look good in the terminal, why should I even care about the rest of the framework? A lot of good work went into mocha. It sucks that people like me are being turned away by an odd / and mostly unreadable color scheme (I could post how it looks in all of my terminals, all of them look really bad).

And yes, I lied a bit. I do care about mocha. I want to use it. I like the async support (among other things). I'm just expressing the frustration of a newcomer who heard about how awesome it is, only to be turned away because I don't have a blessed terminal.

[jeffmay]

These are the default terminal schemes, and it looks terrible in both:

Why can't I remove the green background?

[octref]

@jeffmay
Just a temp fix.
Find lib/reporters/base.js
In line 66-67, change

  , 'diff added': 42
  , 'diff removed': 41

to

  , 'diff added': 32
  , 'diff removed': 31

[timshadel]

You can also do it at the top of your test, like this:

var colors = require('mocha/lib/reporters/base').colors;
colors['diff added'] = 32;
colors['diff removed'] = 31;

Again, not a wonderful solution, but the diffs are so much better.

[djensen47]

Based on @timshadel answer, I did something a little different. I explicitly set both the foreground and the background:

var colors = require('mocha/lib/reporters/base').colors;
colors['diff added'] = '30;42';
colors['diff removed'] = '30;41';

I have a test-helper.js file that all of my tests include anyway so this is an easy fix. Setting the foreground like this should probably get rolled into mocha. Just my two cents.

[legomind]

This is still as issue when using solarized color scheme:

[mikeerickson]

Any chance this has been addressed somewhere that works with release version. I have tried all the various tweaks outlined above, but nothing works. My issue is that I cant see any of the messages in terminal (running MobaXterm on Windows).

[octref]

@boneskull
I just see this get reopened. How do you plan to fix it?

[boneskull]

I'm just going to use chalk so nobody can complain Mocha uses weird ANSI escape sequences.

[boneskull]

if people have a problem with the colors thereafter, it's really, truly, not Mocha's fault

[boneskull]

(we're locked to v0.4.0 of chalk to keep node v0.8.0 support--its default npm version doesn't grok carets)

[boneskull]

oops.

[boneskull]

reopening since this had to be reverted.

we can still use standard colors by using chalk's dependencies (maybe), but not chalk itself. this basically amounts to rewriting chalk _without_ functionality which can't be shimmed in IE8 (Object.defineProperty() is the gotcha; explanation)

[danielstjules]

Are you planing on reverting all of chalk via https://github.com/boneskull/mocha/commit/ba3378a336dad69b10970cd171d109f3160923ac ?

[boneskull]

@danielstjules yes

[boneskull]

@danielstjules well, it's this changeset now

[danielstjules]

Seems like we can work around that by forcing use of the defineProperty/defineProperties shim in IE8 though?

Edit: Chalk's use of defineProperties is minimal, so overwriting IE8's broken implementation with a shim would work.

[danielstjules]

I'm just getting off lunch break now so I don't have time to test, but I can take a stab at an alternative tonight.

[boneskull]

afaik there is no such shim that's functional. anyway I was having a hell of a time getting a shim to work; would appreciate the help

[danielstjules]

I can help dig into this 6 hours from now, but not sure how much of a rush we're in.

[boneskull]

It's not of huge importance. I did it in the first place because I thought it was low-hanging fruit. Boy, was I wrong...

[leighman]

If this gets fixed please consider using 'dim' in place of 'gray' which fixes output on the solarized theme [1].

Let me know if there's something I can do to help.

[1] https://github.com/chalk/chalk/issues/40

[dschinkel]

this is such a pain in the ass, I have the same issue in Webstorm, Unless I change the console colors to very light background, the passing text won't show because it's dark grey. I'd love to have a dark background for my console in Webstorm but if I do that then I can barely see the passed text for tests since I can't change that damn color! In Webstorm I'm able to change all the mocha colors (or override them, not sure how that works) in webstorm prefs under Fonts and colors for console, but I can't change just that one text for passing tests for some reason, the dark grey, it just cannot be changed.

[jdmarshall]

My coworker is having the same problem with my new test harness and I can't figure out how to get him a color scheme that doesn't suck on a black background.

[boneskull]

anyway, this is more of a "next major" thing, but will definitely be addressed

[jdmarshall]

I ended up changing the color mappings on my terminal to improve the contrast on the dark grey color. But it's a weird color selection in any context so I'd appreciate it if we got it fixed.

[wenwuwu]

I am still having this problem with solarized color scheme. I am annoyed.

[ScottFreeCode]

@boneskull What if we refactored the reporters a bit so that console-output reporters inherit from something that uses Chalk but the HTML reporter (and any hypothetical programmatic or null reporter) doesn't inherit this and then we can exclude the Chalk-using reporters from the browser bundle (assuming that isn't going to break intended PhantomJS usage...)?

[boneskull]

I can't for the life of me reproduce a terminal with a "solarized dark" color scheme wherein mocha won't be readable

[boneskull]

can someone tell me how to reproduce this on a mac with either iTerm or Terminal?

we _did_ fix the diff colors some time ago via a PR.

[boneskull]

See #2164 for a proposed fix. This fix LGTM _except_ for my inability to assert it fixes any problems.

[r-tanner-f]

@boneskull You should be able to reproduce by downloading the official Solarized theme for iTerm. Open the file with Finder, then open iTerm. Load the colors by opening Preferences, selecting the Colors tab, opening the "Load presets" menu, and choose Solarized Dark.

Then run any test and you should see something like this:

I tested #2164 with this and it looks the same unfortunately.

[r-tanner-f]

I added this on the PR too but, it's starting to look like this is mostly a problem with the Solarized theme. It's using bright black as its background, which seems a little odd.

FWIW, I'd say the PR definitely fixes the original issue here, but maybe not the problem people are having with Solarized + Mocha. I tend to get around this problem anyway by npm linking my own copy of Mocha so I can choose my own colors. Would custom colors be worth exploring?

[boneskull]

@r-tanner-f I did exactly that:

[boneskull]

@r-tanner-f Maybe the "minimum contrast" is making it so I cannot reproduce.

[boneskull]

Yep. When I slide it to the left, nothing is shown.

You can see here that the problem is with _the solarized theme itself_:

[boneskull]

While #2164 seems "more correct", and _potentially_ a low-impact change, it won't help anybody running a "Solarized Dark" theme in iTerm.

Running the official "Solarized Dark" theme in Terminal.app seems to work fine without any modifications.

Let's recap:

• OP complained about jacked-up color scheme
• To the credit of the OP, at the time the "diff" colors were jacked-up
• Someone sent a PR to fix the diff colors, and we merged that
• Along the way, people were complaining that the "Solarized Dark" theme didn't work
• tj was loathe to change the colors based on a a terminal theme some were using
• Ostensibly to convince tj, users noted the reporters used non-standard ANSI colors
• Others argued that you're unlikely to be using a terminal that doesn't support the non-standard colors
• Later, I attempted to leverage the chalk module for colors so Mocha could absolve itself of choosing them (and finally end the debate), but that caused mass brokenness, and had to be reverted.
• @jtangelder sent #2164, which removes the non-standard colors and uses "standard" ones
• As some users suspected, the non-standard colors had _no impact_ on some users of "Solarized Dark", who still have problems with visibility
• In fact, certain users w/ certain terminal configurations can notice no difference whatsoever when the changes in #2164 are applied.

I can now say with certainty, _if the colors Mocha uses aren't visible, your color theme is broken and/or your terminal is misconfigured_. If you are having problems wherein Mocha fails to display visible text, you will _also_ have problems using _other_ programs which leverage the same ANSI colors.

If we changed the colors so theme _A_ will display, there's no guarantee users of popular color theme _B_ won't suffer invisible text as a result, because color theme _B_ may be broken as well in a different manner. In either case, a terminal can be misconfigured.

I still may be interested in merging #2164, but I am going to close _this_ ticket. It's not really in Mocha's best interest to play whack-a-mole with invisible terminal colors. While tj may have been ultimately correct--and I had suspected as much--neither one of us did a great job of communicating about it (nor did we expend the effort to produce examples).

If you are having this problem: Reconfigure your terminal and/or scheme to ensure all valid ANSI colors are clearly displayed.
For iTerm users: You can still use "Solarized Dark", but increase the "minimum contrast" setting.
For anyone else: I don't know; if you have a workaround, please post it here.

[dschinkel]

All I know is for me, I was super frustrated after spent a lot of time trying to get mocha test colors fixed so that I could actually view it well in Solarized theme and it was impossible. I ended up having to make my console completely white in order to be able to run mocha tests and see them clearly. Most people do not run their tests in console, they do, but they usually have console embedded in an IDE like webstorm or other. I was able to try to tweak some things via the Webstorm IDE but still no luck, it's mocha...trust me. So download WebStorm and try running mocha tests through terminal inside Webstorm after you've applied Solarized to iTerm.

[boneskull]

Most people do not run their tests in console

Do you have data to support this?

I was able to try to tweak some things via the Webstorm IDE but still no luck

Mocha works fine for me in WebStorm terminal, using any color theme.

I understand you are frustrated, but I would prefer to leave this issue unlocked so people can post workarounds or proper terminal configurations.

[dschinkel]

So you're telling me most devs who use Sublime, Atom, Webstorm, etc. don't try using console embedded _inside_ them and are always toggling back and fourth between their IDE or Editor and Console windows? I doubt that, that would be so inefficient.

Sure I can come up with proof, let me do a short video soon that illustrates the inability to tweak mocha's default color scheme or at least the inability to tweak that programmatically via mocha's lib.

Per your comment to others

If you are having this problem: Reconfigure your terminal and/or scheme to ensure all valid ANSI colors are clearly displayed.

That's what in the past I spent 2 solid hours trying to do in Webstorm. Again I'll come with a video soon.

[dschinkel]

Besides my bitching :) (sorry, it was truly frustrating) What I'll also do is come up with a video showing a work-around, not really the colors I'd prefer, and you have to change the terminal background to white but that's what I had to do to get around the problem which might at least get people by for now...

[boneskull]

So you're telling me most devs who use Sublime, Atom, Webstorm, etc. don't try using console embedded inside them and are always toggling back and fourth between their IDE or Editor and Console

I use Atom and WebStorm embedded terminals in addition to iTerm (all regularly), and have never had this problem.

[boneskull]

inability to tweak mocha's default terrible color scheme.

You can't tweak its color scheme, but you _can_ adjust your terminal. :smile:

[jdmarshall]

I use Atom and WebStorm embedded terminals in addition to iTerm (all regularly), and have never had this problem.

It's a problem in the 'Darcula' theme, which almost everyone I observe using IntelliJ products seems to use now.

[dschinkel]

I see... I'll look at that thx @jdmarshall

[boneskull]

@dschinkel

Before:

After:

[dschinkel]

@boneskull pretty sure I have tried that but I'll check it out again to be sure.

[boneskull]

@jdmarshall thanks for the direction on that.

[boneskull]

also note above "ANSI: black" is actually white.

[dschinkel]

Yep that's the work around I talked about that I ended having to do a while back. That makes the background of your console white for the terminal inside Webstorm. I'm using a different theme, not dracula but I still had to do this. Here is mine, which I made more off-white. While I'm still annoyed that I can't get mocha to work with a black background, I guess whatever and I moved on. Still wish I could tweak the mocha color scheme so I could use it in a black background terminal in Webstorm.

[dschinkel]

I tried Dracula again, like you did tehre, and I still get the same problem I had originally, before my workaround which was to change the background of the terminal to white so I could at least read the dark grey text, the problem you see here that I still get with Dracula if I revert back to trying to use Dracula:

Look at the dark grey text in the terminal results. No matter what I do, I can't get that to change with Dracula for some reason.

Can you please show me running some tests in terminal in Your Webstorm so I can really see that it's truly working for you? Yes I'm asking for proof because then I can go back to look at mine and figure out what is different here between yours and mine if you're saying yours is working. I've already done what you stated a while back and it did not help the problem as you can see above which is why I resorted to just making the terminal background white for now to get around the issue in Webstorm...so that I can at least see that dark grey text now over a white background.

[boneskull]

Yep that's the work around I talked about. That makes the background of your console white for the terminal inside Webstorm.

There's is no need to make the background white, nor is that what my change in the screenshot did.

I'm trying to understand the problem you're seeing. If that "exception" text is too dark, make it lighter by increasing the brightness on the "dark gray":

If you're still having trouble, you may wish to consult the WebStorm documentation and/or contact someone at JetBrains.

[dschinkel]

Oh believe me I have consulted with them. Oh well...thanks for providing the info. If I find out the solution I'll post it on my side. Not sure why yours is working and mine is not but hopefully I'll pinpoint it.

BTW just for info, what webstorm version are you running?

[boneskull]

@dschinkel Put this file in your colors folder, then restart WebStorm.

On a mac, this is ~/Library/Prefernces/WebStorm<version>/colors/.

But that's about the extent of what I can do to support JetBrains' products. Again, this is not a Mocha-specific issue.

[dschinkel]

@boneskull yea I've tried that :). Thanks though.

[dschinkel]

Just FYI, Webstorm just came out with a new version that apparently has fixed the problem at least it did for me http://bit.ly/29vZhiQ

[jeffvandyke]

Just wanted to throw out there that I'm still bumping into this issue on gnome-terminal and xfce4-terminal, and I know this has a lot of talk, but as a new user of mocha, it's quite annoying :( It would be great if there was just a way to change, maybe via CLI, what color code gets used for secondary text output.

[r-tanner-f]

@jeffvandyke Are you using Solarized Dark? Much as I love the theme, it's simply broken. It uses Bright Black as the background color. Simple as that.

Take a look at the values section: http://ethanschoonover.com/solarized#the-values

And the usage guide: http://ethanschoonover.com/solarized/img/solarized-values-dark.png

If the background color was Black that might be forgivable, but I would never expect Bright Black to be the same as the background color. I've had this issue with other console applications and Solarized Dark as well. This isn't limited to Mocha at all.

[jeffvandyke]

Gotcha, that does make sense. My workaround was to set Bright Black to one of the lighter gray colors in my terminal, but I see how solarized dark doesn't fit perfectly for 16-color terminals. Thanks!

[tpict]

Many of the popular base16 themes are also affected by this.