Atomのスペースをはっきり見えるようにする

Settingsにある Show Invisibles にチェックを入れるだけで、半角スペースや改行が見えるようになるんですが、テーマによってはまだ薄かったりします。
なのでAtomのCSSをいじってちょっと濃くしてみたいと思います。

SettingsのThemesから your style sheet のリンクをクリックすると、styles.lessが開かれます。
そのstyles.lessの一番後ろにでもこんな感じで記述します。

styles.less

〜略〜

@invisible-color: rgba(197, 200, 198, 0.4);

atom-text-editor::shadow {

  .indent-guide {
    color: @invisible-color;
  }

  .invisible-character {
    color: @invisible-color;
  }

}

そうすると

が、こうなります。

ちなみにAtomのエディタのスタイルはShadow DOMで書かれているので、atom-text-editorに::shadow擬似要素をつけていないと変更されないのでご注意を。

あと、文字と文字の間の半角スペースはこれでは見えるようになりませんでした。残念。。。

参考リンク