Override `.selection .region` background in style.less?


#1

I’m using the One Dark UI and Syntax theme. I’m trying to change the selection color. In my style.less I have the following:

atom-text-editor, :host {
  .selection .region {
    background-color: yellow;
  }
}

This doesn’t work. Is it possible to override this in style.less? I’d prefer not to fork the theme.


#2

In your styles.less, for stuff inside the editor window (including the gutter, selections, markers and such) you have to use the atom-text-editor::shadow selector:

atom-text-editor::shadow {
  .selection .region {
    background-color: yellow;
  }
}

#3

It seems I can still do above in a package’s .atom-text-editor.less. like so:

.theme-atom-material-ui {
    // .jumpy {                       // won't work
    // atom-text-editor .jumpy {      // won't work
    atom-text-editor::shadow .jumpy { // works
        &.label {
            //stuff
        }
    }
}

This still uses ::shadow. I know Chromium will be removing support for this. Without doing .shadowRoot in code is there a simple way? Do we have support for styles per theme?

People love this theme so they have been asking for this fix. I checked it out, and it is really cool :smile:


#4

You should be able to just do this inside the foo.atom-text-editor.less:

.jumpy.label {
  // stuff
}

It will get loaded inside the shadow root because of the atom-text-editor specifier in the file name. You could write some code so that it gets conditionally loaded depending on the theme. That’s what I did for my white-cursor package.