Atom.io Highlighting the Search Results in a Dark Theme

TL;DR
add the css into your ~/.atom/style.less which you can open from Atom -> Open Your Stylesheet.

Yesterday following the fix of many major issues I had with Atom where one of the major ones being the save state issue which I missed so much from Sublime and this was a deal breaker for me. Up until tomorrow when I realized it has been finally implemented in Atom.

I completely switched to Atom now. So long sublime… Or so I hope :)

I have realized that the search highlighting in the dark themes (I use Dark Monokay pretty much everywhere) and I used a custom Monokai theme in Atom that I changed a little to match better the Sublime Text Monokai theme I have been using for a while.

Anyhow. I realized that there is no search highlighting for me going on. Ok, so I thought maybe it’s me and tried some other dark themes. Nada yada…

Fortunately it’s a pretty easy fix via the custom styles that will apply to any theme you load:

atom-text-editor::shadow .highlight.find-result .region {
  background: red;
}


atom-text-editor::shadow .highlight.current-result .region,
atom-text-editor::shadow .highlight.current-result ~ .highlight.selection .region {
  background: red; // the active search highlight - to distinguish from the other results
  border-color: yellow;
}

After playing a little with various options I decided to settle on these. You can of course change the background and the border to your liking.

The red used here is the default one and is rgb(255, 0, 0).

UPD (2015-11-01) As of October 2015, the colors are broken with the updated Atom. I still did not have the chance to fix it.

UPD (2015-12-10) I got some time to have a quick fix for the search highlight issue