customize-preview.js (2533B)
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 }() );