Possible wrong base color for admin SVG-icons

[robsat91]

Hello!

I'm currently working with custom SVG icons for my custom post types, but i can see that these icons have a slightly different color than the native dashicons. It seems like the SVG-painter paints my SVG-icons in the wrong base-color.

I'm using the default theme "fresh" and the base is set to #82878c. If i change to for example #9EA3A8 my SVG-icons looks more like the native dashicons. Maybe the basecolor is a bit off?
File: wp-includes/general-template.php:3428

I can also see that this affects the SVG in other plugins (Yoast SEO, WPML etc.).

Best regards, Robert Sather.

[robsat91]

Image of the color-diff between SVG-icon (Ships) and other native dashicons.

[robsat91]

Temporary fix:

<?php
// Fix icon-color "base" for SVG-icons
add_action('admin_init', function(){
        global $_wp_admin_css_colors;
        if( isset($_wp_admin_css_colors['fresh']->icon_colors['base']) ) {
                $_wp_admin_css_colors['fresh']->icon_colors['base'] = '#9ea3a8';
        }
});

[RiccardoB.]

I confirm the issue: on 4.9.1 the color for icons.base is set to #82878c but the admin icons are colored by this css:

#adminmenu div.wp-menu-image::before {
    color: #a0a5aa;
    color: rgba(240,245,250,.6);
}

so in previous @robsat91 temporary fix the #9ea3a8 should become #a0a5aa.

In addition we cannot set the correct rgba value because paintElement function included in wp-admin/js/svg-painter.js accepts only colors in hex formats according to lines 186-189:

// only accept hex colors: #101 or #101010
if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) {
	return;
}

[sabernhardt]

removes semi-transparent RGBA color

[sabernhardt]

The colors were updated in [50025], but I still see a slight variation between the Yoast SEO icon and dashicons in the default color scheme.

We could consider removing the RGBA and assign the hexadecimal color only. [31422] added the RGBA with a fallback for older browsers, and now browsers would rarely use hexadecimal for the dashicons. However, in the unfinished custom properties project, @ryelle's ​branch suggested defining the color with the hex code.

I would rather not try using opacity (of about 0.9) in the default scheme because it would not be appropriate in the other schemes.