[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 sabernhardt):

 Themes and sites might benefit from a standard dark mode if it is added
 with a new filter, `add_theme_support()`, or a separately enqueued (but
 inline) stylesheet. I do not think dark-mode colors belong in the same
 stylesheet as the rest of the embed styles because they would not fit well
 with **all** sites.

 Using the `prefers-color-scheme: dark` media query could work if the theme
 sets a dark mode exactly the same way. However, themes can
 - show dark text against a light background for everyone (no dark mode
 support)
 - assign light text against a dark background for everyone, automatically
 - add a `theme.json` style variation that includes light text and a dark
 background, such as Twenty Twenty-Five's Evening and Twilight styles
 - add a Customizer option to choose a dark version of a classic theme
 (Twenty Eleven and Twenty Seventeen)
 - allow site administrators to define their own light text and dark
 background colors in Customizer (including Twenty Twenty)
 - add a button for visitors to activate **and** deactivate the theme's
 dark mode (Twenty Twenty-One)

 Regarding the patch:
 - Elements in the share dialog—including `dashicons-no`—are already light
 against a dark background, so this would not need to define new colors
 there.
 - [50025] assigned colors from the [https://codepen.io/ryelle/full/WNGVEjw
 admin color palette], and a dark mode could use the same palette.
 - The `box-shadow` is unchanged (and would not need to be added again in
 the dark mode styles).

 For the Twenty Twenty-One screenshots, I used:
 - `#a7aaad` for Comments and Share SVG icons in the footer
 - `#dcdcde` when hovering over the icons
 - a few additional rulesets:
   {{{
         .wp-embed {
                 background: #101517;
                 border-color: #000;
                 color: #c3c4c7;
         }
         .wp-embed-heading a,
         .wp-embed .wp-embed-more,
         .wp-embed a {
                 color: #a7aaad;
         }
         .wp-embed-meta a:hover {
                 color: #dcdcde;
         }
         .wp-embed-site-icon[src*="/wp-includes/images/w-logo-blue.png"] {
                 background: #fff;
                 border-radius: 50%;
         }
    }}}

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