Implement Settings > Login's page styling (v2.2.0)

"Style login page" and "Login logo" existed in the Settings UI with no implementation behind them at all. New LoginStyle class hooks login_enqueue_scripts to apply a dark theme (background, form card, inputs, button) and swap in the configured logo, linked to the site's home URL instead of wordpress.org. Co-Authored-By: Claude Sonnet 5 <[email protected]>
2026-07-04 04:22:10 -05:00
parent deab644e38
commit 077e9b8d3c
5 changed files with 138 additions and 3 deletions
@@ -22,6 +22,7 @@ use AuroraAdmin\Roles\RolesData;
 use AuroraAdmin\ActivityLog\ActivityLog;
 use AuroraAdmin\ActivityLog\ActivityLogData;
 use AuroraAdmin\DatabaseExplorer\DatabaseExplorerData;
+use AuroraAdmin\Login\LoginStyle;

 defined("ABSPATH") || exit();

@@ -56,5 +57,6 @@ class AuroraAdmin
    new ActivityLog();
    new ActivityLogData();
    new DatabaseExplorerData();
+    new LoginStyle();
  }
 }
@@ -0,0 +1,122 @@
+<?php
+namespace AuroraAdmin\Login;
+
+use AuroraAdmin\Options\Settings;
+
+defined("ABSPATH") || exit();
+
+/**
+ * Applies Settings > Login's "Style login page" and "Login logo" fields to
+ * wp-login.php. Both settings existed in the UI with no implementation
+ * behind them until now — this is that implementation.
+ *
+ * Deliberately a single fixed dark theme rather than reusing the admin
+ * shell's per-preset palette system (themePresets.js): the login screen
+ * loads independently of wp-admin, so none of the --aurora-* CSS variables
+ * set on html.aurora-ready are available there, and duplicating the
+ * hue-ramp logic in PHP just to match whichever preset happens to be
+ * selected wasn't worth the upkeep for a first pass.
+ */
+class LoginStyle
+{
+  public function __construct()
+  {
+    add_action("login_enqueue_scripts", [self::class, "print_styles"]);
+    add_filter("login_headerurl", [self::class, "header_url"]);
+  }
+
+  private static function enabled()
+  {
+    return (bool) Settings::get("style_login", false);
+  }
+
+  public static function header_url($url)
+  {
+    return self::enabled() ? home_url("/") : $url;
+  }
+
+  public static function print_styles()
+  {
+    if (!self::enabled()) {
+      return;
+    }
+
+    $logo = trim((string) Settings::get("login_logo", ""));
+    ?>
+    <style>
+      body.login {
+        background: linear-gradient(135deg, #1b2333 0%, #0f1420 100%);
+      }
+      body.login #login h1 a {
+        <?php if ($logo): ?>
+        background-image: url(<?php echo esc_url($logo); ?>);
+        background-size: contain;
+        background-position: center;
+        width: 100%;
+        height: 80px;
+        <?php else: ?>
+        filter: brightness(0) invert(1);
+        <?php endif; ?>
+      }
+      body.login #login {
+        width: 360px;
+      }
+      body.login form#loginform,
+      body.login form#registerform,
+      body.login form#lostpasswordform {
+        background: #1c2333;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
+        padding: 26px 24px 24px;
+      }
+      body.login label {
+        color: #cbd3e1;
+      }
+      body.login input[type="text"],
+      body.login input[type="password"],
+      body.login input[type="email"] {
+        background: #10141f;
+        border-color: rgba(255, 255, 255, 0.12);
+        color: #fff;
+        box-shadow: none;
+      }
+      body.login input[type="text"]:focus,
+      body.login input[type="password"]:focus,
+      body.login input[type="email"]:focus {
+        border-color: #4f7cff;
+        box-shadow: 0 0 0 1px #4f7cff;
+      }
+      body.login .forgetmenot label {
+        color: #9fb0d0;
+      }
+      body.login #backtoblog a,
+      body.login #nav a {
+        color: #9fb0d0;
+      }
+      body.login #backtoblog a:hover,
+      body.login #nav a:hover {
+        color: #fff;
+      }
+      body.login .wp-core-ui .button-primary {
+        background: #4f7cff;
+        border-color: #4f7cff;
+        box-shadow: none;
+        text-shadow: none;
+      }
+      body.login .wp-core-ui .button-primary:hover,
+      body.login .wp-core-ui .button-primary:focus {
+        background: #3b63e0;
+        border-color: #3b63e0;
+      }
+      body.login #login_error,
+      body.login .message,
+      body.login .success {
+        background: #232b40;
+        border-left-color: #4f7cff;
+        color: #e2e8f4;
+      }
+    </style>
+    <?php
+  }
+}