Make WordPress Core

Opened 7 years ago

Last modified 6 years ago

#39261 new defect (bug)

Possible wrong base color for admin SVG-icons

Reported by: robsat91's profile robsat91 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7
Component: General Keywords:
Focuses: ui, javascript, administration, template Cc:



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.

Attachments (1)

Screen Shot 2016-12-13 at 10.36.50.png (15.5 KB) - added by robsat91 7 years ago.
Image of the color-diff between SVG-icon (Ships) and other native dashicons.

Download all attachments as: .zip

Change History (3)

7 years ago

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

#1 @robsat91
7 years ago

Temporary fix:

// 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';

#2 @RiccardoB.
6 years ago

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 ) ) {
Note: See TracTickets for help on using tickets.