# Brand Colors on the Login Page

> Restyles the login screen with your own background, button and link colors.

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

## Code

```php
add_action( 'login_enqueue_scripts', function () {
    $background = '#f3f4f6';
    $accent     = '#1d4ed8';
    $text       = '#111827';

    printf(
        '<style>
        body.login{background:%1$s;}
        .login #nav a,.login #backtoblog a{color:%3$s;}
        .login #nav a:hover,.login #backtoblog a:hover{color:%2$s;}
        .wp-core-ui .button-primary{background:%2$s;border-color:%2$s;}
        .wp-core-ui .button-primary:hover,.wp-core-ui .button-primary:focus{background:%3$s;border-color:%3$s;}
        .login input[type=text]:focus,.login input[type=password]:focus{border-color:%2$s;box-shadow:0 0 0 1px %2$s;}
        </style>',
        esc_attr( $background ),
        esc_attr( $accent ),
        esc_attr( $text )
    );
} );
```

## Notes

Edit the three color variables.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Brand Colors on 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/