Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)
  • I’ve landed on just having it automatic: My site becomes the same as the users OS, and they just have to deal with it. 😛

    Works, though!

    BTW, that light mode/dark mode button on your site is slick AF! 👌🏻

    Answering myself, as I found the problem!

    I had added the colours in root:, while the json did it’s thing in body!

    So, it works fine, at least for automatic detection, to do this in style.css:

    @media (prefers-color-scheme: dark) {
      body {
        --wp--preset--color--base: hsl(228, 31%, 15%);
      }
    }

    Did you find a good solution for this? I’m struggling with something similar.

    Here’s my process:

    • I want to override –wp–preset–color–base if prefers-color-scheme: dark.
    • I want this instead of creating a separate –wp–preset–color–base-dark-mode so I don’t have to change every block with css.
    • But if I do it in style.css, the style engine overrides it (even with !important).

    How are we supposed to do this? And I find it very, very weird that this isn’t built into Gutenberg in a simple way. Isn’t dark mode (automatic or otherwise) a pretty basic feature??

    IMO. it should be trivial to either create different palettes in theme.json, or something like creating a dark-mode.json style, and being able to swap styles based on prefers-color-scheme or a toggle…

    Edit 1: Is there perhaps at least a way to make sure style.css is loaded after theme.json (so it doesn’t get overridden)?

    Edit 2: Heck, even the “Additional CSS” directly in the editor (added in WordPress 6.2) gets overridden!

    • This reply was modified 2 years, 8 months ago by erlendhm. Reason: Added the question about loading order
    • This reply was modified 2 years, 8 months ago by erlendhm.
Viewing 3 replies - 1 through 3 (of 3 total)