Selected text background color?

Configuration Frontend
1

Team,

Using the “Metro Orange” theme I wanted to change the “selected text” background color (below: marked with a yellow arrow)

image
image700×466 37.8 KB

This is the CSS responsible for the color:

.ͼ5 .cm-selectionBackground, .ͼ5 ::selection {
  background-color: rgba(var(--rgb-primary-color), 0.1);
}

After manually changing the 0.1 to 0.4 the selected lines are a lot more visible.

The question is: (how) can I change this in a theme file?

2

Better to ask in main card-mod theme. Check the 1st post - “fantastic” link - input select.
Oops, this is not an input select. Just a codemirror. Well, check source code in Frontend for codemirror, perhaps it mentions this variable.

3

Card-mod is probably a solution in 95% of the cases :slight_smile: Just realizing that the code-mirror stuff might be out-of-scope for what is configurable in HA.
Some searching in the codemirror source code did not get me there :frowning:

4

Have you checked a codemirror.ts file inside a Frontend source code?

5

Did find the reference “cm-selectionBackground” in the codemirror.ts file: link

In this code I found:

var(--code-editor-background-color

Which you can set in the theme - works great. (except that I’m only looking to modify the “selection” background color).
The other items found around line 56 do not seem to be relevant in my scenario.
(like --code-mirror-height and --code-mirror-max-height)

In the theme I added

  card-mod-root-yaml: &card-mod-root |
    .: |
      cm-selectionBackground ::selection  {
        background-color: pink !important;
      }

Pink? Because I would definitely notice :slight_smile: However, the result is still that it uses the old color with transparency 0.1.

My theme did have an error that could have caused a problem:

Metro OrangeDJ:
  <<: *common-card-mods
  card-mod-theme: "Metro Orange DJ"

Think the space between “Orange DJ” should not be there because it’s also not there 2 lines above. After fixing it the result is still the same: no background color change.