WordPress.org
Get WordPress

Make WordPress Core

Changes between Initial Version and Version 28 of Ticket #51927


Ignore:
Timestamp:
03/08/2021 07:28:07 PM (4 years ago)
Author:
desrosj
Comment:

Legend:

Unmodified
Added
Removed
Modified

  • Ticket #51927

    • Property Status changed from new to closed
    • Property Focuses css added
    • Property Summary changed from Twenty Twenty One: Theme color palettes lose contrast consistency in dark-mode. to Twenty Twenty-One: Buttons lose contrast consistency in Dark Mode
    • Property Owner set to SergeyBiryukov
    • Property Milestone changed from Awaiting Review to 5.7
    • Property Keywords has-patch added; needs-patch removed
    • Property Resolution changed from to fixed

  • Ticket #51927 – Description

    initial v28  
    1 While digging into another issue I discovered a possible flaw that suggests we may need to change the theme’s default palette colors when dark-mode is turned on. The color system in TT1 gets confused in dark-mode when it tries to deal with pastel background-colors and nested blocks that need special contrast to retain a11y.
     1While digging into another issue I discovered a possible flaw that suggests we may need to change the theme’s default palette colors when Dark Mode is turned on. The color system in TT1 gets confused in Dark Mode when it tries to deal with pastel background-colors and nested blocks that need special contrast to retain a11y.
    22
    33This CodePen lays out whats happening and some options for how to correct it:
    … …  
    10102) Nest a paragraph block and a button block inside of that group.
    11113) Publish.
    12 4) Set the theme to dark mode and visit the frontend.
     124) Set the theme to Dark Mode and visit the frontend.
    1313
    1414See screenshots to se expected and actual results.
    … …  
    1616I have two possible suggestions to solve this.
    1717
    18 **Solution 1: Reverse the brightness for palette colors in dark-mode.**
     18**Solution 1: Reverse the brightness for palette colors in Dark Mode.**
    1919
    20 This requires adding the theme’s pastel and dark color variables to our `style-dark-mode.css` and including some new dark-mode specific pastel colors that are effectively reversed. the downside here is that if we change the theme’s palette colors, we might also might need to update the palette colors in the customizer and the block editor which is especially difficult and quite a big change.
     20This requires adding the theme’s pastel and dark color variables to our `style-dark-mode.css` and including some new Dark Mode specific pastel colors that are effectively reversed. the downside here is that if we change the theme’s palette colors, we might also might need to update the palette colors in the customizer and the block editor which is especially difficult and quite a big change.
    2121
    22 **Solution 2: Revise our utility classes to account for the dark-mode class.
     22**Solution 2: Revise our utility classes to account for the Dark Mode class.
    2323
    24 This would require us to revisit the `color-palette.scss` utility classes and include a new rule for dark-mode to make the text appear the right color.
     24This would require us to revisit the `color-palette.scss` utility classes and include a new rule for Dark Mode to make the text appear the right color.
    2525
    2626Example:
    … …  
    3232
    3333.is-darkmode .has-black-background-color[class]:not(.has-text-color) {
    34         color: var(--global--color-dark-gray); /* Make text dark when in dark mode */
     34        color: var(--global--color-dark-gray); /* Make text dark when in Dark Mode */
    3535}
    3636}}}