Merge pull request #885 from WordPress/try/white-background-luminance

Try: Use luminance of color to check for "white" background
WordPress · Nov 25, 2020 · 3b9cc7e · 3b9cc7e
2 parents 488f3cd + 73286c5
commit 3b9cc7e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/assets/js/customize-preview.js b/assets/js/customize-preview.js
@@ -15,17 +15,21 @@
 			if ( isDark ) {
 				document.body.classList.add( 'is-dark-theme' );
 				document.documentElement.classList.add( 'is-dark-theme' );
+				document.body.classList.remove( 'is-light-theme' );
+				document.documentElement.classList.remove( 'is-light-theme' );
 				document.documentElement.classList.remove( 'respect-color-scheme-preference' );
 			} else {
 				document.body.classList.remove( 'is-dark-theme' );
 				document.documentElement.classList.remove( 'is-dark-theme' );
+				document.body.classList.add( 'is-light-theme' );
+				document.documentElement.classList.add( 'is-light-theme' );
 				if ( wp.customize( 'respect_user_color_preference' ).get() ) {
 					document.documentElement.classList.add( 'respect-color-scheme-preference' );
 				}
 			}
 
 			// Toggle the white background class.
-			if ( '#ffffff' === to.toLowerCase() ) {
+			if ( 225 <= lum ) {
 				document.body.classList.add( 'has-background-white' );
 			} else {
 				document.body.classList.remove( 'has-background-white' );

diff --git a/classes/class-twenty-twenty-one-custom-colors.php b/classes/class-twenty-twenty-one-custom-colors.php
@@ -168,13 +168,15 @@ public static function get_relative_luminance_from_hex( $hex ) {
 	 */
 	public function body_class( $classes ) {
 		$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
-		if ( 127 > self::get_relative_luminance_from_hex( $background_color ) ) {
+		$luminance        = self::get_relative_luminance_from_hex( $background_color );
+
+		if ( 127 > $luminance ) {
 			$classes[] = 'is-dark-theme';
 		} else {
 			$classes[] = 'is-light-theme';
 		}
 
-		if ( 'ffffff' === strtolower( $background_color ) ) {
+		if ( 225 <= $luminance ) {
 			$classes[] = 'has-background-white';
 		}