Overriding Background Colors in Dark Mode


I’m working on implementing dark mode on some sites using the @media (prefers-color-scheme: dark) method. I’ve run into an issue.

On many of my pages, I set a background color for a column stack to create some visual breaks between the content.

Can I set a different background color for a stack using CSS within the dark mode custom CSS?

Example site: https://manorindustries.com

If you find the ID of the stack in the inspector then you can target that. Or you could use the new custom class option if you are using S4.

e.g. the ID of your grey background is #stacks_in_631503_page1 so you could just set a different background colour for that.

A simpler way that works quite well I have found is to use a largely transparent colour (instead of a solid colour) as this same colour often works well across both modes.

Cool. The stack ID worked.

Honestly, I’m considering just rebuilding some of these sites in Source, but this is helpful, too!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.