Megz B
New Member
So the TL;DR of the problem I'm having is in the title. I've already confirmed that this problem is happening across browsers (Edge, Chrome, Firefox) and done enough Googling and testing to figure out for sure what's causing the problem and at least a few things that don't work.
For the sake of the technical aspects I am using WAMP linked to Firefox (it was linked to Chrome but I changed it while trying to sort out this issue),the latest Wordpress (6.7.1),Elementor Pro (3.25.4),and the Hello Elementor theme for building my site (I've made no core changes to it so it's not a child theme right now). I use dark mode wherever and whenever it's available - and have done for ages already. By this I mean it's my system setting, and I also make sure to change individual apps to dark mode (rather than just 'Use system default'). In Firefox I also use the Dark Reader plugin for those sites where the browser setting doesn't seem to work.
I say all this to show that I know for sure that this particular little problem wasn't happening until recently (recently means the last few months). And the problem is, as I said, that forced dark mode is inverting the colours of my website and making it look like ass. At first it was even doing this to the images (jpgs/pngs) all the time, but that seems to have changed to sometimes inverting the colours and sometimes not. Most of the time, as of right now, its only the background colour and text colour that inverts.
I've already figured out that the best solution would probably be for my sites default to be dark mode - so for it to tell browsers that its already in dark mode. I might also have to define set colours for dark and light mode. And maybe figure out a darker colour palette (I'm trying to avoid that, and I'll explain why further on).
I tried a few dark mode plugins, only free ones because I absolutely don't have the budget for even a very cheap paid plugin - but none offer the level of customisability that I need. Either the custom colour palettes are locked behind a paywall, or they don't seem to do anything with regards to the forced dark mode issue.
So first question is: How do I 'program' into my site the fact that it's already in dark mode? And do I put it in the HTML or the CSS? In the header? In the theme file?
And the next question is related to possibly having to 'hard code' the dark mode and light mode colours in a way that stops the damn browser from inverting/adjusting them. The problem here is that I'm using Elementor Pro, and I've got something like...16 custom colours (it sounds like a lot but its different opacities of 4 main colours). I've got buttons, backgrounds, text, borders, icons and other elements that all use these in different ways depending on the purpose of the page.
I don't want to accidentally miss defining the dark/light mode settings for some element and it ends up breaking, or accidentally overriding somewhere that I have customised the design/colours of an element. So I think the best solution is to define the variants based on the names of the colours in the Elementor palette (primary, secondary, text, custom1, etc)? If so, how and where do/can I do this?
If there's anything you need me to clarify, or any other info you need to help me out with this then please ask away. Please don't suggest a plugin unless its extensively customisable and completely free. I do have Elementor Pro though. And lastly, thanks in advance to anyone who takes the time to read through all this and takes a stab or two at a suggestion.
For the sake of the technical aspects I am using WAMP linked to Firefox (it was linked to Chrome but I changed it while trying to sort out this issue),the latest Wordpress (6.7.1),Elementor Pro (3.25.4),and the Hello Elementor theme for building my site (I've made no core changes to it so it's not a child theme right now). I use dark mode wherever and whenever it's available - and have done for ages already. By this I mean it's my system setting, and I also make sure to change individual apps to dark mode (rather than just 'Use system default'). In Firefox I also use the Dark Reader plugin for those sites where the browser setting doesn't seem to work.
I say all this to show that I know for sure that this particular little problem wasn't happening until recently (recently means the last few months). And the problem is, as I said, that forced dark mode is inverting the colours of my website and making it look like ass. At first it was even doing this to the images (jpgs/pngs) all the time, but that seems to have changed to sometimes inverting the colours and sometimes not. Most of the time, as of right now, its only the background colour and text colour that inverts.
I've already figured out that the best solution would probably be for my sites default to be dark mode - so for it to tell browsers that its already in dark mode. I might also have to define set colours for dark and light mode. And maybe figure out a darker colour palette (I'm trying to avoid that, and I'll explain why further on).
I tried a few dark mode plugins, only free ones because I absolutely don't have the budget for even a very cheap paid plugin - but none offer the level of customisability that I need. Either the custom colour palettes are locked behind a paywall, or they don't seem to do anything with regards to the forced dark mode issue.
So first question is: How do I 'program' into my site the fact that it's already in dark mode? And do I put it in the HTML or the CSS? In the header? In the theme file?
And the next question is related to possibly having to 'hard code' the dark mode and light mode colours in a way that stops the damn browser from inverting/adjusting them. The problem here is that I'm using Elementor Pro, and I've got something like...16 custom colours (it sounds like a lot but its different opacities of 4 main colours). I've got buttons, backgrounds, text, borders, icons and other elements that all use these in different ways depending on the purpose of the page.
I don't want to accidentally miss defining the dark/light mode settings for some element and it ends up breaking, or accidentally overriding somewhere that I have customised the design/colours of an element. So I think the best solution is to define the variants based on the names of the colours in the Elementor palette (primary, secondary, text, custom1, etc)? If so, how and where do/can I do this?
If there's anything you need me to clarify, or any other info you need to help me out with this then please ask away. Please don't suggest a plugin unless its extensively customisable and completely free. I do have Elementor Pro though. And lastly, thanks in advance to anyone who takes the time to read through all this and takes a stab or two at a suggestion.
Elementor Services
