FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

spike(nifi): Customize the theme by NickLarsenNZ · Pull Request #1557 · stackabletech/docker-images · GitHub

/ docker-images Public

spike(nifi): Customize the theme - #1557

Draft
NickLarsenNZ wants to merge 1 commit into
mainfrom
nifi-theme
ConversationCommits (1)ChecksFiles changed
Draft

spike(nifi): Customize the theme#1557
NickLarsenNZ wants to merge 1 commit into
mainfrom
nifi-theme

Conversation

NickLarsenNZ commented Jun 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

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 .

spike(nifi): Customize the theme
007c257 
Using Stackable-ish colours. Needs some work though.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

Back | FazBrowse Home | New Git URL