Change background color with a keybinding


#1

I use Atom to show code when I give talks or teach, and one thing I’ve always wanted to do is change the background color of each of my open editor tabs to different colors. So, for example, if I’m bouncing back and forth between the code in three different files, it is immediately clear to everyone in the audience that I’m looking at the ‘red’ file, now the ‘blue’ file, etc. Ideally, if I could do this with a keybinding (ctrl+alt+r for red, ctrl+alt+g for green, etc), then I could change it on the fly in a talk, and I think that would greatly help people follow along. Is this possible? Is it even possible to create a package that could do this? I’m a bit of an Atom newbie but I would love to dive into making a package for this if needed.


#2

I don’t know if a keybinding is possible without a new package, but you can definitely change the background color based on the individual file.

atom-pane[data-active-item-name="example.txt"] .editor::shadow div {
  background-color: #4b712c;
}

As long as you know what files you want to display at the beginning of the talk, you can set up your colors appropriately. This is also what any new package should target, automating the setting of the filename. atom-pane[data-active-item-path] could also be used.


#3

Cool, I’ll look into this. Thanks!


#4

What’s possible with package is almost possible just within Atom…

  1. Open your keymap.cson file and add the following code:
'atom-workspace':
  'ctrl-alt-x': 'my-package:my-command'
  1. Open your init.coffee and add the following code:
atom.commands.add 'atom-workspace', 'my-package:my-command', ->
  atom.views.getView(atom.workspace).classList.toggle('my-package-class')
  1. Open your styles.less file and add the following code:
.my-package-class atom-text-editor {
    background-color: rgb(250, 173, 119) !important;
}

Restart Atom for the changes to take affect.

Adjust shortcut, variables and styles to your needs.