Customizing Arroyo's accent color

Back to Blog

Unlike the subject of our last accent color guide, Adaline, the Arroyo theme doesn’t have quite as pronounced an accent color.

However, you will notice touches of blue throughout the design, which you may want to customize with CSS. In this tutorial, we’ll be changing the accent color to red.

Tl;dr: Find the Arroyo Red child theme on GitHub, and switch out the hex codes to the colors of your choice.

Locate all the shades of blue

In Arroyo, there are three shades of blue:

#00aeef: used as the default link color, menu toggle border color on hover, and square border dots
#66cef5: a lighter shade, used solely for the circle-shaped image placeholder color
#b2e7fa: the lightest shade used as the menu toggle border color, and the square-shaped image placeholder color

a,
.entry-meta,
a:visited {
	color: #00aeef;
}

.menu-toggle:hover,
.widget-title:after,
.widgettitle:after {
	border-color: #00aeef;
}

.menu-toggle {
	border-color: #b2e7fa;
}

Choosing an equivalent shade of another color

Replace the following:

Every instance of #00aeef with #ef0000
Every instance of #66cef5 with #f56666
Every instance of #b2e7fa with #fab2b2

Reset particular original link colors

.site-title a,
.entry-title a,
.main-navigation a,
.comment-navigation a,
.read-more a {
	color: #000;
}

a.page-numbers,
.post-navigation a,
.page-links a {
	color: #fff;
}