Wordpress - Add a new Admin Color Scheme using functions.php

Question

In the Wordpress UI, on the Profile page (../wp-admin/profile.php), there are eight default Admin Color Schemes that you can select as options:

I've found where the CSS for these schemes is created (../wp-admin/css/colors/) and made my own folder with CSS to match.

First off, I can't even get my color scheme to display on the Profile page so I can test it. In ../wp-admin/profile.php it's just this:

define('IS_PROFILE_PAGE', true);

/** Load User Editing Page */
require_once( dirname( __FILE__ ) . '/user-edit.php' );

and in ../wp-admin/user-edit.php here's the section that spits out the color schemes:

<?php if ( count($_wp_admin_css_colors) > 1 && has_action('admin_color_scheme_picker') ) : ?>
<tr class="user-admin-color-wrap">
<th scope="row"><?php _e('Admin Color Scheme')?></th>
<td><?php
    /**
     * Fires in the 'Admin Color Scheme' section of the user editing screen.
     *
     * The section is only enabled if a callback is hooked to the action,
     * and if there is more than one defined color scheme for the admin.
     *
     * @since 3.0.0
     * @since 3.8.1 Added `$user_id` parameter.
     *
     * @param int $user_id The user ID.
     */
    do_action( 'admin_color_scheme_picker', $user_id );
?></td>
</tr>
<?php
endif; // $_wp_admin_css_colors

So my questions are:

How do I get it to display my color scheme on the Profile page so that I can test it and edit it?
Once I'm satisfied with how it looks, how do I put the color scheme in my custom theme's functions.php file so I can import it with every theme install and not have to worry about WordPress erasing it with updates?
How do I set this color scheme as the default one for users?

Let me know if I need to add further details, thanks for the help guys!

Can you post real code instead of an image of it? – Funk Forty Niner Feb 24 '20 at 18:38 — Funk Forty Niner, Feb 24 '20 at 18:38
Is that better...? – Danny the Hopeless Feb 24 '20 at 21:43 — Danny the Hopeless, Feb 24 '20 at 21:43
Yes Danny, thank you. – Funk Forty Niner Feb 24 '20 at 21:52 — Funk Forty Niner, Feb 24 '20 at 21:52

score 2 · Answer 1 · answered Feb 24 '20 at 18:31

2

Take a look at this article, it may help you: https://www.orionorigin.com/tutorials-and-snippets/define-wordpress-color-scheme-set-default-users/

add_filter( 'get_user_option_admin_color', function( $color_scheme ) {

$color_scheme = 'your_color_sheme_name';

return $color_scheme;

}, 5 );

answered Feb 24 '20 at 18:31

Manas Khandelwal

3,790
2
11
24

Looks like this might help answer my 3rd question, although I tried to use the generator on that site and it seems broken. Thanks for the help on one of my questions though! – Danny the Hopeless Feb 24 '20 at 22:05

score 1 · Accepted Answer · answered Feb 25 '20 at 00:32

For anyone who's wondering: I found an answer! Thanks to help from @Manas Khandelwal, I was able to locate a working site that generated a CSS file for me. It served as a great starting point and I edited it from the basic file it started out with.

Here's the site and I'd highly recommend it: https://wpadmincolors.com/

Just follow the instructions to put it in your theme. Thanks guys!

score 0 · Answer 3 · answered Apr 19 '23 at 05:58

Danny, I'd suggest you to use some of the default CSS admin styles from the WordPress, and this is an example (Blue theme)

The location of the CSS is here

/wp-admin/css/colors/blue/colors.min.css

You can make a copy and change it to match your styles. Then put it in your theme in this location

<your-theme-dir>/css/admin-styles.css

Next, add this snippet to functions.php

function custom_admindash_colors() {
    wp_admin_css_color(
        'my-color-scheme', // unique color scheme ID
        __( 'My Color Scheme' ), // name of the color scheme
        get_stylesheet_directory_uri() . '/css/admin-styles.css', // URL to the custom CSS file
        array(
            '#1e1e1e', // main background color
            '#f2f2f2', // main text color
            '#0073aa', // highlight color
            '#d54e21', // secondary highlight color
        ),
        array(
            'base' => '#1e1e1e', // base color
            'focus' => '#d54e21', // focus color
            'current' => '#0073aa', // current color
        )
    );
}
add_action( 'admin_init', 'custom_admindash_colors' );

This will create a new color scheme on your profile with the colors you provided. The main admin styles will be pulled from your custom CSS file actually.

This is how your custom style will look on your profile

This should address #1 and #2 from your questions.

Lastly (to address #3), you can use this snippet (credits to Panda from the previous answer) to make it default for all users:

add_filter( 'get_user_option_admin_color', function( $color_scheme ) {

return 'my-color-scheme';

}, 5 );

This should work and solve all 3 issues you have. In case you want an out-of-the-box solution with more user-friendly features, please check our free plugin ACOS hosted on WordPress.org:

https://wordpress.org/plugins/admin-color-scheme/

Wordpress - Add a new Admin Color Scheme using functions.php

3 Answers3