How To Change WordPress Admin Color Scheme using Code?

Customizing the WordPress admin color scheme is an important aspect of creating a unique and personalized website.

The default color scheme may not always match the branding of your website or your personal preferences. Fortunately, there are two methods to change the color scheme:** using code or using a plugin**.

In this article, we will discuss both methods and provide step-by-step guides on how to change the color scheme using each method.

Let's see the Output first

[Note: Screenshot UI is designed via WP Adminify Plugin]

Changing WordPress Admin Color Scheme using Code

Changing the color scheme using code requires some knowledge of CSS and WordPress. Here are the steps to follow:

• Log in to your WordPress admin dashboard.
• Go to Appearance > Editor.
• Select the functions.php file from the list of files on the right-hand side.
• Add the following code to the end of the file:

function enable_color_scheme() {
    wp_enqueue_style('admin-color-scheme', get_template_directory_uri() . '/admin-color-scheme.css');
}

add_action('admin_enqueue_scripts', 'enable_color_scheme');

More Resource: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Create a custom CSS file named admin-color-scheme.css in your theme directory. You can do this by accessing your WordPress theme folder via FTP or using the theme editor in the WordPress Dashboard.

In the admin-color-scheme.css file, you can define the Color Scheme styles. For example, you can use the following CSS code as a starting point:

body {
  background: #8e7afa;
}

/* Links */
a {
  color: #091aff;
}

a:hover, a:active, a:focus {
  color: #e0ff3c;
}

#post-body .misc-pub-post-status:before,
#post-body #visibility:before,
.curtime #timestamp:before,
#post-body .misc-pub-revisions:before,
span.wp-media-buttons-icon:before {
  color: currentColor;
}

/* Forms */
input[type=checkbox]:checked::before {
  content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23985eeb%27%2F%3E%3C%2Fsvg%3E");
}

input[type=radio]:checked::before {
  background: #985eeb;
}

.wp-core-ui input[type="reset"]:hover,
.wp-core-ui input[type="reset"]:active {
  color: #e0ff3c;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
textarea:focus {
  border-color: #2224e2;
  box-shadow: 0 0 0 1px #2224e2;
}

/* Core UI */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
  color: #3d107e;
  border-color: #3d107e;
}

.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
  border-color: #320d67;
  color: #320d67;
}

.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
  border-color: #3d107e;
  color: #320d67;
  box-shadow: 0 0 0 1px #3d107e;
}

.wp-core-ui .button:active {
  background: #320d67;
  border-color: #320d67;
}

.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
  border-color: #320d67;
  color: #320d67;
  box-shadow: inset 0 2px 5px -3px #320d67;
}

.wp-core-ui .button-primary {
  background: #3d107e;
  border-color: #3d107e;
  color: #fff;
}

.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
  background: #44128c;
  border-color: #360e70;
  color: #fff;
}

.wp-core-ui .button-primary:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #3d107e;
}

.wp-core-ui .button-primary:active {
  background: #320d67;
  border-color: #320d67;
  color: #fff;
}

.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
  background: #3d107e;
  color: #fff;
  border-color: #1c073a;
  box-shadow: inset 0 2px 5px -3px black;
}

.wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {
  color: #cbc7d1 !important;
  background: #2b0b5a !important;
  border-color: #2b0b5a !important;
  text-shadow: none !important;
}

.wp-core-ui .button-group > .button.active {
  border-color: #3d107e;
}

.wp-core-ui .wp-ui-primary {
  color: #fdc2c2;
  background-color: #7e2cf2;
}

.wp-core-ui .wp-ui-text-primary {
  color: #7e2cf2;
}

.wp-core-ui .wp-ui-highlight {
  color: #fdc2c2;
  background-color: #2224e2;
}

.wp-core-ui .wp-ui-text-highlight {
  color: #2224e2;
}

.wp-core-ui .wp-ui-notification {
  color: #fdc2c2;
  background-color: #0019ff;
}

.wp-core-ui .wp-ui-text-notification {
  color: #0019ff;
}

.wp-core-ui .wp-ui-text-icon {
  color: #f2f1f3;
}

/* List tables */
.wrap .add-new-h2:hover,
.wrap .page-title-action:hover {
  color: #fdc2c2;
  background-color: #7e2cf2;
}

.view-switch a.current:before {
  color: #7e2cf2;
}

.view-switch a:hover:before {
  color: #0019ff;
}

/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
  background: #7e2cf2;
}

#adminmenu a {
  color: #fdc2c2;
}

#adminmenu div.wp-menu-image:before {
  color: #f2f1f3;
}

#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
  color: #fdc2c2;
  background-color: #2224e2;
}

#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
  color: #fdc2c2;
}

/* Active tabs use a bottom border color that matches the page background color. */
.about-wrap .nav-tab-active,
.nav-tab-active,
.nav-tab-active:hover {
  background-color: #8e7afa;
  border-bottom-color: #8e7afa;
}

/* Admin Menu: submenu */
#adminmenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
  background: #6a0fec;
}

#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
  border-right-color: #6a0fec;
}

#adminmenu .wp-submenu .wp-submenu-head {
  color: #d795d0;
}

#adminmenu .wp-submenu a,
#adminmenu .wp-has-current-submenu .wp-submenu a,
.folded #adminmenu .wp-has-current-submenu .wp-submenu a,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
  color: #d795d0;
}

#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
.folded #adminmenu .wp-has-current-submenu .wp-submenu a:focus,
.folded #adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
  color: #2224e2;
}

/* Admin Menu: current */
#adminmenu .wp-submenu li.current a,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
  color: #fdc2c2;
}

#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
  color: #2224e2;
}

ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
  border-right-color: #8e7afa;
}

#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
.folded #adminmenu li.current.menu-top {
  color: #fdc2c2;
  background: #2224e2;
}

#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before,
.ie8 #adminmenu li.opensub div.wp-menu-image:before {
  color: #fdc2c2;
}

/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
  color: #fdc2c2;
  background: #0019ff;
}

#adminmenu li.current a .awaiting-mod,
#adminmenu li a.wp-has-current-submenu .update-plugins,
#adminmenu li:hover a .awaiting-mod,
#adminmenu li.menu-top:hover > a .update-plugins {
  color: #fdc2c2;
  background: #6a0fec;
}

/* Admin Menu: collapse button */
#collapse-button {
  color: #f2f1f3;
}

#collapse-button:hover,
#collapse-button:focus {
  color: #2224e2;
}

/* Admin Bar */
#wpadminbar {
  color: #fdc2c2;
  background: #7e2cf2;
}

#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
  color: #fdc2c2;
}

#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
  color: #f2f1f3;
}

#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
  color: #2224e2;
  background: #6a0fec;
}

#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
  color: #2224e2;
}

#wpadminbar:not(.mobile) li:hover .ab-icon:before,
#wpadminbar:not(.mobile) li:hover .ab-item:before,
#wpadminbar:not(.mobile) li:hover .ab-item:after,
#wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
  color: #fdc2c2;
}

/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
  background: #6a0fec;
}

#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
  background: #9454ed;
}

#wpadminbar .ab-submenu .ab-item,
#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .quicklinks .menupop.hover ul li a,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
  color: #d795d0;
}

#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
  color: #f2f1f3;
}

#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop ul li a:hover strong,
#wpadminbar .quicklinks .menupop ul li a:focus strong,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:before,
#wpadminbar li a:focus .ab-icon:before,
#wpadminbar li .ab-item:focus:before,
#wpadminbar li .ab-item:focus .ab-icon:before,
#wpadminbar li.hover .ab-icon:before,
#wpadminbar li.hover .ab-item:before,
#wpadminbar li:hover #adminbarsearch:before,
#wpadminbar li #adminbarsearch.adminbar-focused:before {
  color: #2224e2;
}

#wpadminbar .quicklinks li a:hover .blavatar,
#wpadminbar .quicklinks li a:focus .blavatar,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
#wpadminbar .menupop .menupop > .ab-item:hover:before,
#wpadminbar.mobile .quicklinks .ab-icon:before,
#wpadminbar.mobile .quicklinks .ab-item:before {
  color: #2224e2;
}

#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
  color: #f2f1f3;
}

/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
  color: #f2f1f3;
}

#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
  color: #fdc2c2;
  background: #934ef4;
}

/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
  color: #fdc2c2;
  background-color: #0019ff;
}

#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
  color: #fdc2c2;
}

#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
  color: #fdc2c2;
  background-color: #0017e6;
}

/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
  border-color: #934ef4;
  background-color: #934ef4;
}

#wpadminbar #wp-admin-bar-user-info .display-name {
  color: #fdc2c2;
}

#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
  color: #2224e2;
}

#wpadminbar #wp-admin-bar-user-info .username {
  color: #d795d0;
}

/* Pointers */
.wp-pointer .wp-pointer-content h3 {
  background-color: #2224e2;
  border-color: #1b1dcf;
}

.wp-pointer .wp-pointer-content h3:before {
  color: #2224e2;
}

.wp-pointer.wp-pointer-top .wp-pointer-arrow,
.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
  border-bottom-color: #2224e2;
}

/* Media */
.media-item .bar,
.media-progress-bar div {
  background-color: #2224e2;
}

.details.attachment {
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #2224e2;
}

.attachment.details .check {
  background-color: #2224e2;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #2224e2;
}

.media-selection .attachment.selection.details .thumbnail {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2224e2;
}

/* Themes */
.theme-browser .theme.active .theme-name,
.theme-browser .theme.add-new-theme a:hover:after,
.theme-browser .theme.add-new-theme a:focus:after {
  background: #2224e2;
}

.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
  color: #2224e2;
}

.theme-section.current,
.theme-filter.current {
  border-bottom-color: #7e2cf2;
}

body.more-filters-opened .more-filters {
  color: #fdc2c2;
  background-color: #7e2cf2;
}

body.more-filters-opened .more-filters:before {
  color: #fdc2c2;
}

body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
  background-color: #2224e2;
  color: #fdc2c2;
}

body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
  color: #fdc2c2;
}

/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
  background-color: #2224e2;
  color: #fdc2c2;
}

.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
  color: #fdc2c2;
}

/* Responsive Component */
div#wp-responsive-toggle a:before {
  color: #f2f1f3;
}

.wp-responsive-open div#wp-responsive-toggle a {
  border-color: transparent;
  background: #2224e2;
}

.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
  background: #6a0fec;
}

.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
  color: #f2f1f3;
}

/* TinyMCE */
.mce-container.mce-menu .mce-menu-item:hover,
.mce-container.mce-menu .mce-menu-item.mce-selected,
.mce-container.mce-menu .mce-menu-item:focus,
.mce-container.mce-menu .mce-menu-item-normal.mce-active,
.mce-container.mce-menu .mce-menu-item-preview.mce-active {
  background: #2224e2;
}

Output

Tips and Tricks

• Use a color picker tool to find the exact color codes you want to use.
• Experiment with different color combinations to find the perfect color scheme for your website.

Changing WordPress Admin Color Scheme using WP Adminify Plugin

The WP Adminify plugin allows you to change the color scheme without any coding knowledge. [note: pro version required to get full access of color scheme options] Here are the steps to follow:

• Log in to your WordPress admin dashboard.
• Navigate to WP Adminify Option Panel.
• Then click on Customize Option.
• Now select pre built Color preset or click on the huge color picker button to select your personalized colors.

Output

Another UI generated using WP Adminify plugins option panel. Check how the WordPress Admin page looks.

Advantages and Disadvantages of Changing the Color Scheme using Code

Advantages

• More control over the color scheme.
• Can create a completely unique color scheme.

Disadvantages

• Requires coding knowledge.
• May take longer to implement.

Advantages and Disadvantages of Changing the Color Scheme using WP Adminify Plugin

Advantages

• No coding knowledge required.
• Quick and easy to implement.

Disadvantages

• Dependent on the Plugin, still need to code if you want something more then default options

In conclusion, customizing the WordPress admin color scheme is an important aspect of creating a unique and personalized website.

Both methods discussed in this article have their pros and cons, and it ultimately depends on your level of coding knowledge and customization needs.

I encourage readers to try out both methods and find the one that works best for them. Happy customizing!