Expand login customizer: background, colors, custom CSS

Extend Settings > Login (beyond the existing style toggle + logo) toward
Loginfy parity: background image or color, form-panel background, button/
focus-accent color, and a custom login CSS field — all dependent on
"Style login page" and all falling back to the original fixed dark theme
when unset. LoginStyle.php sanitizes colors via sanitize_hex_color(),
esc_url()s the background image, and appends custom CSS (</style> stripped).
Verified on wp-login.php.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

admin/src/Login/LoginStyle.php

@@ -42,10 +42,25 @@ class LoginStyle
     }
 
     $logo = trim((string) Settings::get("login_logo", ""));
+    $bg_image = trim((string) Settings::get("login_bg_image", ""));
+    // Colors fall back to the original fixed dark theme when unset; invalid
+    // values are dropped by sanitize_hex_color (returns null) then fall back.
+    $bg_color = sanitize_hex_color((string) Settings::get("login_bg_color", "")) ?: "";
+    $form_bg = sanitize_hex_color((string) Settings::get("login_form_bg", "")) ?: "#1c2333";
+    $accent = sanitize_hex_color((string) Settings::get("login_button_color", "")) ?: "#4f7cff";
+    $custom_css = str_ireplace("</style>", "", (string) Settings::get("login_custom_css", ""));
+
+    if ($bg_image) {
+      $background = "url(" . esc_url($bg_image) . ") center / cover no-repeat";
+    } elseif ($bg_color) {
+      $background = $bg_color;
+    } else {
+      $background = "linear-gradient(135deg, #1b2333 0%, #0f1420 100%)";
+    }
     ?>
     <style>
       body.login {
-        background: linear-gradient(135deg, #1b2333 0%, #0f1420 100%);
+        background: <?php echo $background; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- composed from a sanitize_hex_color() color or esc_url()'d image above. ?>;
       }
       body.login #login h1 a {
         <?php if ($logo): ?>
@@ -64,7 +79,7 @@ class LoginStyle
       body.login form#loginform,
       body.login form#registerform,
       body.login form#lostpasswordform {
-        background: #1c2333;
+        background: <?php echo esc_attr($form_bg); ?>;
         border: 1px solid rgba(255, 255, 255, 0.08);
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
@@ -84,8 +99,8 @@ class LoginStyle
       body.login input[type="text"]:focus,
       body.login input[type="password"]:focus,
       body.login input[type="email"]:focus {
-        border-color: #4f7cff;
+        border-color: <?php echo esc_attr($accent); ?>;
-        box-shadow: 0 0 0 1px #4f7cff;
+        box-shadow: 0 0 0 1px <?php echo esc_attr($accent); ?>;
       }
       body.login .forgetmenot label {
         color: #9fb0d0;
@@ -99,23 +114,23 @@ class LoginStyle
         color: #fff;
       }
       body.login .wp-core-ui .button-primary {
-        background: #4f7cff;
+        background: <?php echo esc_attr($accent); ?>;
-        border-color: #4f7cff;
+        border-color: <?php echo esc_attr($accent); ?>;
         box-shadow: none;
         text-shadow: none;
       }
       body.login .wp-core-ui .button-primary:hover,
       body.login .wp-core-ui .button-primary:focus {
-        background: #3b63e0;
+        filter: brightness(0.92);
-        border-color: #3b63e0;
       }
       body.login #login_error,
       body.login .message,
       body.login .success {
         background: #232b40;
-        border-left-color: #4f7cff;
+        border-left-color: <?php echo esc_attr($accent); ?>;
         color: #e2e8f4;
       }
+      <?php echo $custom_css; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- admin-authored login CSS, output raw by design; </style> stripped above. ?>
     </style>
     <?php
   }

app/src/pages/settings/settingsConfig.js

@@ -150,6 +150,48 @@ export const settingsGroups = [
             type: 'image',
             label: 'Login logo',
             description: 'Replace the WordPress logo on the login screen.',
+            dependsOn: 'style_login',
+          },
+          {
+            key: 'login_bg_image',
+            type: 'image',
+            label: 'Background image',
+            description: 'Full-screen background for the login page. Overrides the background color below.',
+            dependsOn: 'style_login',
+          },
+          {
+            key: 'login_bg_color',
+            type: 'color',
+            label: 'Background color',
+            description: 'Solid background color for the login page (used when no background image is set).',
+            default: '#0f1420',
+            dependsOn: 'style_login',
+          },
+          {
+            key: 'login_form_bg',
+            type: 'color',
+            label: 'Form background',
+            description: 'Background color of the login form panel.',
+            default: '#1c2333',
+            dependsOn: 'style_login',
+          },
+          {
+            key: 'login_button_color',
+            type: 'color',
+            label: 'Button color',
+            description: 'Color of the primary “Log In” button and the field focus accent.',
+            default: '#4f7cff',
+            dependsOn: 'style_login',
+          },
+          {
+            key: 'login_custom_css',
+            type: 'textarea',
+            mono: true,
+            rows: 8,
+            label: 'Custom login CSS',
+            description: 'Extra CSS applied to the login screen, after Aurora’s own styles.',
+            placeholder: 'body.login { … }',
+            dependsOn: 'style_login',
           },
         ],
       },