WordPress Add Color Picker to Admin Adding Body Color Variables

color-picker-hook.php

add_action( 'in_admin_header', 'add_profile_theme_color_picker' );
function add_profile_theme_color_picker() {
		?><div id="ui-picker">
			<div><input type="color" id="base-color" name="base-color" value="#23282d" /> <label for="base-color">Base color</label></div>
			<div><input type="color" id="highlight-color" name="highlight-color" value="#0073aa" /> <label for="highlight-color">Highlight color</label></div>
			<div><input type="color" id="notification-color" name="notification-color" value="#d54e21" /> <label for="notification-color">Notification color</label></div>
			<div><input type="color" id="menu-submenu-text" name="menu-submenu-text" value="#0073aa" /> <label for="menu-submenu-text">Submenu Text color</label></div>
		<script type="text/javascript">
			// Function for lightening or darkening colors according to how they are done in the wp-admin sass file.
			function LightenDarkenColor(col, amt) {

				var usePound = false;

				if (col[0] == "#") {
					col = col.slice(1);
					usePound = true;
				}

				var num = parseInt(col,16);

				var r = (num >> 16) + amt;

				if (r > 255) r = 255;
				else if  (r < 0) r = 0;

				var b = ((num >> 8) & 0x00FF) + amt;

				if (b > 255) b = 255;
				else if  (b < 0) b = 0;

				var g = (num & 0x0000FF) + amt;

				if (g > 255) g = 255;
				else if (g < 0) g = 0;

				return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);

			}

			// https://css-tricks.com/converting-color-spaces-in-javascript/
			function hexToHSL(H) {
			  // Convert hex to RGB first
			  let r = 0, g = 0, b = 0;
			  if (H.length == 4) {
				r = "0x" + H[1] + H[1];
				g = "0x" + H[2] + H[2];
				b = "0x" + H[3] + H[3];
			  } else if (H.length == 7) {
				r = "0x" + H[1] + H[2];
				g = "0x" + H[3] + H[4];
				b = "0x" + H[5] + H[6];
			  }
			  // Then to HSL
			  r /= 255;
			  g /= 255;
			  b /= 255;
			  let cmin = Math.min(r,g,b),
				  cmax = Math.max(r,g,b),
				  delta = cmax - cmin,
				  h = 0,
				  s = 0,
				  l = 0;

			  if (delta == 0)
				h = 0;
			  else if (cmax == r)
				h = ((g - b) / delta) % 6;
			  else if (cmax == g)
				h = (b - r) / delta + 2;
			  else
				h = (r - g) / delta + 4;

			  h = Math.round(h * 60);

			  if (h < 0)
				h += 360;

			  l = (cmax + cmin) / 2;
			  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
			  s = +(s * 100).toFixed(1);
			  l = +(l * 100).toFixed(1);

			  return {
				  css: "hsl(" + h + "," + s + "%," + l + "%)",
				  hue: h,
				  saturation: s,
				  lightness: l
			  };
			}

			// https://css-tricks.com/converting-color-spaces-in-javascript/
			function HSLToHex(h,s,l) {
			  s /= 100;
			  l /= 100;

			  let c = (1 - Math.abs(2 * l - 1)) * s,
				  x = c * (1 - Math.abs((h / 60) % 2 - 1)),
				  m = l - c/2,
				  r = 0,
				  g = 0,
				  b = 0;

			  if (0 <= h && h < 60) {
				r = c; g = x; b = 0;
			  } else if (60 <= h && h < 120) {
				r = x; g = c; b = 0;
			  } else if (120 <= h && h < 180) {
				r = 0; g = c; b = x;
			  } else if (180 <= h && h < 240) {
				r = 0; g = x; b = c;
			  } else if (240 <= h && h < 300) {
				r = x; g = 0; b = c;
			  } else if (300 <= h && h < 360) {
				r = c; g = 0; b = x;
			  }
			  // Having obtained RGB, convert channels to hex
			  r = Math.round((r + m) * 255).toString(16);
			  g = Math.round((g + m) * 255).toString(16);
			  b = Math.round((b + m) * 255).toString(16);

			  // Prepend 0s, if necessary
			  if (r.length == 1)
				r = "0" + r;
			  if (g.length == 1)
				g = "0" + g;
			  if (b.length == 1)
				b = "0" + b;

			  return "#" + r + g + b;
			}

			var base_color = '#23282d'; // (210°, 12.5, 15.7)
			var base_color_hsl = hexToHSL(base_color);
			var highlight_hsl = {
				hue: parseFloat(base_color_hsl.hue) - 10.6,
				saturation: 100,
				lightness: parseFloat(base_color_hsl.lightness) + 17.6
			};
			var highlight_color = HSLToHex(highlight_hsl.hue, highlight_hsl.saturation, highlight_hsl.lightness);
			var highlight_variations = {
				'--highlight-color': highlight_color,
				'--highlight-color-darken-five': -5,
				'--highlight-color-darken-ten': -10,
				'--highlight-color-darken-twenty': -20,
				'--highlight-color-lighten-ten': 10
			};
			function makeHighlightVariationsString() {
				var color = highlight_variations;
				var value = '';
				for ( var i in highlight_variations ) {
					if ( highlight_variations.hasOwnProperty( i ) ) {
						if ( typeof highlight_variations[i] === 'string' ) {
							value += i + ':' + highlight_variations[i] + ';';
						} else {
							value += i + ':' + LightenDarkenColor( color, highlight_variations[i] ) + ';';
						}
					}
				}
				return value;
			}

			var icon_color = 'hsl(' + base_color_hsl.hue + ', 7%, 95%)';

			// Set up initial values for base variables in base theme.
			document.body.style.cssText = '--base-color:' + base_color + ';--menu-background:var(--base-color);--icon-color:' + icon_color + ';--menu-icon:var(--icon-color);--notification-color:#E1A948;--button-color:#E1A948;--menu-submenu-text:#E2ECF1;--menu-submenu-background:' + LightenDarkenColor( base_color, -7 ) + ';' + makeHighlightVariationsString() + '--menu-submenu-focus-text:var(--highlight-color);';

			// Add event handler for changing inline CSS variables in body style attribute.
			jQuery('#sandbox-ui').on('change', 'input[type="color"]', function(e){

				// Update the color variable.
				var value = e.target.value;
				var prop = '--' + e.target.name;
				jQuery('body').css(prop, value);

				// Update other variables dependent on this variable, if applicable.
				if ( 'base-color' === e.target.name ) {
					var base_color_hsl = hexToHSL(value);
					var highlight_hsl = {
						hue: parseFloat(base_color_hsl.hue) - 10.6,
						saturation: 100,
						lightness: parseFloat(base_color_hsl.lightness) + 17.6
					};
					var highlight_color = HSLToHex(highlight_hsl.hue, highlight_hsl.saturation, highlight_hsl.lightness);
					console.log(highlight_color);
					for ( var i in highlight_variations ) {
						if ( highlight_variations.hasOwnProperty( i ) ) {
							if ( i === '--highlight-color' ) {
								jQuery('body').css( '--highlight-color', highlight_color );
							} else {
								jQuery('body').css( i, LightenDarkenColor( highlight_color, highlight_variations[i] ) );
							}
						}
					}
					jQuery('body').css( '--menu-submenu-background', LightenDarkenColor( value, -7 ) );
					var base_color_hsl = hexToHSL(value);
					jQuery('body').css( '--icon-color', 'hsl(' + base_color_hsl.hue + ', 7%, 95%)' );
				}

			});

		</script></div>
		<?php
	}