How to disable changes made by a browser's dark mode setting?

I have recently discovered during some testing of my website’s design that if a browser’s dark mode is activated, certain site elements are inverted and it ruins the interface design. I am not sure if this is possible, but is there a way to get Shapely to ignore a browser’s color scheme preference so that it displays the site elements consistently across all browsers?

I attempted to look in the theme’s native style.css sheet, but I didn’t see any code related to ‘@media (prefers-color-scheme: dark) {}’ settings. I was wondering if there was something I was missing, or if I will have to copy all my custom code into this bracket manually in my own custom css sheet to work around this issue.

Hi there

Well, our theme is not yet compatible to dark mode, so, we dont have such styles in the theme, can I take a look? please provide url and screenshot of the element

Sorry for the misunderstanding. It turns out that the person that reported the issue was using an experimental setting on his browser to ‘force’ dark mode on all websites, regardless of their respective code. Disregard this topic, as it is not actually an issue with Shapely. Thanks

Hi @Jack_Wallace

Thanks for clarifying this :slight_smile: