How to handle dark mode-specific styling in back-end?

Feature Requests
1

I’m working on adding dark mode to my site, and some elements require manual tweaking.

My thought was to approach this by adding a relative selector such as:

CleanShot 2023-11-09 at 17.26.45@2x
CleanShot 2023-11-09 at 17.26.45@2x988×364 21.5 KB

This works great on the front-end, but doesn’t show the styling on the back-end.

That’s because the dark mode selector (.dark) is applied to the <html> element, but the CSS generated inside the editor is:

.editor-styles-wrapper .dark .my-section

.editor-styles-wrapper is of course applied to the body tag, so this selector won’t work.

Any ideas on how we could apply styling using the dark mode selector on the back-end?

1 Like
2

Hi @sunny,

Thank you for bringing this to our attention!

Indeed, this is a current limitation that we plan to address as soon as possible.
Rest assured, I’ll forward this to @Louis to ensure the best possible solution.

I’ll also move this to planned Feature Requests to keep a better track of it.

Thank you for your understanding.

2 Likes
3

Thanks @Araminta :slight_smile: Looking forward to it!

2 Likes
4

Necessary to complete the dark mode workflow/experience inside the builder.
If I remember correctly, there is no workaround for this either.

Just wanted to bring it quickly to attention again.

5

Hello @Marius,

Thank you for bringing this up again.
Definitely needs special attention.

Has been added to my to-do.

1 Like