Edit File by line

/* global twentytwentyoneGetHexLum, jQuery */

[0] Fix | Delete

( function() {

[1] Fix | Delete

// Add listener for the "background_color" control.

[2] Fix | Delete

wp.customize( 'background_color', function( value ) {

[3] Fix | Delete

value.bind( function( to ) {

[4] Fix | Delete

var lum = twentytwentyoneGetHexLum( to ),

[5] Fix | Delete

isDark = 127 > lum,

[6] Fix | Delete

textColor = ! isDark ? 'var(--global--color-dark-gray)' : 'var(--global--color-light-gray)',

[7] Fix | Delete

tableColor = ! isDark ? 'var(--global--color-light-gray)' : 'var(--global--color-dark-gray)',

[8] Fix | Delete

stylesheetID = 'twentytwentyone-customizer-inline-styles',

[9] Fix | Delete

stylesheet,

[10] Fix | Delete

styles;

[11] Fix | Delete

[12] Fix | Delete

// Modify the html & body classes depending on whether this is a dark background or not.

[13] Fix | Delete

if ( isDark ) {

[14] Fix | Delete

document.body.classList.add( 'is-dark-theme' );

[15] Fix | Delete

document.documentElement.classList.add( 'is-dark-theme' );

[16] Fix | Delete

document.body.classList.remove( 'is-light-theme' );

[17] Fix | Delete

document.documentElement.classList.remove( 'is-light-theme' );

[18] Fix | Delete

document.documentElement.classList.remove( 'respect-color-scheme-preference' );

[19] Fix | Delete

} else {

[20] Fix | Delete

document.body.classList.remove( 'is-dark-theme' );

[21] Fix | Delete

document.documentElement.classList.remove( 'is-dark-theme' );

[22] Fix | Delete

document.body.classList.add( 'is-light-theme' );

[23] Fix | Delete

document.documentElement.classList.add( 'is-light-theme' );

[24] Fix | Delete

if ( wp.customize( 'respect_user_color_preference' ).get() ) {

[25] Fix | Delete

document.documentElement.classList.add( 'respect-color-scheme-preference' );

[26] Fix | Delete

}

[27] Fix | Delete

}

[28] Fix | Delete

[29] Fix | Delete

// Toggle the white background class.

[30] Fix | Delete

if ( 225 <= lum ) {

[31] Fix | Delete

document.body.classList.add( 'has-background-white' );

[32] Fix | Delete

} else {

[33] Fix | Delete

document.body.classList.remove( 'has-background-white' );

[34] Fix | Delete

}

[35] Fix | Delete

[36] Fix | Delete

stylesheet = jQuery( '#' + stylesheetID );

[37] Fix | Delete

styles = '';

[38] Fix | Delete

// If the stylesheet doesn't exist, create it and append it to <head>.

[39] Fix | Delete

if ( ! stylesheet.length ) {

[40] Fix | Delete

jQuery( '#twenty-twenty-one-style-inline-css' ).after( '<style id="' + stylesheetID + '"></style>' );

[41] Fix | Delete

stylesheet = jQuery( '#' + stylesheetID );

[42] Fix | Delete

}

[43] Fix | Delete

[44] Fix | Delete

// Generate the styles.

[45] Fix | Delete

styles += '--global--color-primary:' + textColor + ';';

[46] Fix | Delete

styles += '--global--color-secondary:' + textColor + ';';

[47] Fix | Delete

styles += '--global--color-background:' + to + ';';

[48] Fix | Delete

[49] Fix | Delete

styles += '--button--color-background:' + textColor + ';';

[50] Fix | Delete

styles += '--button--color-text:' + to + ';';

[51] Fix | Delete

styles += '--button--color-text-hover:' + textColor + ';';

[52] Fix | Delete

[53] Fix | Delete

styles += '--table--stripes-border-color:' + tableColor + ';';

[54] Fix | Delete

styles += '--table--stripes-background-color:' + tableColor + ';';

[55] Fix | Delete

[56] Fix | Delete

// Add the styles.

[57] Fix | Delete

stylesheet.html( ':root{' + styles + '}' );

[58] Fix | Delete

} );

[59] Fix | Delete

} );

[60] Fix | Delete

}() );

[61] Fix | Delete

[62] Fix | Delete