Prefect 3.x doesn’t currently have a built-in setting for environment branding in the UI like a

DEV / TEST / PROD

banner, custom logo, or custom tab title. The only native UI toggle I found is hiding promotional content:

PREFECT_SERVER_UI_SHOW_PROMOTIONAL_CONTENT=false

So if you want users to immediately know which instance they’re viewing, the practical options are: 1. Use distinct hostnames This is the simplest and lowest-maintenance option: -

prefect-dev.company.internal

-

prefect-test.company.internal

-

prefect.company.internal

That at least makes the browser tab/address bar clearly different. 2. Put a banner in front of Prefect with a reverse proxy This is probably the best approach if you want something obvious without modifying Prefect itself. For example, with NGINX you could inject a visible environment banner above the app, or serve Prefect behind a small wrapper page. Even a colored top bar helps a lot: - red = production - yellow = test - green/blue = development 3. Serve a customized copy of the UI static files Prefect server does expose a

static_directory

setting for the UI, so you can point it at your own modified copy of the built frontend assets. That means you can change things like: - HTML

<title>

- add a banner to

index.html

- tweak CSS colors/text But this is a maintenance tradeoff: you’d likely need to reapply those changes after Prefect upgrades. A rough pattern would be:

bash
cp -r <prefect-ui-build-dir> /opt/prefect-ui-custom
# edit index.html / CSS
PREFECT_SERVER_UI_STATIC_DIRECTORY=/opt/prefect-ui-custom prefect server start

4. If you already front Prefect with another internal portal, label it there If users arrive through an internal landing page, ingress, or SSO portal, add strong environment labeling there too. My recommendation If you want something robust and low-effort: - use different hostnames - add a reverse-proxy banner/color strip per environment If you want, I can help with a concrete example for: - NGINX - Traefik - Kubernetes ingress - or a custom static-directory UI patch for Prefect Server Relevant docs: - Prefect docs - Prefect source code

Yes —

app-sidebar.tsx

exists in the source repo, but not in the runtime Prefect Docker image. What’s in the Docker image The image contains the built frontend assets, not the TypeScript source files. So you generally will not find:

text
.../ui-v2/src/components/ui/app-sidebar.tsx

inside the container. What you can find is the built UI under Prefect’s installed package path, typically something like:

text
/opt/prefect/lib/python3.10/site-packages/prefect/server/ui_v2_build/

Depending on the image/Python version, the Python path may vary slightly, but the important part is:

text
site-packages/prefect/server/ui_v2_build/

There is also an older UI path in some builds:

text
site-packages/prefect/server/ui_build/

Where the sidebar logo comes from in source In the Prefect source repository, the component is here:

text
ui-v2/src/components/ui/app-sidebar.tsx

The logo SVG in that component uses

fill="currentColor"

, so its color is inherited from CSS rather than hardcoded in the SVG paths. What actually controls the logo color The logo color is effectively controlled by the sidebar foreground color CSS variable, from the UI source CSS:

text
ui-v2/src/index.css

Specifically, the relevant variable is:

css
--sidebar-foreground

So if your goal is to change the logo color, the cleanest source-level change is usually to change that variable, or override the component styling. Practical implications If you are working inside the Prefect Docker image: - you probably cannot edit

app-sidebar.tsx

directly - you would need to modify compiled/minified frontend assets in

ui_v2_build

, which is fragile - the maintainable approach is to build your own custom image from Prefect source with your UI change Recommended approach 1. Clone Prefect source 2. Modify either: -

ui-v2/src/components/ui/app-sidebar.tsx

, or -

ui-v2/src/index.css

(

--sidebar-foreground

) 3. Rebuild the UI 4. Build your own Docker image with the modified frontend If you want to inspect the running container You can search for the built UI files with:

bash
find /opt/prefect -type d | grep ui

or:

bash
find /opt/prefect -type f | grep -E 'index.html|assets'

Bottom line - Source file location:

ui-v2/src/components/ui/app-sidebar.tsx

in the Prefect source repo - Runtime Docker location: built assets under something like

site-packages/prefect/server/ui_v2_build/

- Best file to change for color: usually the CSS variable behind

--sidebar-foreground

, not the SVG itself If you want, I can help you with either: - a Dockerfile for a custom Prefect image with a modified logo color, or - a quick hack to patch the built assets in an existing container.