How to change the on-click color of links in WordPress 2021 theme?

Published Categorized as WordPress
How to change background color of links in wordpress 2021 theme

By default, links in WordPress Twenty Twenty One theme have a background color that’s displayed when they are clicked. The background color appears white on light background and appears black when dark mode is on.

How to change the on-click background color of links in WordPress Twenty Twenty One theme?

All it takes is just adding couple of lines of CSS in the customizer panel.

Once you login to the admin panel, go to: Appearance -> Customize -> Additional CSS

Add the following CSS in the text box.

.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	color: var(--wp--style--color--link, var(--global--color-black));
    background-color: transparent;
}

.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	color: var(--wp--style--color--link, var(--global--color-white));
    background-color: transparent;
}

After adding that, click on publish and refresh your site. If you are using a cache plugin, purge all cache to see the changes.

By Sudheer Paturi

Hi I'm Sudheer. I'm enthusiastic about technology and I use this blog as a platform to share my insights and knowledge about the tools I use everyday. I have a background in Information Technology with a bachelors degree and four years of work experience as an IT & Marketing Manager.

Leave a comment

Your email address will not be published. Required fields are marked *