larsejaas

I ended up creating a small toggle on the admin bar and flipping some css-variables inside my own wordpress-plugin to handle this:
https://i.imgur.com/ldFAQlr.gif
. I still need to find a solution inside the editor (ran into a bug – so not really sure how to insert a more-menu/settings menu ? in the upper right corner of the editor) But the toggle is working fine when editing pages or posts.

I think this is actually might be related to a bug: https://github.com/WordPress/gutenberg/issues/54252
Looks like things will fails as soon as you import anything from ‘@wordpress/edit-post’.

This is my component:

import { PluginMoreMenuItem } from "@wordpress/edit-post";
import { useEffect } from "@wordpress/element";

import { registerPlugin } from "@wordpress/plugins";
import { PluginMoreMenuItem } from "@wordpress/edit-post";
import { useEffect } from "@wordpress/element";
import SunHigh from "./sun_high";

const prefersDarkMode =
  typeof window !== "undefined" &&
  window.matchMedia &&
  window.matchMedia( "(prefers-color-scheme: dark)" ).matches;

const body = typeof window !== "undefined" ? document.body : undefined;

const MenuDarkthemeToggle = () => {
  useEffect( () => {
    if ( body?.hasAttribute( "data-dark-mode" ) ) {
      return;
    }
    body &&
      body.setAttribute( "data-dark-mode", prefersDarkMode ? "true" : "false" );
  }, [] );

  const HandleToggleMode = () => {
    const darkMode = body?.getAttribute( "data-dark-mode" ) as
      | "true"
      | "false"
      | null;
    const themeMode = darkMode === "true" ? "dark" : "light";

    document.body.setAttribute(
      "data_darkmode",
      themeMode === "light" ? "dark" : "light"
    );
  };

  return (
    <PluginMoreMenuItem icon={ SunHigh } onClick={ HandleToggleMode }>
      Toggle light or dark mode
    </PluginMoreMenuItem>
  );
};

registerPlugin( "menu-dark-theme-toggle", {
  render: MenuDarkthemeToggle,
  icon: SunHigh,
} );

I have tried stripping all logic away inside the component and only render the basic <PluginMoreMenuItem> component – but I keep getting the error.

@erlendhm I think this is a great approach to just follow the users OS: I see that being implemented this way quite a bit!
Otherwise, the easiest way is probably to set a data-attribute on the body and update this when toggling a dark/light theme toggle.
I use data-dark-mode. I then implemented the CSS classes like this:

/* Set dark mode */
body[data-dark-mode="true"] {
? color-scheme: dark;
? color-scheme: dark only;
/* Add additional logic to toggle WordPress variables here */
}

/* Set light mode */
body[data-dark-mode="false"] {
? color-scheme: light;
? color-scheme: light only;
}

And thanks a lot for the kind words about my page – I should probably update this at some point. it’s been soooooo long since I have made any updates at all.

• This reply was modified 1 year, 2 months ago by larsejaas.
• This reply was modified 1 year, 2 months ago by larsejaas.

Hi @erlendhm
Thanks for joining the thread ??
My approach is similar to yours – flipping some CSS variables.
I am working on a way to do this in the pate Editor effectively. Right now my idea is to create a small menu for it using enqueue_block_editor_assets. However, not really there yet. It works fine when editing a page or post – but I really am unsure how to add this inside the page-editor? So still some unsolved issues here for me ??

Thanks again for taking the time to help @oandregal – I really appreciate it! I already have a full theme.json and some style-variations ready in the styles folder – was just a bit unsure of how to toggle themes.
I am working as a frontend developer – but using JavaScript/React and TypeScript: So PHP is new to me. But it is surprisingly close to JavaScript, so it is quite straightforward to pick ??
Will definitely start working on a custom method to get a dark theme toggle going for the block editor.

hi @oandregal Thanks a lot for taking the time to respond.

I already have created some style variations of the theme.

And even though this is a great feature to allow the webmaster or content creators to change themes it doesn’t really change much in terms of letting the page visitors change the theme – or maybe I am missing something here?

Right now I am looking for a way to create a simple dark-mode toggle to let page visitors change between the dark and light theme. My idea right now is just to point the palette-colors that should change to custom variables and then change the variables when toggling between the dark or light theme. But I really do not want to go that route if there already is a best practice to follow (I haven’t found any).

As I understand there really aren’t any public methods to access the other style-variations and make them accessible to the page users. Or have I missed something?

@moderator Yeah, that looks a bit auto-generated. I could have asked chat-GPT myself ??

Thanks again @iandunn – I added the code you proposed to my own custom plugin as I didn’t seem to be able to get it working in my theme. Not that it is super important. Thanks! This was exactly what I was after ??

@iandunn – will try your approach: Definitely wouldn’t have figured this one out myself – thanks ??
@bcworkz Thanks for clarifying: I probably have a callback or function that causes this ??