[wp-trac] [WordPress Trac] #53429: Twenty Twenty-One: Dark mode in the new Widgets makes impossible to read

Fri Jun 25 00:53:32 UTC 2021

#53429: Twenty Twenty-One: Dark mode in the new Widgets makes impossible to read
-----------------------------+---------------------
 Reporter:  oglekler         |       Owner:  (none)
     Type:  defect (bug)     |      Status:  closed
 Priority:  normal           |   Milestone:  5.8
Component:  Bundled Theme    |     Version:  trunk
 Severity:  normal           |  Resolution:  fixed
 Keywords:  has-screenshots  |     Focuses:
-----------------------------+---------------------

Comment (by isabel_brison):

 This is a thorny one. All the correct stylesheets are being loaded, but
 the legacy widget preview is missing a conditional classname on its
 `<html>` element that TT1 styles depend on to override the custom
 background colour set by the customizer. The missing classname is
 `'respect_user_color_preference'` and it's added to the theme header
 template: https://github.com/WordPress/wordpress-develop/blob/master/src
 /wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-
 mode.php#L239

 Because the widget preview doesn't render a whole page but only the single
 widget, we're missing that crucial bit of markup to hook the styles to.

 Not sure what's the best way forward here. If we had a Core API defining
 classnames for themes to provide dark mode support we could fix this
 globally, but as it is each theme provides its own. I'm reluctant to
 hardcode background and text colors in the preview as that kind of defeats
 the purpose of having a preview at all :\

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/53429#comment:16>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform