Displaying branch in background

Is there an atom plugin to display current Git branch in the background of an editor. I know it’s in the status bar and you can get ones to put it in the tree view and so on, but I have a habit of forgetting to look. So I need it “suspended” behind the text in large colourful letters. Bonus points for an optional prefix and suffix so it could say “Hey! You’re on master, dumbass!”


I took a shot at this. I don’t know how exactly you want that to look, so I didn’t add any elements to text editors. Instead I turn all the tab names red when you’re on master. This also only works after a file is modified and saved, because there’s no onDidChangeBranch in the atom api, just https://atom.io/docs/api/v1.34.0/GitRepository#instance-onDidChangeStatuses

In your init.coffee (or init.js, you’ll have to convert if so):

repos = []
  repos = atom.project.getRepositories()
catch error

repos.forEach (repo) ->
  repo.onDidChangeStatus (event) ->
    if repo.branch == 'refs/heads/master'
      atom.workspace.element.classList.add 'master'
      atom.workspace.element.classList.remove 'master'

In your styles.less:

atom-workspace.master .tab {
  color: red !important;

I hope this helps, even if its just a starting off point. You could alternatively set your text editors’ background color with:

atom-workspace.master atom-text-editor {
  background-color: #300;

Adding text requires either a lot more CSS experience than I have or adding elements using the JS

Wow, thanks for that! I’ll have to give it a try!

1 Like