mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-19 11:01:23 +02:00
3ea8930f37
Welcome to the bundled themes family! Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush. Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/. Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani. See #51526. Built from https://develop.svn.wordpress.org/trunk@49216 git-svn-id: http://core.svn.wordpress.org/trunk@48978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
68 lines
2.5 KiB
JavaScript
68 lines
2.5 KiB
JavaScript
( function( api ) {
|
|
/**
|
|
* Get luminance from a HEX color.
|
|
*
|
|
* @param {string} hex - The hex color.
|
|
*
|
|
* @return {number} - Returns the luminance, number between 0 and 255.
|
|
*/
|
|
function twentytwentyoneGetHexLum( hex ) {
|
|
var rgb = twentytwentyoneGetRgbFromHex( hex );
|
|
return Math.round( ( 0.2126 * rgb.r ) + ( 0.7152 * rgb.g ) + ( 0.0722 * rgb.b ) );
|
|
}
|
|
|
|
/**
|
|
* Get RGB from HEX.
|
|
*
|
|
* @param {string} hex - The hex color.
|
|
*
|
|
* @return {Object} - Returns an object {r, g, b}
|
|
*/
|
|
function twentytwentyoneGetRgbFromHex( hex ) {
|
|
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
|
|
result;
|
|
|
|
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF").
|
|
hex = hex.replace( shorthandRegex, function( m, r, g, b ) {
|
|
return r.toString() + r.toString() + g.toString() + g.toString() + b.toString() + b.toString();
|
|
} );
|
|
|
|
result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
|
|
return result ? {
|
|
r: parseInt( result[1], 16 ),
|
|
g: parseInt( result[2], 16 ),
|
|
b: parseInt( result[3], 16 )
|
|
} : null;
|
|
}
|
|
|
|
// Add listener for the "background_color" control.
|
|
api( 'background_color', function( value ) {
|
|
value.bind( function( to ) {
|
|
var lum = twentytwentyoneGetHexLum( to ),
|
|
isDark = 127 > lum,
|
|
textColor = ! isDark ? 'var(--global--color-dark-gray)' : 'var(--global--color-light-gray)',
|
|
tableColor = ! isDark ? 'var(--global--color-light-gray)' : 'var(--global--color-dark-gray)';
|
|
|
|
// Modify the body class depending on whether this is a dark background or not.
|
|
if ( isDark ) {
|
|
if ( ! document.body.classList.contains( 'is-background-dark' ) ) {
|
|
document.body.classList.add( 'is-background-dark' );
|
|
}
|
|
} else {
|
|
document.body.classList.remove( 'is-background-dark' );
|
|
}
|
|
|
|
document.documentElement.style.setProperty( '--global--color-primary', textColor );
|
|
document.documentElement.style.setProperty( '--global--color-secondary', textColor );
|
|
document.documentElement.style.setProperty( '--global--color-background', to );
|
|
|
|
document.documentElement.style.setProperty( '--button--color-background', textColor );
|
|
document.documentElement.style.setProperty( '--button--color-text', to );
|
|
document.documentElement.style.setProperty( '--button--color-text-hover', textColor );
|
|
|
|
document.documentElement.style.setProperty( '--table--stripes-border-color', tableColor );
|
|
document.documentElement.style.setProperty( '--table--stripes-background-color', tableColor );
|
|
} );
|
|
} );
|
|
}( wp.customize, _ ) );
|