How to customize/hack a syntax theme/grammar?



I really liked One Dark theme, but since I use a lot of Markdown files, I noted that it doesn’t have a defined highlight for code. So in my files, it appears as normal text (no courier / background / border area).

I changed my Stylesheet (styles.less) with the code below, and it worked, but is it the proper way to do this?

atom-text-editor::shadow {
  .gfm {
    .raw {
      color: #66D9EF;

I used Monokai as base for my research, but changed it a bit. In Monokai the first line was atom-text-editor, :host, but it didn’t work. Changing it to ::shadow worked.

Thanks in advance


Yes, this is the proper way to do this. Basic customization can be done by using the “Open Your …” series of menu items, more complex customization can be done by creating your own package or theme. But really, it’s your personal preference where you want to put how much or what types of customization. You can get quite a lot done just using the base customization files.


The only disadvantage with this is that it won’t look right anymore after changing the theme.


Atom adds a class to the atom-workspace with the name of the theme. You can put your customizations to a specific theme inside a block with that class:

.theme-one-dark-ui {
  // customization specific to one-dark-ui theme


Another idea is: Instead of specifying the color directly, use one of the variables like @syntax-selection-color. If only I remembered where to find a list of these variables…


I actually use a combination of both. You can look at the default theme’s ui-variables and syntax-variables for a list of variables you can use.


Apologies for resurrecting an old thread but I’ve just come across this while looking to do the same thing. However, since the removal of the shadow DOM (?) I know that the names of the syntax variables changed. These seems to have also happened to the theme name classes. Do you know what the new pattern is? I’ve tried, e.g. “.syntax–theme-one-dark-ui” but that didn’t work.



It should still be .theme-one-dark-ui.


OK, that’s what I assumed but if I wrap my customizations in styles.less:

atom-text-editor {
    .theme-one-dark-ui {
         // customizations here 

then they don’t get applied. And yes, I am using the One Dark UI theme! But I’m also using Atom Dark syntax and using .theme-atom-dark-syntax doesn’t work either.


The theme classes are on the atom-workspace element, so it’s the other way around.

.theme-one-dark-ui {
    atom-text-editor {
         // customizations here 

You can look at the source code using ctrl-shift-i.


Aha! Thank you!

And also thanks for the source code tip, which I use a lot in other work but never connected to Atom for some reason (despite knowing about it’s pedigree)… how odd!