wp-includes » Change Text Highlight Color 🎨 in WordPress without any plugin

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.

image 22 1024x718 - Change Text Highlight Color 🎨 in WordPress without any plugin

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);
}
image 21 - Change Text Highlight Color 🎨 in WordPress without any plugin

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

See also  Automatically add featured image Alt Text from post title

Was this post helpful?

Leave a Comment

I enjoy constructive responses and professional comments to my posts, and invite anyone to comment or link to my site.

Recommended