[wp-trac] [WordPress Trac] #63468: Dark mode support for WordPress embeds

[WordPress Trac]

#63468: Dark mode support for WordPress embeds
-------------------------------------------------+-------------------------
 Reporter:  meszarosrob                          |       Owner:  (none)
     Type:  enhancement                          |      Status:  new
 Priority:  normal                               |   Milestone:  6.9
Component:  Embeds                               |     Version:  4.4
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch dev-feedback has-          |     Focuses:
  screenshots needs-design                       |
-------------------------------------------------+-------------------------

Comment (by meszarosrob):

 Taking the most straightforward approach and adding the CSS rules for dark
 mode to the existing `wp-embed-template.css` file would still keep it
 roughly around 12 KB unminified, adding about 36% to the original size.

 Here are some simulation for different cases:

 || User is using light mode.||User is using dark mode, but the WordPress
 embeds don't support it.||
 ||[[Image(https://core.trac.wordpress.org/raw-
 attachment/ticket/63468/63468-site-no-dark-mode-embeds-no-dark-
 mode.png)]]||[[Image(https://core.trac.wordpress.org/raw-
 attachment/ticket/63468/63468-site-dark-mode-embeds-no-dark-mode.png)]]||
 ||User is using dark mode; the main website doesn't support it, but the
 embeds do.||User is using dark mode, and both the website and the embeds
 support it.||
 ||[[Image(https://core.trac.wordpress.org/raw-
 attachment/ticket/63468/63468-site-no-dark-mode-embeds-dark-
 mode.png)]]||[[Image(https://core.trac.wordpress.org/raw-
 attachment/ticket/63468/63468-site-dark-mode-embeds-dark-mode.png)]]||

 There are opportunities to improve `wp-embed-template.css` by using CSS
 custom properties for easier theming. More ambitious changes could include
 replacing inline SVGs in the CSS with actual SVG files, removing the
 legacy `wp-embed-template-ie.css` file, and ensuring the embed meets
 accessibility color contrast standards. Hover, these improvements may be
 better addressed in separate tickets, as they are not directly related to
 dark mode support.

 The visual examples and the patch provided use colors from the WordPress
 Design System Figma library. This is a rough proposal, and final color
 choices should be made by the design team.

 ||[[Image(https://core.trac.wordpress.org/raw-
 attachment/ticket/63468/63468-embed-light-
 mode.png)]]||[[Image(https://core.trac.wordpress.org/raw-
 attachment/ticket/63468/63468-embed-dark-mode-proposal.png)]]||

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