Am I the only one with black-on-black syntax highlighting?

[zarino]

Mmmm, black on a charcoal background. Neat. I don't need to read those pesky variable and function names anyway.

Weirdly it all looks fine in Firefox.

Investigating closer, Chrome tells me the elements in question (div.ace_text-layer div.ace_line span.ace_identifier) have a text color of black, defined by some mysterious "user stylesheet".

I'm pretty sure I've never added such a line to my browser's custom stylesheet – is anyone else on Chrome experiencing the same behaviour? And does anyone know how I can interrogate this mysterious stylesheet?

[willcosgrove]

I've got the same problem, though I came across it just from trying to add the Ace editor on a site I was working on. I'm still working on a solution. I looked in my Chrome user agent, and it's blank. So I haven't figured out where this style rule is coming from. Probably an extension I installed. I'll keep looking.

[willcosgrove]

I had a chrome extension called Stylebot that was adding that rule. I disabled it, and it's working fine now. I added an issue https://github.com/ankit/stylebot/issues/286

[zarino]

A temporary fix for anyone else encountering this issue, if you don't want to disable Stylebot completely, is to manually edit the offending stylesheet inside the extension's source code, then disable and re-enable the extension (which makes Chrome read in your changes).

On my Mac, the CSS file was located here:

~/Library/Application Support/Google/Chrome/Default/Extensions/oiaejidbmkiecgbjeifoejpgmdaleoha/2.1_0/libs/ace/ace.css

You need to add #stylebot-container to the beginning of every style declaration in that file, like so:

#stylebot-container .ace_editor {
  position: absolute;
  overflow: hidden;
  font-size: 12px;
  font-family: Menlo, Monaco, "Courier New", monospace;
}

#stylebot-container .ace_scroller {
  position: absolute;
  overflow-x: scroll;
  overflow-y: hidden;
}

...

The added ID selector overpowers styles brought in from 2.1_0/editor/css/widget.css, so you'll also need to edit line 478 of that file, to make the #stylebot-page-editor selector more specific, like so:

#stylebot-container #stylebot-page-editor {
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 302px !important;
}

It's not ideal, and I'm sure there are other CSS bugs that'll be introduced by the shifting specificities, but in my eyes it's worth it to have a working Stylebot install and a working code editor.

Perhaps I, or somebody else, might submit a pull request to the Stylebot repository, sandboxing all of their CSS styles.

[ankit]

This is a Stylebot bug, and I will get in a fix in the next release. You can keep track of the issue here: https://github.com/ankit/stylebot/issues/286

Thanks @zarino for reporting this and a potential fix (which I might end up using)!

[frabcus]

Fixed in stylebot