Favorite Atom CSS tricks?


So I was rewriting my styles.less for the hojillionth time and I decided to break it out into little components that did certain things to better document everything. (So I can figure it out faster the hojillion and first time I rewrite my styles.less :laughing:) But now that it is all broken down into little tricks and tweaks, I thought it would be cool for everyone to share their favorite tweaks for Atom’s UI.

Here’s mine. It highlights the trailing whitespace except on the line where the cursor is:

// Highlights trailing whitespace except on the cursor line

.editor, atom-text-editor::shadow {
  div.line:not(.cursor-line) {
    .trailing-whitespace {
      background-color: @background-color-error;
      color: contrast(@background-color-error);


This a little unique, but might be helpful to someone. I have two monitors and like to have two panes open. Then I put Atom in the middle so that one pane is on the left monitor and one pane is on the right. One problem with this is that the command modal opens in the center and gets cut in half. Here is some css that will pull it to the left so it shows completely on one monitor.

.overlay {
  &.from-top {
    margin-left: -500px;