Stylesheet customizations for certain themes only

#1

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 pkg.name 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?

Thanks!

#2

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.

#3

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 { ... }.

#4

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?

#5

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

#6

Thank you!