PHPXRef 0.7.1 : WordPress Trunk (Updated Daily) : /wp-content/themes/twentytwentyone/assets/js/customize-preview.js source

[Summary view] [Print] [Text view]
   1  /* global twentytwentyoneGetHexLum, jQuery */
   2  ( function() {
   3      // Add listener for the "background_color" control.
   4      wp.customize( 'background_color', function( value ) {
   5          value.bind( function( to ) {
   6              var lum = twentytwentyoneGetHexLum( to ),
   7                  isDark = 127 > lum,
   8                  textColor = ! isDark ? 'var(--global--color-dark-gray)' : 'var(--global--color-light-gray)',
   9                  tableColor = ! isDark ? 'var(--global--color-light-gray)' : 'var(--global--color-dark-gray)',
  10                  stylesheetID = 'twentytwentyone-customizer-inline-styles',
  11                  stylesheet,
  12                  styles;
  13  
  14              // Modify the html & body classes depending on whether this is a dark background or not.
  15              if ( isDark ) {
  16                  document.body.classList.add( 'is-dark-theme' );
  17                  document.documentElement.classList.add( 'is-dark-theme' );
  18                  document.body.classList.remove( 'is-light-theme' );
  19                  document.documentElement.classList.remove( 'is-light-theme' );
  20                  document.documentElement.classList.remove( 'respect-color-scheme-preference' );
  21              } else {
  22                  document.body.classList.remove( 'is-dark-theme' );
  23                  document.documentElement.classList.remove( 'is-dark-theme' );
  24                  document.body.classList.add( 'is-light-theme' );
  25                  document.documentElement.classList.add( 'is-light-theme' );
  26                  if ( wp.customize( 'respect_user_color_preference' ).get() ) {
  27                      document.documentElement.classList.add( 'respect-color-scheme-preference' );
  28                  }
  29              }
  30  
  31              // Toggle the white background class.
  32              if ( 225 <= lum ) {
  33                  document.body.classList.add( 'has-background-white' );
  34              } else {
  35                  document.body.classList.remove( 'has-background-white' );
  36              }
  37  
  38              stylesheet = jQuery( '#' + stylesheetID );
  39              styles = '';
  40              // If the stylesheet doesn't exist, create it and append it to <head>.
  41              if ( ! stylesheet.length ) {
  42                  jQuery( '#twenty-twenty-one-style-inline-css' ).after( '<style id="' + stylesheetID + '"></style>' );
  43                  stylesheet = jQuery( '#' + stylesheetID );
  44              }
  45  
  46              // Generate the styles.
  47              styles += '--global--color-primary:' + textColor + ';';
  48              styles += '--global--color-secondary:' + textColor + ';';
  49              styles += '--global--color-background:' + to + ';';
  50  
  51              styles += '--button--color-background:' + textColor + ';';
  52              styles += '--button--color-text:' + to + ';';
  53              styles += '--button--color-text-hover:' + textColor + ';';
  54  
  55              styles += '--table--stripes-border-color:' + tableColor + ';';
  56              styles += '--table--stripes-background-color:' + tableColor + ';';
  57  
  58              // Add the styles.
  59              stylesheet.html( ':root{' + styles + '}' );
  60          } );
  61      } );
  62  }() );
PHP Cross Reference of WordPress Trunk (Updated Daily)

/wp-content/themes/twentytwentyone/assets/js/ -> customize-preview.js (source)
