In Source’s Dark Mode stack there is the option to Darken images in Dark Mode - this is darkening images in the images stacks - but not background images in the Container Plus stack. Is there a class to darken background images in dark mode too?
I don’t know of such a Class but that sounds like a good one to have.
In case you haven’t checked yet, these 2 links are useful to see the available classes:
https://knowledge.shakingthehabitual.com/article/63-utility-classes-addon
https://knowledge.shakingthehabitual.com/article/62-utility-classes-base
2 Likes
There is nothing in-built to support this. The Dark Mode stack does have a field to accept any custom css that you want applied in dark mode so if you can figure out the css to do so then it can be added there (i am away from my work computer today so can’t check what that would be).
The simpler option is just to apply an overlay colour in the Container Plus stack - this would apply to both dark and light modes but is often an appropriate thing to do anyway if you have text content over a background image. Even just a slight overlay might be enough to darken things down in dark mode and still look vibrant in light mode.
1 Like
@Jamie You would need something like this for each BG image:
@media (prefers-color-scheme: dark) {
.bg1-dark-scheme {background-image: linear-gradient(to right,rgba(1, 1, 1, 0.2),rgba(1, 1, 1, 0.2)),url(https://url.com/bg1image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center}
}
and add bg1-dark-scheme into the wrapper class box for any containers with BGs you want to darken by 0.2, 1 would be black and 0 would be no darken, i,.e. fully transparent.
Also, remove the BG image from each of these Container and set BG image to none.
Tip if you add a BG image and set an overlay, then you can grab this code using Inspector. If that statement makes no sense then ignore it.
1 Like
Awesome, thanks @Webdeersign . I’ll have a play with that CSS :)