Dark Mode for wp-admin (Per User)
Adds a "Dark mode" checkbox to each user's profile that switches the whole admin area to a dark look, with images and videos kept in their real colors.
Opens WPIDE on
Code
add_action( 'personal_options', function ( $user ) {
wp_nonce_field( 'wpide_dark_mode', 'wpide_dark_nonce' );
printf(
'<tr><th scope="row">Dark mode</th><td><label><input type="checkbox" name="wpide_dark_mode" value="1" %s> Use a dark admin area</label></td></tr>',
checked( get_user_meta( $user->ID, 'wpide_dark_mode', true ), '1', false )
);
} );
$wpide_save_dark_mode = function ( $user_id ) {
if ( ! current_user_can( 'edit_user', $user_id ) || ! isset( $_POST['wpide_dark_nonce'] ) || ! wp_verify_nonce( sanitize_key( $_POST['wpide_dark_nonce'] ), 'wpide_dark_mode' ) ) {
return;
}
update_user_meta( $user_id, 'wpide_dark_mode', empty( $_POST['wpide_dark_mode'] ) ? '0' : '1' );
};
add_action( 'personal_options_update', $wpide_save_dark_mode );
add_action( 'edit_user_profile_update', $wpide_save_dark_mode );
add_action( 'admin_head', function () {
if ( '1' !== get_user_meta( get_current_user_id(), 'wpide_dark_mode', true ) ) {
return;
}
?>
<style>
html { filter: invert(.92) hue-rotate(180deg); background: #fff; }
img, video, iframe, picture, canvas, .wp-color-result, .theme-screenshot, .attachment-preview .thumbnail, .editor-styles-wrapper, .block-editor-iframe__container { filter: invert(1) hue-rotate(180deg); }
.editor-styles-wrapper img, .editor-styles-wrapper video { filter: none; }
</style>
<?php
} );Notes
The theme uses a CSS filter, so a few plugin screens may look slightly off; the block editor canvas keeps your theme's real 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.