Get scope for theming?


Is there a key command to show the scope where the cursor is, for theming purposes?

As in Sublime there is an extension “scope hunter” and in Textmate there is keyboard command to show that the cursor is variable.parameter.function (for example).


You can open the Developer Tools (View > Developer > Toggle Developer Tools) then run the command “Editor: Log Cursor Scope” from the command palette. The list of scopes will show up in the Console.

You can also just inspect the DOM from inside the developer tools. Just click the inspect element button and then click any token in the editor.

How do I determine what CSS class to use to highlight a specific syntax?
How set a function color

Thanks. How does one force a reload of the theme’s less file, after making an edit? (short of quitting and relaunching the app)

I have opened Atom with atom --dev, edited an item and saved, but see no change in a sample HTML file I have open.


Not sure why the live reload isn’t working for you, but you can always do a manual reload via View > Reload, which on OS X is bound to ctrl-alt-cmd-L.


Yes, thanks, I found that on the theming docs page and that does indeed refresh.

It’s possible the auto refresh didn’t work on the second window, where I had a “sample” html file open for reference as I changed the colors in the main window.


Each window runs in its own process space, so yes, a second window possibly wouldn’t be affected by changes made in the first window.


BTW, You don’t need to open dev tools for the command to work.