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]>
This commit is contained in:
NixReaper
2026-07-12 14:49:03 -05:00
co-authored by Claude Opus 4.8
parent f5c48bced9
commit faf9f35992
2 changed files with 66 additions and 9 deletions
+42
View File
@@ -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',
},
],
},