# Dark Mode for the Login Page

> Switches the login page to dark colors automatically when the visitor's device is set to dark mode.

- Type: PHP
- Runs: Run everywhere
- Category: [Login](https://wpide.com/library/category/login/)
- Tags: login, dark-mode, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/dark-mode-login-page/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Dark Mode for the Login Page" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/