Getting "Dark Theme" to Load

Elastic Stack Kibana
1

Hey all,

Is anyone having an issue where Kibana is failing to load the dark theme despite the box being checked and even directly loading the URL that includes the dark theme preference option?

The Options JSON reads:

{
"darkTheme": true
}

But the dashboard still fails to load with the dark theme...
Have tried clearing the cache, restarting the computer, and even on multiple browsers.

This is on Kibana 4.3.

Anyone else with this issue?

2

Any errors in your developer console? What exactly is happening when you enable the dark theme, is the Dashboard just using the regular theme instead, or does it error out when you try to use the dark theme?

3

Hey Bargs,

No errors on the developer console - the dashboard just ends up using the regular theme.

Some other weird behavior:

  • Going to "Dashboard" and enabling the dark theme there turns it on

  • Navigating to the saved dashboard now is in the dark theme

  • Saving the dashboard and reloading it in that tab reloads it as a dark theme

  • URL appears to enable the dark theme

  • Hyperlinking that URL from an external website loads the saved dashboard with the light theme despite the dark theme being enabled in the settings and in the URL

4

After hyperlinking to the dashboard, what happens if you reload the page? Is it still light or does it change to dark? When loading the light page, could you open the Network tab in developer tools and look at the request for the dashboard object? It should be a request to _mget with a request payload that looks something like this: {"docs":[{"_index":".kibana","_type":"dashboard","_id":"New-Dashboard"}]}

Looking at the json response for that request, does it also have darkTheme: true in optionsJSON?

What happens if you enable the dark theme globally in Settings -> Advanced -> dashboard:defaultDarkTheme?

5
  • After hyperlinking and reloading, it still loads light.
  • Dashboard Object Request does include darktheme true in the options json.
  • Advanced Settings have the dark theme enabled

Dashboard Request Object:
{"docs":[{"_index":".kibana","_type":"config","_id":"4.3.0","_version":3,"found":true,"_source":{"buildNum":9369,"defaultIndex":"fire_logs-*","dashboard:defaultDarkTheme":true}}]}

Advanced Settings Return
dashboard:defaultDarkTheme --> true

6

Here's the weird thing, if I click dashboard from the menu, it loads dark at this point.
If I load the saved dashboard from this point, it loads dark.

If I open an incognito window and use the direct link to the dashboard in the address bar, it also loads dark. The issue only seems to happen on external hyperlinking through an HTML form button.

7

What's more, direct hyperlinking using <a href="URL">Text</a> doesn't cause the light load.

Specifically

<form target="_blank" action="URL">
    <input type="submit" value="Kibana">
</form>

Forces a light load...

8

I'll get around it using normal CSS styled HTML buttons.
This is still a pretty weird though

9

Wow, that's totally weird and totally reproducible. I created an issue on Github for it. Thanks for the clear steps to reproduce!

1 Like