My Atom.io setup with styles.less and init.coffee

So with the news of Atom.io going open source, I decided to start playing with it again. One thing I really wanted was to have a background image so that I could look at something pleasant.

Thankfully, the atom editor is practically a glorified web browser, so you can edit the stylesheet to do your bidding, so I was able to get my change in quite easily:

@sapporo_cycling_road: 'http://media-cache-ec0.pinimg.com/originals/39/8a/ff/398aff8e6dcea2befe58f09480857a4b.jpg';
@hokkaido_jingu_mae_doori: 'http://media-cache-ec0.pinimg.com/originals/53/0b/1d/530b1dddb1d525b34c36ea37e305b6b0.jpg';

// git commit styles
.editor .git-commit.line-too-long.deprecated {
  color: orange;
  text-decoration: none;
}
.editor .git-commit.line-too-long.illegal {
  color: #fff;
  background: #DA2C43;
  opacity: 0.9;
}

.pane:before {
  content: "";
  background: url(@hokkaido_jingu_mae_doori)
      no-repeat center center fixed;
  background-size: cover;
  opacity: 0.20;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

.editor:before {
  content: "";
  background: url(@sapporo_cycling_road)
      no-repeat center center fixed;
  background-size: cover;
  opacity: 0.20;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

.comment {
  color: yellow;
  opacity: .8;
}

.editor {
  .cursor {
    border-color: pink;
    border-width: 2px;
  }

  .selection .region {
    background-color: pink;
    opacity: .5
  }
}

Ta-da! That's it! (if you use the default Dark theme)

Unfortunately, there are a lot of things to be done for this to be very usable (like trying to make selection areas transparent), but hopefully this helps out someone (or better yet, draws someone to make fun of me and submit a better solution). In any case, I'll probably keep hacking at this over the coming weeks/months to make this much more sensible and usable.

Example screenshot here (photo of the Sapporo cycling road)

I updated the stylesheet to reflect some of the changes I wanted. Updated screenshot here

I also added a little bit to my init script so that I can handle tab length based on the file extension without having to have .editorconfig files floating around everywhere. Might add more to this later.

# init.coffee
path = require 'path'

atom.workspaceView.eachEditorView (editorView) ->
  editor = editorView.getEditor()
  filepath = editor.getPath()

  # set Tab Length for JS sources
  if path.extname(filepath) is '.js'
    editor.setTabLength(4)