Buttons in the universal menu can be set to a custom color to perfectly match any design's color scheme. You can set a custom background color to replace the original icon colors, and also set a custom foreground color to replace the default white color of vector graphics.

Background icon color

Setting a custom color applies the color globally to all AddToAny buttons, including standalone buttons.

var a2a_config = a2a_config || {};
a2a_config.icon_color = "#0166ff";

In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.

In WordPress, go to Settings > AddToAny > Icon Style, then change "Original" background to "Custom…" to select a color.

a2a_config.icon_color = "#0166ff";

Icons in the example menu above are colored in "AddToAny blue" (#0166ff in hexadecimal notation). CSS color keywords such as seagreen or transparent can be used as well.

Foreground icon color

You can change the foreground color of menu icons by specifying a second icon_color value separated by a comma.

In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.

In WordPress, go to Settings > AddToAny > Icon Style, then change "Original" foreground to "Custom…" to select a color.

a2a_config.icon_color = "seashell,midnightblue";

The special keyword unset will display the original background colors.

a2a_config.icon_color = "unset,#fff5ee";