High-Contrast Mode for wp-admin
Adds a "High contrast" checkbox to each user's profile that switches the dashboard to dark backgrounds, white text, yellow links and strong borders for that user only.
Opens WPIDE on
Code
add_action( 'personal_options', function ( $user ) {
printf(
'<tr><th scope="row">High contrast</th><td><label><input type="checkbox" name="wpide_admin_contrast" value="1" %s> Use high-contrast colors in the dashboard</label></td></tr>',
checked( get_user_meta( $user->ID, 'wpide_admin_contrast', true ), '1', false )
);
} );
$wpide_save_contrast = function ( $user_id ) {
if ( current_user_can( 'edit_user', $user_id ) && isset( $_POST['_wpnonce'] ) && wp_verify_nonce( sanitize_key( $_POST['_wpnonce'] ), 'update-user_' . $user_id ) ) {
update_user_meta( $user_id, 'wpide_admin_contrast', empty( $_POST['wpide_admin_contrast'] ) ? '0' : '1' );
}
};
add_action( 'personal_options_update', $wpide_save_contrast );
add_action( 'edit_user_profile_update', $wpide_save_contrast );
add_action( 'admin_head', function () {
if ( '1' !== get_user_meta( get_current_user_id(), 'wpide_admin_contrast', true ) ) {
return;
}
?>
<style>
#wpcontent,#wpbody-content,.wrap,.postbox,.card,.widefat,.widefat td,.widefat th,.form-table th,.form-table td,.notice{background:#000!important;color:#fff!important;border-color:#fff!important;}
#wpcontent a,.wrap a,.row-actions a{color:#ffeb3b!important;text-decoration:underline!important;}
.wrap input,.wrap select,.wrap textarea{background:#000!important;color:#fff!important;border:2px solid #fff!important;}
.button,.button-primary,.button-secondary{background:#000!important;color:#ffeb3b!important;border:2px solid #ffeb3b!important;}
.widefat tr:nth-child(odd) td{background:#111!important;}
#adminmenu,#adminmenuback,#adminmenuwrap{background:#000!important;}
#adminmenu a{color:#fff!important;}
#adminmenu .current a,#adminmenu a:focus,#adminmenu a:hover{color:#000!important;background:#ffeb3b!important;}
:focus-visible{outline:3px solid #ffeb3b!important;outline-offset:2px!important;}
</style>
<?php
} );
Notes
Plugin screens with their own styling may not follow every rule; the block editor canvas keeps the theme's colors.
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.