Can I apply CSS to elements in theme-dark mode only?

Setup, Configuration and Use Items & Sitemaps
,
1

Hi all,

I’m running OH3.3 in RPi4 and this is actually a simple question, which I do not know if it will have a simple answer (I hope so).

I am trying to apply CSS to a image element inside a page and on the main config I am setting this:

stylesheet: |
    .theme-dark img.oh-image {
      -webkit-filter: invert(100%)
      filter: invert(100%)
    }

Problem is, this does not work because whenever CSS is inserted into the page, it has automatically the “scoped-******” in a div in the middle and therefore we cannot properly target the CSS:

<style id="scoped-a954ec1911">
.scoped-a954ec1911 .theme-dark img.oh-image {
  -webkit-filter: invert(100%)
  filter: invert(100%)
}
</style>

And HTML is created like so:
image

Therefore, it will never work this way. Is there another way to make this work?

Thanks! :slight_smile:

PS: I just started working with fixed grid layouts and am using animated SVGs, this is AMAZING to create tablet screens that look fancy and with some cool animated things in there. I might just create a video showing it when I finish (it will take time though, I’m doing this during my very little free time).

2

The widget expressions have a themeOptions object, which among other things has a dark key with values of either 'light' or 'dark'. You can use this to set a css variable somewhere above the level of your image and then use the variable in the image’s style.

Here’s an demo:

uid: dark_demo
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Oct 21, 2024, 5:23:37 PM
component: div
config:
  style:
    --my-border-color: =(themeOptions.dark == 'dark')?('red'):('')
slots:
  default:
    - component: oh-card
      config:
        title: =`The current theme is ${themeOptions.dark}`
        style:
          border: 2px var(--my-border-color, blue) solid

Light theme:
image

Dark theme:
image

1 Like
3

I appreciate your answer. I did tried that but it does not seem to work. It shows the code instead of interpreting it.

4

If you tried it in a stylesheet property then it will not work directly. The stylesheet text is used as is and not parsed by the expression parser. This is why I gave an example that sets a css variable in a style object which does get parsed. Then you can use the variable name in the stylesheet.

If you put the expression in a style object and it still didn’t work, then you are going to have to post what you did here so I can see what went wrong.