feat(infra): full dezky rebrand of Authentik login (logo, favicon, bg, footer)
ci / typecheck (map[dir:services/platform-api name:platform-api]) (push) Has been cancelled
ci / test (push) Has been cancelled
ci / typecheck (map[dir:apps/portal name:portal]) (push) Has been cancelled
ci / typecheck (map[dir:apps/website name:website]) (push) Has been cancelled
ci / typecheck (map[dir:apps/booking name:booking]) (push) Has been cancelled

Brand CSS only reaches the flow shadow DOM via CSS vars (colors), not the
logo/favicon (deeper shadow root) or the "Powered by authentik" footer (light
DOM). So, dev-style: serve real dezky assets + sed the bundle.

- web-assets/: dezky-logo.svg, dezky-favicon.svg, dezky-bg.svg (carbon).
- server-rebrand.py: patches the authentik-server Deployment with an
  initContainer that copies /web/dist to an emptyDir, drops the svgs into
  assets/icons, and seds "Powered by authentik" -> "Powered by Dezky".
- brand.yaml: branding_logo / branding_favicon / branding_default_flow_background
  point at the served svgs; auth-flow title "Welcome to Dezky"; signal-green CSS.

Verified live: login now matches dev (logo, title, carbon bg, green button,
favicon, Powered by Dezky). Durability caveat documented (reverts on helm
upgrade).
This commit is contained in:
Ronni Baslund
2026-06-08 20:36:01 +02:00
parent 99cd86cd3a
commit 326b626fc6
6 changed files with 57 additions and 20 deletions
@@ -1,8 +1,11 @@
# dezky branding for the default Authentik brand. branding_logo /
# branding_default_flow_background are FILE-PATH fields (reject data URIs), so
# the logo + carbon background are done via custom CSS (which allows data URIs).
# The auth-flow title is set on the flow itself. ("Powered by authentik" footer
# still needs the separate web-bundle patch.)
# dezky branding for the default Authentik brand.
# - branding_logo points at a dezky SVG injected into the server's web bundle
# by the dezky-rebrand initContainer (see authentik/README "rebrand").
# - colors (accent, button, carbon background) via custom CSS (CSS vars cross the
# shadow boundary; selectors can't, so the logo had to be a real file).
# - "Powered by authentik" -> "Powered by Dezky" is done by the same
# initContainer sed'ing the bundle (the footer is light-DOM, unreachable by
# brand CSS).
version: 1
metadata:
name: dezky-brand
@@ -15,6 +18,9 @@ entries:
domain: authentik-default
attrs:
branding_title: dezky
branding_logo: /static/dist/assets/icons/dezky-logo.svg
branding_favicon: /static/dist/assets/icons/dezky-favicon.svg
branding_default_flow_background: /static/dist/assets/icons/dezky-bg.svg
branding_custom_css: |
:root, :host {
--ak-accent: #D4FF3A;
@@ -23,19 +29,8 @@ entries:
--pf-global--link--Color: #D4FF3A;
--ak-flow-background: #0A0A0A !important;
}
/* dezky logo in place of the authentik wordmark */
.pf-c-brand, img.pf-c-brand, .ak-brand img, header img {
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCAxODAgNDgiPjxyZWN0IHg9IjIiIHk9IjIiIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgcng9IjEzIiBmaWxsPSIjRjRGM0VFIi8+PHRleHQgeD0iMjQiIHk9IjM2IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMzIiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiMwQTBBMEEiIHRleHQtYW5jaG9yPSJtaWRkbGUiPmQ8L3RleHQ+PGNpcmNsZSBjeD0iMzgiIGN5PSIxMiIgcj0iNC41IiBmaWxsPSIjRDRGRjNBIi8+PHRleHQgeD0iNTgiIHk9IjM0IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjciIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNGNEYzRUUiPmRlemt5PC90ZXh0Pjwvc3ZnPg==") !important;
height: 48px !important;
width: auto !important;
}
/* carbon background — remove the authentik forest */
.pf-c-background-image, .pf-c-background-image__src,
ak-flow-executor, .ak-flow-card-background {
background: #0A0A0A !important;
}
img.pf-c-background-image__src, .pf-c-background-image__src { display: none !important; }
/* signal-green primary button + links */
.pf-c-background-image, .pf-c-background-image__src { background: #0A0A0A !important; }
img.pf-c-background-image__src { display: none !important; }
.pf-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary,
.pf-v6-c-button.pf-m-primary {