Is there a way to apply multiple themes to an Atom editor session e.g per pane, per file etc?

Question

I want to apply multiple themes to an atom session.

The following is a screen print of the left panel using theme-humane-syntax and the right panel using theme-seti-syntax :

(see Note 2 below about how I was able to do this)

Some use cases I would like to see: I might like one window to have the humane syntax theme, and the other window to have seti. Or I might like to have the left split be a light theme and the right split a dark theme. Even better would be to assign one theme per file e.g. file-a one theme, file-b another, and have them retain this theme wherever they pop up (e.g. in another window, on the other side of the split etc)

This can be really useful for distinguishing between files when you have a lot of open files.

Emacs has had this capability for a long time via package color-theme-buffer-local. Is there something similar in Atom?

From a more technical angle, is there a way to apply a .css file manually to a tab via Developer Tools? After all, Atom is basically a modified Chromium web browser, and each tab under Chromium can have a different css, so this should be possible to do in Atom as well (?)

Note 1: Someone asked a similar question about a year ago -- how to theme by file type and the answer was you can't. I fear the answer to my more general question is still NO, and I will have to investigate writing my own package (Sorry, I only found this link after I opened my question).

Note 2: I have seen this working by mistake in Atom. There appears to be a bug in Atom whereby when you switch from one theme to the next, occasionally some of the tabs do not properly switch, and you have mixed themes. There appears to be no performance penalty at all as you switch between buffers. This is what I want to be able to do but in a controlled fashion.

Many Thanks.

Atom 1.7.2
Linux Mint 17.3

Answer 1

I really missed having this feature, so I (the original poster) reverse-engineered what was happening when I had the (accidental) mixed themes, and I wrote a package to duplicate it in a controlled fashion. It's called multi-theme-applicator and it allows you to customize the theme at the text-editor level. Going forward, I hope to be able to extend this basic functionality by also allowing higher levels of granularity such as by file, by file type, and by window.

I've been using it for about a week now, and it seems to be working well. It basically removes the global style node attached to the text editor in question, loads the .less files of the new theme, compiles it to generate css, and attaches a new style node with the aforementioned css to the active text editor. It doesn't work on all themes, but I'd say it works for about 95% of them.

I did investigate trying to solve the problem by updating the atom source code itself. Unfortunately, I'm just not familiar enough with the code base to tackle it from this angle. Maybe this package can serve as an intermediate form until such time someone is able to add the capability "officially". But based on my experince, most people are happy with monolithic themes -- the emacs package that allows for multiple themes, color-theme-buffer-local, seems to be pretty lightly used. So there may not be enough demand to make this an official feature.

Anyways, if anyone's interested in the package please try it out, and let me know via the git repo if you find any problems or issues.

Answer 2

I'm afraid the short answer is still no, however it is theoretically possible for a syntax theme to provide very different colour palettes for files with different grammars by using more specific CSS selectors.

Because CSS selectors are applied based upon the most specific selector taking precedence over a less specific selector two symbols in a different grammars can be styled separately:

.constant.numeric { color: red; }

Would apply to all numeric constants in any grammar, however:

.constant.numeric.coffee { color: blue; }

Would only apply to numeric constants in coffescript, i.e. the coffee grammar, further still:

.constant.numeric.coffee.my-extension { color: hotpink; }

Would only apply to a custom grammar that (presumably) extended CoffeeScript.

As far as I am aware there are no syntax themes out there that support the totality of styling you show in your screenshot. Certainly there are areas of your screenshot that are the province of the UI Theme rather than the Syntax Theme.