Dark Mode for the Login Page
Switches the login page to dark colors automatically when the visitor's device is set to dark mode.
Opens WPIDE on
Code
add_action( 'login_enqueue_scripts', function () {
$css = '@media (prefers-color-scheme: dark){'
. 'body.login{background:#16181d;color:#d7dae0;}'
. '.login form,.login .message,.login .notice,.login #login_error{background:#22252c;border-color:#33373f;color:#d7dae0;box-shadow:none;}'
. '.login label,.login .forgetmenot label{color:#d7dae0;}'
. '.login input[type=text],.login input[type=password],.login input[type=email]{background:#16181d;border-color:#3d424c;color:#f0f2f5;}'
. '.login #nav a,.login #backtoblog a,.login .privacy-policy-page-link a{color:#9ea7b3;}'
. '.login #nav a:hover,.login #backtoblog a:hover{color:#fff;}'
. '.login .button.wp-hide-pw .dashicons{color:#9ea7b3;}'
. '}';
wp_add_inline_style( 'login', $css );
} );Notes
If you use a dark logo, also provide a light version for dark mode.
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.