Change Text Highlight Color 🎨 in WordPress without any plugin

I recently encountered this awesome plugin Custom Highlight Color by Nick Halsey that allows you to set custom color for highlighted text on your WordPress website. And the plugin is great, does what it is supposed to, but I just wanted to take it one step further and set random colors.

To set a custom color of the highlighted text in WordPress, simply add the following code in Customizer > CustomCSS

::selection {

  background: red;

}

red is the color name, you can also use HEX color codes.

and if you want to add more than one color and randomly change the selection background, use:

:root {
  --highlight-color: null;
}

::selection {
  background: var(--highlight-color);
}

then add the following JS code to your active theme’s functions.php file or inside a plugin such as Insert Headers and Footers.

const colors = ["#c1b001", "#a8140e", "#4315aa", "#359d09", "#8f4762"];

window.addEventListener("mousedown", (e) => {
  const color = colors.shift();
  document.documentElement.style.setProperty("--highlight-color", color);
  colors.push(color);
});

Inside this file We specify the HEX color codes: “#c1b001”, “#a8140e”, “#4315aa”, “#359d09”, “#8f4762”

PS. I’m also considering making a simple wp plugin that will allow you to set colors directly from the customizer, stay updated on wp.org