How to add .character-match to .list-group in themes?


#1

In version 0.199, it was added the .character-match class to Fuzzy Finder and Command Palette. With this, the matching characters are highlighted. Right after that I added this to my styles.less, so I added some color to it (instead of just bold):

.fuzzy-finder .list-group .character-match {
  color: @text-color-info;
}
.command-palette .list-group .character-match {
  color: @text-color-info;
}
.symbols-view .list-group .character-match {
  color: @text-color-info;
}

But now, I’m trying to create a new UI-Theme, based on my customizations, and noted that in fact, this .character-match class is not basic. At least, forking Atom-Dark-UI didn’t gave me one.

I tried to add this (and some variations) to my lists.less file, but it has no effect:

.list-group {
  .character-match {
    color: @text-color-info;
}

I’m new to CSS/LESS, so I’m sorry if this is a dumb question, but is there a way define .character-match in my theme, so the packages that today defined their own, passes to inherit from mine?

Thanks


#2

When I looked up the style for .character-match in the command palette, the selector that’s used to set color: @text-color-highlight; font-weight: bold; is .command-palette .list-group .character-match. The reason your style isn’t overriding the color is because the selector you use (.list-group .character-match) has a lower specificity than the one that’s used in the command palette. You can find an explanation of specificity in chapter 3 of Taming CSS (though I would recommend you read the other chapters as well). It basically boils down to selectors using more class names override the styles of selectors with less class names. .command-palette .list-group .character-match has 3 class names, whereas .list-group .character-match only uses 2 class names. One possible way to fix this is to use the following:

.fuzzy-finder,
.command-palette,
.symbols-view {
  .list-group .character-match {
    color: @text-color-info;
  }
}

#3

Thanks for the explanation, and pointing out these references. I surely will look deep at it to better understand and use CSS, not only in Atom. I had suspected that behavior, but was thinking if it would exist a workaround/feature that would work :smile: .

I tested your code and it worked perfectly, as usual :wink:, but then I remembered something that I didn’t understand on defining the theme. At first, I thought that a theme should only define basic elements, like buttons, text, colors, scroll, list, etc. But there are also things that only exists in packages, like tree-view and tab.

I understand that these are core packages, but are not core pieces, because, I can disable it or replace it. That’s why I was thinking that in fact, .character-match should be added to list-group and so, fuzzy-finder, command-palette and .symbol-view should only use it, and define its own color (if needed).

Thanks