[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-content/themes/twentytwentyone/classes/ -> class-twenty-twenty-one-custom-colors.php (source)

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


Generated: Thu Dec 3 01:00:04 2020 Cross-referenced by PHPXref 0.7.1