spike(nifi): Customize the theme

[NickLarsenNZ]

Very rough colour selection:

To test quicker:

stackable-theme.css

/*
 * Stackable Data Platform theme overrides for the NiFi 2.x web UI.
 *
 * These re-assign the CSS custom properties that NiFi's Angular Material theme
 * is built on. They are resolved live (same mechanism as NiFi's dark-mode
 * toggle), so appending this file to the already-compiled styles-<hash>.css
 * re-themes the UI without recompiling the frontend.
 *
 * Mirrors patch 0008-Apply-Stackable-Data-Platform-theme-to-web-UI.patch.
 */

/* ----- Light mode ----- */
:root {
    /* primary -> Stackable blue (#1680bd) */
    --md-ref-palette-primary-0: #000000;
    --md-ref-palette-primary-10: #001e30;
    --md-ref-palette-primary-20: #00344f;
    --md-ref-palette-primary-25: #003f5f;
    --md-ref-palette-primary-30: #004b70;
    --md-ref-palette-primary-35: #005a86;
    --md-ref-palette-primary-40: #1680bd;
    --md-ref-palette-primary-50: #2f93cf;
    --md-ref-palette-primary-60: #5aa9da;
    --md-ref-palette-primary-70: #82c0ea;
    --md-ref-palette-primary-80: #a6d3f3;
    --md-ref-palette-primary-90: #cfe7fa;
    --md-ref-palette-primary-95: #e7f3fd;
    --md-ref-palette-primary-98: #f4faff;
    --md-ref-palette-primary-99: #fafdff;
    --md-ref-palette-primary-100: #ffffff;
    /* secondary -> Stackable magenta (#b80068 / #d4107d) */
    --md-ref-palette-secondary-0: #000000;
    --md-ref-palette-secondary-10: #3d0021;
    --md-ref-palette-secondary-20: #650038;
    --md-ref-palette-secondary-25: #790043;
    --md-ref-palette-secondary-30: #8e004e;
    --md-ref-palette-secondary-35: #a3005a;
    --md-ref-palette-secondary-40: #b80068;
    --md-ref-palette-secondary-50: #d4107d;
    --md-ref-palette-secondary-60: #e2569f;
    --md-ref-palette-secondary-70: #ee85bc;
    --md-ref-palette-secondary-80: #f7b3d6;
    --md-ref-palette-secondary-90: #ffd9e9;
    --md-ref-palette-secondary-95: #ffecf2;
    --md-ref-palette-secondary-98: #fff8fa;
    --md-ref-palette-secondary-99: #fffbfc;
    --md-ref-palette-secondary-100: #ffffff;
    /* tertiary -> Stackable accent blue (#7ca8d3) */
    --md-ref-palette-tertiary-0: #000000;
    --md-ref-palette-tertiary-10: #0d1f30;
    --md-ref-palette-tertiary-20: #1f3a52;
    --md-ref-palette-tertiary-25: #284763;
    --md-ref-palette-tertiary-30: #315473;
    --md-ref-palette-tertiary-35: #3a6184;
    --md-ref-palette-tertiary-40: #436f96;
    --md-ref-palette-tertiary-50: #5d88af;
    --md-ref-palette-tertiary-60: #7ca8d3;
    --md-ref-palette-tertiary-70: #9cc0e0;
    --md-ref-palette-tertiary-80: #bdd6ec;
    --md-ref-palette-tertiary-90: #deeaf7;
    --md-ref-palette-tertiary-95: #eef4fb;
    --md-ref-palette-tertiary-98: #f8fbfe;
    --md-ref-palette-tertiary-99: #fcfdff;
    --md-ref-palette-tertiary-100: #ffffff;
    /* error -> Stackable red (#dc2626 / #ef4444) */
    --md-ref-palette-error-25: #7f1d1d;
    --md-ref-palette-error-30: #991b1b;
    --md-ref-palette-error-35: #b91c1c;
    --md-ref-palette-error-40: #dc2626;
    --md-ref-palette-error-50: #ef4444;
    --md-ref-palette-error-60: #ef4444;
    --md-ref-palette-error-70: #f87171;
    --md-ref-palette-error-80: #f87171;
    --md-ref-palette-error-90: #fca5a5;
    --md-ref-palette-error-95: #fecaca;
    --md-ref-palette-error-98: #fee2e2;
    --md-ref-palette-error-99: #fef2f2;
    /* NiFi status colors */
    --nf-success-default: #16a34a;
    --nf-success-variant: #1680bd;
    --nf-caution-default: #d97706;
    --nf-error-variant: #dc2626;
}

/* ----- Dark mode ----- */
.darkMode {
    /* primary -> Stackable blue (#1680bd) */
    --md-ref-palette-primary-0: #000000;
    --md-ref-palette-primary-10: #001e30;
    --md-ref-palette-primary-20: #00344f;
    --md-ref-palette-primary-25: #003f5f;
    --md-ref-palette-primary-30: #004b70;
    --md-ref-palette-primary-35: #005a86;
    --md-ref-palette-primary-40: #1680bd;
    --md-ref-palette-primary-50: #2f93cf;
    --md-ref-palette-primary-60: #5aa9da;
    --md-ref-palette-primary-70: #82c0ea;
    --md-ref-palette-primary-80: #a6d3f3;
    --md-ref-palette-primary-90: #cfe7fa;
    --md-ref-palette-primary-95: #e7f3fd;
    --md-ref-palette-primary-98: #f4faff;
    --md-ref-palette-primary-99: #fafdff;
    --md-ref-palette-primary-100: #ffffff;
    /* secondary -> Stackable magenta (#b80068 / #d4107d) */
    --md-ref-palette-secondary-0: #000000;
    --md-ref-palette-secondary-10: #3d0021;
    --md-ref-palette-secondary-20: #650038;
    --md-ref-palette-secondary-25: #790043;
    --md-ref-palette-secondary-30: #8e004e;
    --md-ref-palette-secondary-35: #a3005a;
    --md-ref-palette-secondary-40: #b80068;
    --md-ref-palette-secondary-50: #d4107d;
    --md-ref-palette-secondary-60: #e2569f;
    --md-ref-palette-secondary-70: #ee85bc;
    --md-ref-palette-secondary-80: #f7b3d6;
    --md-ref-palette-secondary-90: #ffd9e9;
    --md-ref-palette-secondary-95: #ffecf2;
    --md-ref-palette-secondary-98: #fff8fa;
    --md-ref-palette-secondary-99: #fffbfc;
    --md-ref-palette-secondary-100: #ffffff;
    /* tertiary -> Stackable accent blue (#7ca8d3) */
    --md-ref-palette-tertiary-0: #000000;
    --md-ref-palette-tertiary-10: #0d1f30;
    --md-ref-palette-tertiary-20: #1f3a52;
    --md-ref-palette-tertiary-25: #284763;
    --md-ref-palette-tertiary-30: #315473;
    --md-ref-palette-tertiary-35: #3a6184;
    --md-ref-palette-tertiary-40: #436f96;
    --md-ref-palette-tertiary-50: #5d88af;
    --md-ref-palette-tertiary-60: #7ca8d3;
    --md-ref-palette-tertiary-70: #9cc0e0;
    --md-ref-palette-tertiary-80: #bdd6ec;
    --md-ref-palette-tertiary-90: #deeaf7;
    --md-ref-palette-tertiary-95: #eef4fb;
    --md-ref-palette-tertiary-98: #f8fbfe;
    --md-ref-palette-tertiary-99: #fcfdff;
    --md-ref-palette-tertiary-100: #ffffff;
    /* error -> Stackable red (#dc2626 / #ef4444) */
    --md-ref-palette-error-25: #7f1d1d;
    --md-ref-palette-error-30: #991b1b;
    --md-ref-palette-error-35: #b91c1c;
    --md-ref-palette-error-40: #dc2626;
    --md-ref-palette-error-50: #ef4444;
    --md-ref-palette-error-60: #ef4444;
    --md-ref-palette-error-70: #f87171;
    --md-ref-palette-error-80: #f87171;
    --md-ref-palette-error-90: #fca5a5;
    --md-ref-palette-error-95: #fecaca;
    --md-ref-palette-error-98: #fee2e2;
    --md-ref-palette-error-99: #fef2f2;
    /* dark-mode surfaces -> Stackable navy ladder (#0e1822 -> #3a5876) */
    --md-ref-palette-neutral-4: #0e1822;
    --md-ref-palette-neutral-6: #122230;
    --md-ref-palette-neutral-10: #182c3d;
    --md-ref-palette-neutral-12: #1e3548;
    --md-ref-palette-neutral-17: #243f54;
    --md-ref-palette-neutral-20: #2a4562;
    --md-ref-palette-neutral-22: #2a4562;
    --md-ref-palette-neutral-24: #2f4a68;
    --md-ref-palette-neutral-25: #3a5876;
    --md-ref-palette-neutral-30: #3a5876;
    /* NiFi status colors + navy surfaces */
    --nf-success-default: #22c55e;
    --nf-success-variant: #1680bd;
    --nf-caution-default: #f59e0b;
    --nf-error-variant: #ef4444;
    --nf-even: #1e3548;
    --nf-canvas-background: #122435;
}

Dockerfile

# Throwaway preview image: applies the Stackable theme to an already-built NiFi
# image by appending CSS-variable overrides to the compiled stylesheet, instead
# of recompiling the Angular frontend.
#
# The stylesheet lives at:
#   /stackable/nifi/lib/nifi-server-nar-<v>.nar
#     -> META-INF/bundled-dependencies/nifi-ui-<v>.war
#       -> styles-<hash>.css
# The NiFi runtime image ships only a JRE, so a small JDK stage does the
# (un)zipping with `jar`.
#
# Build (run from this directory):
#   docker build -t nifi:2.9.0-stackable-theme .
# Run, then hard-refresh the browser (Ctrl/Cmd+Shift+R) to bypass cached CSS.

ARG NIFI_IMAGE=oci.stackable.tech/sdp/nifi:2.9.0-stackable0.0.0-dev

FROM ${NIFI_IMAGE} AS nifi

# --- Patcher: repackage the NAR/WAR with the themed stylesheet ---
FROM docker.io/library/eclipse-temurin:21-jdk AS patcher
WORKDIR /patch
COPY stackable-theme.css ./stackable-theme.css
COPY --from=nifi /stackable/nifi/lib/ ./lib/
RUN set -eux; \
    nar="$(ls lib/nifi-server-nar-*.nar)"; \
    mkdir nar; (cd nar && jar xf "/patch/${nar}"); \
    war="$(cd nar && ls META-INF/bundled-dependencies/nifi-ui-*.war)"; \
    mkdir nar/war; (cd nar/war && jar xf "/patch/nar/${war}"); \
    styles="$(cd nar/war && ls styles-*.css)"; \
    echo ">>> appending Stackable overrides to ${styles} in ${war}"; \
    cat stackable-theme.css >> "nar/war/${styles}"; \
    (cd nar/war && jar uf "/patch/nar/${war}" "${styles}"); \
    (cd nar && jar uf "/patch/${nar}" "${war}")
# /patch/lib/nifi-server-nar-*.nar now holds the themed stylesheet.

# --- Final: same NiFi image, themed NAR swapped in ---
FROM ${NIFI_IMAGE}
USER 0
COPY --from=patcher --chown=1000:0 /patch/lib/ /stackable/nifi/lib/
# Ensure the modified NAR is re-exploded on first start (work dir is normally
# empty in a freshly built image; this is just belt-and-braces).
RUN rm -rf /stackable/nifi/work/* 2>/dev/null || true
USER 1000

docker build

docker build -t nifi:2.9.0-stackable-theme .