Accent Color for Admin Buttons and Links
Changes the blue of primary buttons, links and focus rings across wp-admin to one accent color of your choice.
Opens WPIDE on
Code
// Your accent color.
$accent: #6a2fd6;
.wp-core-ui .button-primary {
background: $accent;
border-color: $accent;
&:hover,
&:focus {
background: darken($accent, 8%);
border-color: darken($accent, 8%);
}
}
.wp-core-ui .button:not(.button-primary) {
color: $accent;
border-color: $accent;
}
#wpbody-content a:not(.button):not(.page-title-action) {
color: $accent;
}
input:focus,
select:focus,
textarea:focus,
.wp-core-ui .button:focus {
border-color: $accent;
box-shadow: 0 0 0 1px $accent;
}How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.