Why do two different themes appear on the same interface?

[Strke]

Today, I pulled and deployed the latest Jaeger image on my server's Docker instance and accessed the frontend via port 16686 on my laptop, but the page's theme appears to be a mix of dark and light modes. How can I adjust the settings to ensure the entire theme uses the dark style?

[jkowall]

Hi @Strke, the dark top navigation in your screenshot is expected: the nav bar always uses the dark menu style, even when the rest of Jaeger UI is in light mode.

To switch the whole app to dark mode, use the moon/sun theme button in the top-right navigation. The choice is stored per browser/origin in localStorage as jaeger-ui-theme=dark, so you can also force it from DevTools with:

localStorage.setItem("jaeger-ui-theme", "dark");
location.reload();

If you are using a custom UI config file, make sure the theme selector has not been disabled:

{
  "themes": { "enabled": true }
}

There is not currently a Docker/server config option to force dark mode for every user. The initial value is picked from the saved browser preference, then the OS prefers-color-scheme, then light mode.

If you already selected dark mode and still see white panels, that is likely a UI bug on that page; in that case, the exact Jaeger image tag, browser, and page URL would help us reproduce it.

[jkowall]

@Strke just to confirm, I ran the newest Docker image as well, and I do not see this behavior at all. Can you hit the About Jaeger and check the Jaeger version you are running? The UI should look more like this in terms of the top navigation bar.

Notice the toggle on the right...