Feature Request: Admin UI & Login Page Customization #1241
Replies: 2 comments
-
|
I hit this from the other side. I run a whitelabel multitenant platform on EmDash (each tenant is its own Worker on Cloudflare Workers for Platforms), and the admin chrome is part of the product identity, so it has to match the brand instead of shipping the stock Kumo look. Right now the only way I've found is to intercept the admin HTML in middleware and splice a So I prototyped both and it's small. It follows how // EmDashManifest "admin"
admin?: {
logo?: string; siteName?: string; favicon?: string;
stylesheet?: string | string[]; // <link rel="stylesheet">, after the bundle
customCss?: string; // inline <style>
};<!-- end of admin.astro's <head> -->
{adminConfig?.stylesheet
? (Array.isArray(adminConfig.stylesheet) ? adminConfig.stylesheet : [adminConfig.stylesheet])
.map((href) => <link rel="stylesheet" href={href} />)
: null}
{adminConfig?.customCss ? <style is:inline set:html={adminConfig.customCss}></style> : null}On my side that turns the whole middleware hack into one line of config ( I applied it to current Would you take this as |
Beta Was this translation helpful? Give feedback.
-
|
I've turned this thread into a consolidated RFC: #1493. It builds on this request (and the related #639, #826, #1132, #137) into one tiered, fully backward-compatible design for white-labeling the admin and login. Tier 1 starts with a Step-0 bug fix: the existing Later tiers cover the Feedback very welcome on #1493. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Type: Feature Request
Area: Admin UI / White-labeling
Priority: Nice to have
Summary
The
emdash()integration already supportsadmin.logo,admin.siteName, andadmin.favicon— a solid foundation for white-labeling. This request asks for the next tier of customization: the ability to change the login page copy, inject custom CSS, and override the accent color, without editing the@emdash-cms/adminpackage source directly.Current State
The following config works today and we're using it:
Beyond those three fields, the admin panel is locked to the Cloudflare Kumo design system. Specifically:
ThemeProvider.tsxhardcodesroot.setAttribute("data-theme", "classic")— the visual theme is not configurable from outside the package.@lingui/react/macroi18n strings with no override mechanism exposed to integrators.@emdash-cms/adminand rebuilding.What We're Asking For
1.
admin.customCss— CSS injection escape hatchA
customCssstring injected as a<style>tag into the admin SPA<head>. This is a minimal, low-risk change that unblocks the majority of visual customization use cases without requiring changes to the Kumo component library or the internal Tailwind config.The scope of what this enables:
--kumo-brand) to change the accent colorbody { background-image: ... }It won't break on admin upgrades as long as it only targets documented CSS properties.
2.
admin.login— Login page copy overridesWhy this matters: The default copy assumes the user knows what a passkey is and has already set one up. For non-technical contributors — journalists, community members, guest writers — "Use your registered passkey to sign in securely" is confusing. They arrive at the login page unsure if they're in the right place.
A configurable
headlineandsubheading(and optionally afooternote) would let site operators set expectations, name their publication, and give contributors a contact for access problems.Implementation path: these strings would be passed through to
LoginPage.tsxas props, likely via the manifest endpoint (/_emdash/api/manifest) which already carriesadminbranding to the SPA.3.
admin.accentColor— Single color token shortcutA convenience shorthand that sets
--kumo-brand(and its derived shades if Kumo exposes them) to a custom color. This covers the most common white-labeling request — "make the blue buttons match our brand" — without requiring the integrator to know which CSS variables to target.If
admin.customCssships first, this becomes a nice-to-have wrapper on top of it.What We Are Not Asking For
Implementation Complexity Estimate
admin.customCssinjection<style>tag in admin<head>admin.login.headline/subheadingLoginPage.tsxadmin.login.footeradmin.accentColorshorthandAll four fit within the existing
adminconfig namespace and require no breaking changes.Context
Running Emdash on Cloudflare Workers with a community blog. The admin is used by non-technical contributors who find the default passkey-focused login copy confusing. The site has strong brand colors (Texas red) that currently clash visually with the Cloudflare blue accent throughout the admin. Both are fixable with the changes above.
Beta Was this translation helpful? Give feedback.
All reactions