Shadow dom target UI from styles.less?


#1

The theme I am using has an unreadable color. Until it’s fixed, I was going to add a rule to my app’s styles.less to override the element color until the author updates it.

I inspected the element, but I seem to not understand how to target it:

It seems to be

atom-pane-container .path-details .path-name.bright {
   color: yellow;
}

But I must be wrong, since nothing changes. I realize to target the editor, I would use something like
atom-text-editor::shadow .html.basic.text { color: #ccc; } from the styles.less

But what about targeting something not in the editor, but a pane, which is what I assume this is?


#2

Might simply be a specificity issue here? The selector you’re looking for isn’t in the shadow dom:
.list-tree li.list-nested-item > .list-item.path-details.

I’ll try not to take too long to fix this for you, got a ‘big’ update in the works so it might take another day or two for a release.


#3

Sweet. I can wait, then!


#4

Also, always check the original rule that apply to an element, if the original rule specificity is higher than the one you try to override you’ll be forced to use !important to workaround the specificity order.