Adjust Images in Dark Mode

Question

Adjust Images in Dark Mode

Closed this issue 3 years ago · 6 comments

We could add an additional CSS class for images such as auto. When used, this class would automatically try to adjust the image's content via the following CSS declaration:

body.dark img.auto {
  filter: invert()hue-rotate(180deg);
}

Answer 1 · 2022-02-05T10:03:24.000Z

where do we have to add this code ? are you going to raise pr for it?

Answer 2 · 2022-02-05T10:11:57.000Z

I think the best spot would be the dark stylesheet:

https://github.com/smapiot/pidoc/blob/main/packages/core/src/styles/_dark.scss

Answer 3 · 2022-02-05T10:16:32.000Z

@FlorianRappl do we have to add the above code you provided or we have to write some more ? Because this issue seems more simpler since you provided the code as well?

Answer 4 · 2022-02-05T10:48:53.000Z

I think this should be mostly it. What would be good is if an image using this class would be added to the example app / docs. But it's not necessary.

Answer 5 · 2022-02-05T10:57:56.000Z

@FlorianRappl please review the PR, thank you

Answer 6 · 2022-02-05T13:38:04.000Z

Landed in develop - thanks!