VasilijeBursac opened a new pull request, #34640:
URL: https://github.com/apache/superset/pull/34640
### SUMMARY
This PR introduces dynamic, theme-driven branding of Apache Superset's login
page. The goal was to provide organizations with the ability to personalize
their Superset login screen with a custom background and login form logo,
similar to how Microsoft 365 allows company-specific branding on its sign-in
pages.
**Key Changes:**
- Added support for theme tokens to control login background and login form
logo
- Introduced new optional tokens: `loginPageBackgroundImageUrl`,
`loginFormBrandLogoUrl`, `loginPageBackgroundOverlayColor`,
`loginPageBackgroundBlur`
- When tokens are omitted, the login page has Superset’s default styling
- `loginPageBackgroundBlur`: CSS blur radius applied to the login page
background image (e.g., `4px`, `0.25rem`, `1em`, `10vw`)
- `loginPageBackgroundOverlayColor` is an optional theme token that
specifies the overlay color applied on top of the login page background image.
It accepts any valid CSS color value, including:
- Hex without alpha (e.g. `#000000`)
- Hex with alpha (e.g. `#00000080`)
- RGB / RGBA (e.g. rgba(`0, 0, 0, 0.5`))
- HSL / HSLA (e.g. hsla(`0, 0%, 0%, 0.5`))
- Named colors (e.g. `black`)
- If `loginPageBackgroundImageUrl` is set, but
loginPageBackgroundOverlayColor is omitted, the overlay color defaults to
`rgba(0, 0, 0, 0.5)`, i.e., a half-transparent black overlay. The default value
for `loginPageBackgroundBlur` is `0px` (no blur effect on the background image).
**Note:**
I’ve aimed to follow Superset’s existing styling and component conventions,
but please let me know if anything feels inconsistent. This is my first
contribution to the project, and I’m still getting familiar with Superset, so
it probably isn't done perfectly. Looking forward to your feedback!
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
For demonstration purposes, I’ve used Superset’s default logo and a
placeholder background image sourced from the internet. These are not intended
as final assets, but they should give a clear idea of how organizations can
apply their own branding using theme tokens.
**Before:**
Light
<img width="1920" height="879" alt="chrome_F4W1ZNxjHZ"
src="https://github.com/user-attachments/assets/9a6f154f-5551-4b36-a76b-3306281efdaa";
/>
Dark
<img width="1920" height="879" alt="chrome_jdl83pBwet"
src="https://github.com/user-attachments/assets/aaf5739f-2bca-4867-9417-0e20f3ec37f9";
/>
**After:**
Light
<img width="1920" height="879" alt="chrome_CcXqgbbuiB"
src="https://github.com/user-attachments/assets/e10d7725-329d-4840-a24d-dc863c49b390";
/>
Dark
<img width="1920" height="879" alt="chrome_KMsjrGoAJZ"
src="https://github.com/user-attachments/assets/cb080262-048a-4732-94c5-8470e057959a";
/>
Reference: Microsoft 365’s company-branded sign-in screen
### TESTING INSTRUCTIONS
1. Place your background and logo images in the following folder:
`/superset-frontend/src/assets/images`
2. Reference Images in Theme JSON:
- Superset's Theme CRUD UI → Settings > Theme > JSON Editor
- `superset_config.py` → using the THEME config
3. Example theme JSON:
```
{
"algorithm": "dark",
"token": {
"loginPageBackgroundImageUrl":
"/static/assets/images/login-background.jpg",
"loginFormBrandLogoUrl": "/static/assets/images/superset-logo-horiz.png",
"loginPageBackgroundOverlayColor": "rgba(0, 0, 0, 0.6)",
"loginPageBackgroundBlur": "3px"
}
}
```
### ADDITIONAL INFORMATION
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ x] Has associated issue: https://github.com/apache/superset/issues/23466
- [ ] Required feature flags:
- [x ] Changes UI
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
