Dark Mode per User

[jerodwaldman]

Describe the feature:
We currently use Spaces to split our visualizations and dashboards up between internal organizations. Some people prefer the standard white, others prefer dark, so having it User specific vs. Space specific would be extremely beneficial.

Describe a specific use case for the feature:
I prefer the dark theme, but my coworker prefers the standard white theme. Our space is set to dark theme, so he has no options to change to the other theme color unless we flip the entire space to it.

[rashmivkulkarni]

@legrego enhancement request ?

[legrego]

Yep! This is blocked on #17888

[elasticmachine]

Pinging @elastic/kibana-platform (Team:Platform)

[qualispec]

I, too, would love this feature, for the exact same reasons.

[cyberhuman]

Another option would be to apply dark mode automatically using CSS media queries.

[wwalker]

Please, please, please :-)

I get lighting triggered migraines and kibana is one of the few things I haven't found a way to darken; and, I use kibana a lot.

[NadeemAfana]

In the meantime, you can use the following javascript which switches between light and dark modes.

Simply create a new bookmark on your browser's toolbar with the following code

javascript:(function(){function b(e){var a=$("<link>");$("head").append(a);a.attr({rel:"stylesheet",type:"text/css",href:e})}var d=!0;$("link[href*=dark], link[href*=light]").each(function(e,a){var c="LINK"==a.nodeName?$(this).attr("href"):$(this).attr("src");0<=c.indexOf("light")?(b(c.replace("light","dark")),d=!0):(b(c.replace("dark","light")),d=!1)});$("head").append('<style id="custom-css">.kbnDocViewer pre, .kbnDocViewer .kbnDocViewer__value{color: #000;}</style>'.replace("000",d?"fff":"000"));})()

and click on it once Kibana loads. I tested it and it works on v7.8.0. Please note not everything will flip 100%, such as charts background color. Also, this could break with future releases.

For Kibana 7.9.1, use the following:

javascript:(function(){function e(e){var r=$("<link>");$("head").append(r),r.attr({rel:"stylesheet",type:"text/css",href:e})}var r=1;$("link[href*=dark], link[href*=light]").each((function(n,t){var a="LINK"==t.nodeName?$(this).attr("href"):$(this).attr("src");a.indexOf("light")>=0?(e(a.replace("light","dark")),r=1):(e(a.replace("dark","light")),r=0)}));var n=[["000","fff"],["FFF","1D1E24"],["e6f0f8","343741"],["343741","DFE5EF"],["fafbfd","1e1e25"],["fff","08334a"],["0, 86, 144, 0.1","22, 135, 196, 0.1"]],t="<style>.kbnDocViewer .kbnDocViewer__value,.kbnDocViewer pre{color:#x1}.dscWrapper__content{background-color:#x2}.dscFieldList--popular,.dscFieldListHeader{background-color:#x3}.kbn-table%20dl.source%20dt,kbn-table%20dl.source%20dt,tbody[kbn-rows]%20dl.source%20dt{background-color:rgba(x7);color:#x4}.kbnDocTableDetails__row>td%20tr:hover%20td{background:#x5}.kbnDocTableRowFilterButton,.kbnDocTable__row--highlight%20.kbnDocTableRowFilterButton{background-color:#x6}.kbnQueryBar__wrap{max-width:100%}</style>";for(let%20e=0;e<7;e++)t=t.replace("x"+(e+1),r?n[e][1]:n[e][0]);$("head").append(t);})()

[gimmic]

It makes sense to make this a personal(user) preference rather than a shared space setting.

We all might work from a shared space, but prefer different themes individually.

[twig1977]

Have had the same feedback from the IT teams stating that it is a personal preference and should be part of user preferences rather than space settings.

[forty]

This feature would be really great, especially because it's very hard to find an agreement on which theme to use. Some people really don't like light themes in general, and the dark theme is very hard to read, as some menus for example are not-so-light grey police on slightly darker background, which make it nearly unreadable.

[poifir]

We're having the same problem in our company - so a "per user setting" would be highly preferred :)

[christianhuening]

Please do this, we just have bought a couple of licenses and people are already fighting over whether the dark or the light side is the best :)

[EricPSU]

Is there a reason why this ticket hasn't been merged into 17888? That ticket seems to include this scope and I'd prefer to only track one ticket :)

[legrego]

@EricPSU I've thought about merging it into #17888 before, but I decided to leave it here for now because it has so much interest, and is probably easier to search for in our sea of 5k+ open issues.

There's also a chance that we will tackle some of these settings before others, so having dark mode tracked separately lets us send a clearer signal when this specific setting is configurable on a per-user basis. If there wasn't so much interest in this specific setting, then I'd probably choose to close this in favor of #17888.

That said, I'm happy to consolidate if there's more interest in doing so.

[EricPSU]

@legrego I support whatever gets per user themes implemented quicker :) I'd be happy with a magic toggle under the user's profile menu for dark mode as a temporary placement of the preference until there is a full fledged user preferences view.

[jugsofbeer]

We are still waiting for a "per user setting" .

We have over a dozen spaces, but 300 users, not everyone wants to take the default dark mode setting we put in for a space.

[DavidStammbach]

I would also like to request that feature! I know it's only a minority of developers that uses light mode, but I just can't adjust to dark mode... Would be really nice!

[legrego]

This is a popular issue, and I know it's been a while since we've given an update. While I can't offer a timeline on when this will be implemented, I can say that we are actively working on a number of prerequisites to add support for this and many other user-level customizations.

More concretely, we are introducing a concept called "User Profiles", which will, among other things:

• Give us a unique user identifier for each individual (hint: usernames are not necessarily unique!).
• Give us a mechanism to securely persist user-specific data alongside each user's profile.

This initiative spans multiple products (👋 Elasticsearch), but you can track the work Kibana is doing in this space via the Feature:Security/User Profile label.

[geekpete]

Relevant investigation into UI settings client to allow per-user UI specific settings such as dark mode was recently completed, summary here: #146295 (comment)

New issue to track this UI client is here:
#150360

[legrego]

Thanks everyone for your interest in this issue. I'm happy to report that this has been resolved by @kc13greiner via #151507. If all goes according to plan, you'll be able to find this in an upcoming release!