Variants: Change select drop-down arrow colors

The variant drop-down arrows obtain their color from the Color options in your Theme Settings:

Depending on which version of Pipeline you're running the option is different:

(1) Recent versions of Pipeline

(2) Earlier versions of Pipeline

Note: When changing the color in the Theme Editor, use the Save button and allow the Theme Editor to refresh before seeing the color change.

Code override option

If you need to use a different color than what's already allocated for your Link color or Border color (depending your version), you can use this method:

From the Assets folder, open ico-select.svg:

Delete all the original code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="8px" height="13px" viewBox="0 0 8 13" enable-background="new 0 0 8 13" xml:space="preserve">
<g>
	<g>
		<polygon fill="{{settings.color_border}}" points="0,8 4,13 8,8   "/>
	</g>
</g>
<g>
	<g>
		<polygon fill="{{settings.color_border}}" points="4,0 0,5 8,5   "/>
	</g>
</g>
</svg>

Replace with all this code:

Option 1: Dark Select Arrows

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="8px" height="13px" viewBox="0 0 8 13" enable-background="new 0 0 8 13" xml:space="preserve">
<g>
	<g>
		<polygon fill="#111111" points="0,8 4,13 8,8   "/>
	</g>
</g>
<g>
	<g>
		<polygon fill="#111111" points="4,0 0,5 8,5   "/>
	</g>
</g>
</svg>

OR:

Option 2: White Select Arrows

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="8px" height="13px" viewBox="0 0 8 13" enable-background="new 0 0 8 13" xml:space="preserve">
<g>
	<g>
		<polygon fill="#ffffff" points="0,8 4,13 8,8   "/>
	</g>
</g>
<g>
	<g>
		<polygon fill="#ffffff" points="4,0 0,5 8,5   "/>
	</g>
</g>
</svg>

Save the file:

Other Color Options

You can change the hex color value to any color of your choice.

Use the code from Option 1 or Option 2 and change hex color code value in both places:

Additional color values:

http://www.colorhexa.com/web-safe-colors