WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 22 months ago

#39261 new defect (bug)

Possible wrong base color for admin SVG-icons

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

Description

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.

Attachments (1)

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

Download all attachments as: .zip

Change History (3)

@robsat91
3 years ago

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

#1 @robsat91
3 years ago

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';
        }
});

#2 @RiccardoB.
22 months 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 ) ) {
	return;
}
Note: See TracTickets for help on using tickets.