Theming and branding¶

Customize AntFlow's appearance with configs.themes in your Helm values. This maps to THEMES in the browser's JavaScript configuration. Branding and color overrides do not require rebuilding the container image.

Logo and colors¶

To replace the AntFlow logo and name in the header, add a branding section inside configs.themes in your Helm values. It contains three settings:

• light.element: HTML that displays your logo when the UI is in light mode.
• dark.element: HTML that displays your logo when the UI is in dark mode.
• navbarHeight: the height of the top navigation bar, for example '60px'.

Here, element means an HTML snippet, such as an <img> tag pointing to your logo, optionally wrapped in a link. You can use the same snippet for both modes, or different images so the logo remains visible on light and dark backgrounds. Provide both elements: a missing element leaves the branding area empty in that mode. If you omit the entire branding section, the default AntFlow logo and name remain.

The HTML is sanitized, so use simple markup, not scripts or event handlers. For hosted logos, the URLs must be reachable from users' browsers; use HTTPS when AntFlow uses HTTPS.

The two <img> elements below define the header logos for light and dark mode. Replace their src URLs with your logo URLs, the enclosing links with your organization's website, and the alt text with your logo's description. The example URLs do not supply logo files.

configs:
  themes:
    branding:
      light:
        element: '<a href="https://example.com/"><img src="https://example.com/logo-light.png" height="50" alt="Example organization logo" /></a>'
      dark:
        element: '<a href="https://example.com/"><img src="https://example.com/logo-dark.png" height="50" alt="Example organization logo" /></a>'
      navbarHeight: '60px'
    light:
      $primaryColor: '#3b82f6 !default'
    dark:
      $primaryColor: '#60a5fa !default'

Embedded logos¶

To use a logo without hosting it, embed the image as a base64 data: URL. For a PNG logo on Linux, encode the file without line breaks:

base64 -w 0 logo.png

Replace BASE64_DATA with the command's output in both logo elements:

configs:
  themes:
    branding:
      light:
        element: '<img src="data:image/png;base64,BASE64_DATA" height="50" alt="Example organization logo" />'
      dark:
        element: '<img src="data:image/png;base64,BASE64_DATA" height="50" alt="Example organization logo" />'
      navbarHeight: '60px'

Theme variables¶

The light and dark maps override SCSS variables independently. Keys include the leading $, and values must be quoted strings containing valid Sass values. Unspecified variables retain their template defaults. !default is optional; a trailing semicolon is not required. Values can refer to other Sass variables, for example '$primaryColor'.

The generator only replaces variables already declared in the selected theme template; unknown keys have no effect. Check the templates for the UI version you deploy before adding overrides:

• Light theme template
• Dark theme template

Keep foreground and background colors readable in both modes, including hover, focus, and selected states. A user's light/dark choice is separate from these deployment-wide overrides.

Applying changes¶

The browser loads branding from config.js, while the UI container compiles color overrides into CSS at startup. After updating Helm values, restart the UI pods so that the CSS is regenerated, then reload the browser. Updating a mounted ConfigMap alone does not recompile the themes in an already running container.

If theme generation fails, check the UI container startup logs for invalid Sass values. If an override has no effect, verify its name against the selected template. Remove the themes overrides and restart the UI pods to restore the image's default appearance.