Jose Sotelo

@yas-se

Because of how the plugin works this isn’t possible.

Hello @sageman31

Just released 2.0.0 in which you can hide the toggle widget and even use the class darkmode-enable to create your own!

Hello @crustystainedtowel

The plugin works by creating a layer of white background then using mix-blend-mode: difference to create the dark mode effect, we don’t actually change any colours.

So what you can do in this case is using jQuery to change your dark colours to white ONLY when dark mode is active.

To do this you could do something like:

function darkmodeChangeDarkColours(){
    $('.darkmode-toggle').click(
        function() {
            if ($('body').hasClass('darkmode--activated')) {
                
             YOUR CODE TO CHANGE DARK TO WHITE

            }
            else{
               REVERT CHANGES
            }
        }
    );
}

Something like that should do the trick!

Cheers!

That’s weird, I’ve tested in the latest version and I haven’t experienced any issues.

I just deployed version 2.0.0 if you can try it out that would be geat!

Hey @ashcora

You could try by adding a z-index of 600 to the whole section so it stays over the darkmode overlay.

Hope this helps.

Hello @mwaters

Just released 2.0.0 in which you can add the class “darkmode-enable” to any element to create your own toggle.

So now you can an icon or menu text to your header and use that to enable/disable the dark mode.

Hope this helps!

Hello @pop_0098

Just deployed a new version, can you try it out and see if by chance it solved your issue?

Cheers!

Hello @ishubhammishra

Can you check the new version? just deployed 2.0.0

Hello @darkbee

Glad to hear that!

This happens because of the CSS used to create the dark-mode effect.

You can solve this with some jQuery, just trigger a function when dark mode is activated (we add a class to the body tag when it’s active) and change the colour of the accents to something that looks as you want when active.

The plugin uses the effect Difference, so you can’t just use the specific colour, you will need to look for the one that looks OK with that effect and a black background.

Hope this helps!

Hello!

It must be a cache thing, check your server cache or maybe a cache plugin and purge it all.

Yes! it works like that. It’s a Elementor Forms thing, not specific of this plugin

Hello @mwaters

I think that if you place 0 in the bottom field it will place the widget on top.

Could you try that out and let me know if it works?

Cheers!

Hello @appleguideweb

You need to add .darkmode-ignore to the or the <div> containing the image.

Also, you could try increasing the z-index to over 1000 to exclude it.

This all depends on your theme, page builder, etc so I can’t give you a specific answer for you, but you can try out and I’m sure that you will find a way.

Cheers!

Hello! @sageman31

Those aren’t bugs:

1. If the widget shows inverted colours you need to add .darkmode-ignore to their container or just z-index them out of the scope of the widget.
2. If they are loaded with AJAX there’s nothing that the plugin can do as it can’t add the .darkmode-ignore class to them.

The plugin is just a vanilla JavaScript script so it has its limitations.

Regarding the must-haves:

1. You can’t just select a colour as the widget uses Difference to create the dark mode effect, it doesn’t change any colour to black or white, it’s a CSS effect not a change in specific colours.

2. This should be easy to do, and it’s in my plans but been having trouble finding time to pull it off.
3. Same as above.

Regarding the CSS, there’s no CSS as we don’t change any styles.

Hello @tmgreen

Sure, you can send it over to [email protected] ??

Thank you!