Make WordPress Core

Opened 8 years ago

Last modified 4 months 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: Administration Keywords: has-patch 2nd-opinion
Focuses: ui, javascript, css, administration, template Cc:

Description (last modified by sabernhardt)


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 (2)

Screen Shot 2016-12-13 at 10.36.50.png (15.5 KB) - added by robsat91 8 years ago.
Image of the color-diff between SVG-icon (Ships) and other native dashicons.
39261.diff (963 bytes) - added by sabernhardt 4 months ago.
removes semi-transparent RGBA color

Download all attachments as: .zip

Change History (5)

8 years ago

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

#1 @robsat91
8 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.
7 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 ) ) {

4 months ago

removes semi-transparent RGBA color

#3 @sabernhardt
4 months ago

  • Component changed from General to Administration
  • Description modified (diff)
  • Focuses css added
  • Keywords has-patch 2nd-opinion added

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.

Note: See TracTickets for help on using tickets.