Default WordPress Login CSS

How to Use
Download > Install > Activate. Use your favorite IDE or the WordPress plugin editor > styles-login.css to change the colors and logo. Variables have been set to make the process simpler but you can mix it up and make it your own. By default, the existing colors are for this website’s login page. I’ve include a small image but you can also use a fully qualified domain or swap out the image.

Example
Once activated, your default WordPress login should look like this.

Source
This code consist of multiple files and can not be pasted into the functions.php as is. It’s recommended you download and install the plugin for simple code activation and edit from there.

PHP file

/*
Plugin Name: Lightweight Plugins - Default WordPress Login CSS 
Plugin URI: https://lightweightplugins.com/
Description: Adds CSS to the default WordPress login page.
Version: 1.5
Author: WP Maintenance Experts
Author URI: https://wpmaintenanceexperts.com/
License: GPLv2 or later
*/

function lightweight_plugins_login_stylesheet() {
	wp_enqueue_style( 'lightweight-custom-login', plugins_url( 'styles-login.css' , __FILE__ ) );
  }
  add_action( 'login_enqueue_scripts', 'lightweight_plugins_login_stylesheet' );

CSS file

/* For simplicity, global variables are set. */
:root {
	--color-one: #202332;
    --color-two: #f8fbfe;
    --color-thr: #202332;
    --color-fou: #f8fbfe;
}

body {
    background: var(--color-one) !important;
}

form#loginform {
    background: var(--color-two) !important;
}

.login h1 a {
    /* This is the URL of the logo on the login page. Will also accept fully qualified URL within your domain */
    background: url(lightweight-plugins-logo-icon.png) !important;
    width: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.login label {
    color: var(--color-one) !important;
}

.login #nav a, .login #backtoblog a, .login a.privacy-policy-link {
   color: var(--color-two) !important;
}

.login input#wp-submit {
    background: var(--color-fou) !important;
    color: var(--color-thr) !important;
    border-color: var(--color-thr) !important;
}

.login input#wp-submit:hover {
    background: var(--color-thr) !important;
    color: var(--color-fou) !important;
    border-color: var(--color-thr) !important;
}

input[type=checkbox]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=radio]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-thr) !important;
    -webkit-box-shadow: 0 0 0 1px var(--color-thr) !important;
    box-shadow: 0 0 0 1px var(--color-thr) !important;
    outline: 1px solid transparent !important;
}

.login #backtoblog a:hover,
.login #nav a:hover,
.login h1 a:hover {
    color: var(--color-fou) !important;
}

.login .button.wp-hide-pw:focus {
    border-color: var(--color-thr) !important;
}

.login .dashicons-visibility:before {
    color: var(--color-thr) !important;
}

.login .dashicons-hidden:before {
    color: var(--color-thr) !important;
}