Stylesheet customizations for certain themes only


In the init script, it seems it’s possible for code to be activated only if a certain package is activated, e.g.,

atom.packages.onDidActivatePackage (pkg) ->
  if is 'some-cool-package'
    console.log pkg

In my stylesheet, let’s say I want bold keywords

.syntax--keyword {
  font-weight: bold;

only if the apex theme is active. Is that possible?



The atom-workspace element (the main container) always has classes corresponding to the active theme, that always start with theme-. So a selector such as .theme-apex-syntax .syntax--keyword will apply only when Apex is active.


Thanks! That’s great to know. It seems the same strategy also works for, e.g.,

atom-text-editor .line.highlight-line {
  background: rgba(241, 243, 245, 0.7) !important;

which can just be wrapped inside a .theme-apex-syntax { ... }.


Where can you find out what classes of atom-workspace are accessible? What if I want custom settings only if a certain UI is activated?


Open the developer tools, look at the Elements tab, and look at the atom-workspace element.


Thank you!