How to set darkmode with WP Night Mode plugin?

I can of course just change the colors via css… but maybe there’s a better way

• This reply was modified 4 years ago by snippet24.

Hi @snippet24,

Sorry for the slow reply, I’ve just had the power come back on in Cairns after tropical cyclone Niran came through.

The dark theme of material design just works by adding a class to your form’s parent element. So to get it to work with your dark theme toggle button, just toggle that class when the theme changes. You can use JavaScript like this, just make sure to update the selector for the dark theme switch if necessary.

jQuery('.wp-night-mode').click(function() {
  jQuery('.cf7md-form').each(function() {
    jQuery(this).toggleClass('cf7md-theme--dark');
  });
});

Thanks,
Angus

Hi Angus,
No problem ??
That should work but I forgot to add: WP Night Mode seems to use a cookie for saving the dark mode, so that if I load another page it keeps the preference i.e dark mode. Perhaps I should actually ask WP N.M. plugin Dev. on this regard.
Have a nice week!

Hi @snippet24

In that case, you’ll need to figure out how to read the cookie (or get the current dark theme state from somewhere) in JavaScript and toggle the class on your forms accordingly ??

Thanks,
Angus