Styling the body tag for dark mode is hard to figure out

I spent a little too much time trying to figure out how to change the background color of the site on dark mode. You’d normally do this by changing the background-color of the class assigned to the body element.

The first, naive thing to do was to add a dark-theme variant to the class assigned to the body of the page in the page’s settings (sitebody in my case) using the “Create Dark Theme Version” feature of the Class Manager. That doesn’t work because it creates a dark-theme .sitebody selector that only matches if site-body is inside of a dark-theme element, which isn’t true for body.

Since body gets assigned a dark-theme class ultimately the solution was to add a new style called dark-theme in the Style Manager and style it with my background color. I probably could have also added .dark-theme.sitebody (note the lack of in-between space) selector and that would have matched body on dark mode as well (CSS Selectors Reference).

I think blocs should make it more obvious how to style dark mode on the body tag. Perhaps it could automatically add the dark-theme style variations to the Class Manager whenever I type styles into the body style in Page Settings and show a tip under the text field "Dark theme variant: “.dark-theme.${mystyle}”. That’s just 1 idea, the problem is simply that it’s not clear how to style dark mode at the body level.