Dark theme #4702

BigFunger · 2015-08-18T19:24:54Z

Implements the dark theme

Moves hard-coded values in less files into named variables
Creates theme switching and adds a dark theme
- Adds default value to 'theme' config values
- Adds logic to the application chrome that sets a class on the application node
- Adds a new variable file and css overrides for the dark theme

Notes: This is a first attempt at the dark theme. I think that the implementation of the theme itself may be a bit heavy handed, as it duplicates a lot of existing css/less. Also, the color decisions are my first attempt and should be easy enough to tweak.

… variables

Conflicts: src/plugins/kibana/public/kibana.js src/ui/public/config/defaults.js

glaszig · 2015-08-19T14:00:05Z

👍 thank you for your effort. this needs to happen.

tbragin · 2015-08-26T06:09:23Z

Really well done!

A couple of comments:

I was a bit surprised to see the theme only apply to dashboards; I figured it'd apply to other screens as well.
I was also surprised that the time picker background wasn't dark, even on the dashboard screen.
I don't love the pink color for hyperlinks; I think they are too bright.
Some white lines for dividers seem unexpectedly bright as well (e.g. the one at the top dividing the navigation/filter elements from charts, the ones inside the pie charts dividing the slices)

spalger · 2015-08-26T15:44:02Z

@tbragin we did explore theming everything, the solution was going to be pretty intense to implement and we decided that it was probably smarter to wait until we are ready to do a UX/UI deep-dive.

tbragin · 2015-08-26T15:58:38Z

@spalger If our intent is to only darken the Dashboard, let's make it clear in Settings. Right now it says:

theme (Default: bright) 
Application theme. Valid values are "dark" and "bright"

When I changed the setting from "bright" to "dark", I expected my UI to flip to dark. It didn't happen, so I thought something was broken. By luck I eventually clicked to Dashboard and saw that it was dark, but I was about to file a bug otherwise.

Also, can we call the themes "light" and "dark", as we did in Kibana 3? I'm not sure what "bright" is - I would expect it to be hot-pink ;)

cc: @alt74

spalger · 2015-08-26T17:15:06Z

Hahaha, I totally agree. The config description should definitely be updated.

rashidkpc · 2015-08-31T14:15:04Z

I'd prefer to add a toggle on the dashboard and save this on a per-dashboard basis. The global setting could be treated as a default, but this needs to be toggle-able adhoc

rashidkpc · 2015-09-01T16:44:26Z

Few other comments:

The table is a different color, but nothing else is. Makes the table look like its in a container within the panel container, but everything else is edge-to-edge
The spy arrow also looks like it was optimized to blend with the map, but maps are rare on dashboards. I'd leave the spy arrow tab the same color as the panel background

spalger · 2015-09-02T20:27:20Z

src/plugins/kibana/public/dashboard/index.js

+      dash: function (savedDashboards, config) {
+        return savedDashboards.get()
+        .then(function (dash) {
+          dash.darkTheme = !!config.get('dashboard:defaultDarkTheme');


~~This should probably be implemented in the savedDashboards service, or specifically in the SavedDashboard constructor~~ See #4702 (comment), this should probably be removed

alt74 · 2015-09-04T18:12:34Z

Looks great! We just walked through the entire set up. great job @BigFunger I wish we could change the timeline drawer background from white to dark as well. Maybe next release :) @rashidkpc

tbragin · 2015-09-10T19:52:03Z

LGTM! Very nice work, @BigFunger

spalger · 2015-09-10T22:27:19Z

jenkins, test this

BigFunger · 2015-09-14T18:16:18Z

Most recent screenshots:

Main Layout

Add Visualization Options

Toggle Theme

Add Filter Prompt

Filter List

BigFunger · 2015-09-14T18:16:53Z

@alt74 Please see the above screenshots and advise on colors. Thanks!

alt74 · 2015-09-14T21:07:23Z

Quick preview of updated dark theme. @rashidkpc please review...

I removed the background behind the Kibana logo in the new dark theme. Lot's of grays right next to each other. In the light theme the Discover tab and Logo background almost match.

BigFunger · 2015-09-14T22:08:18Z

Applied what changes that I could out of those specified. The result is below. I can't do anything to elements that are outside of the 'application' node with the functionality as it stands now.
@rashidkpc, comments?

BigFunger · 2015-09-15T14:52:02Z

Most recent iteration:

brighter panel headings

darker panel headings

BigFunger · 2015-09-15T15:35:16Z

After discussion with @alt74

BigFunger · 2015-09-15T15:35:34Z

After discussion with @rashidkpc

BigFunger · 2015-09-15T15:59:45Z

Slightly darker text in panel

BigFunger · 2015-09-15T16:10:37Z

Darker text still

Dark theme

spalger · 2015-09-15T20:23:50Z

🎊 🎊 🎊 🎊 🎊
💃 💃 💃 💃 💃

hackforfood-uk · 2015-11-19T12:03:26Z

Hello,

This is just what I am looking for, without sounding silly how do I apply this?

Cheers
Pete.

tbragin · 2015-11-19T13:58:56Z

@petegriggs Check the "Dashboard" section in the docs:
https://www.elastic.co/guide/en/kibana/current/dashboard.html#dashboard-getting-started

ltagliamonte · 2015-12-08T08:12:01Z

Is it possible to cherry pick this in Kibana 4.1.3 i can't update Kibana because of the ES version. I'm using AWS ES service.

davison · 2015-12-08T13:17:46Z

I was about to make exactly the same request as it's going to take us a while to migrate our ES to 2.

Is it "backportable" to 4.1 in some way (even if it means a bit of a hack)?

spalger · 2015-12-08T18:34:49Z

@ltagliamonte @davison I just did a quick check and it looks like 104 files are conflicting. If you would like to take a stab at backporting the changes though you can get started with:

# checkout the kibana source repo somewhere
git checkout git@github.com:elastic/kibana.git
cd kibana
curl https://patch-diff.githubusercontent.com/raw/elastic/kibana/pull/4702.patch | git apply

edit: added a bit about checking out the repo, if you don't have Kibana setup for development you probably want to check out the dev environment setup guide

BigFunger added 9 commits August 7, 2015 09:59

Modified truncate.less to use less variable

0e55fd0

Added @white and @black variables, and changed magic numbers to those…

2091a21

… variables

Moved around a bunch of less variables

5059e31

Changes to table styles

d64207f

Moved hard coded values into variables

84f3fe5

Restored light theme

95ae6c9

Started creating the dark theme hacks

40ebabe

Finished first attempt at dark theme

7f7a5c0

Merge branch 'master' into dark-theme-merge-test

0293179

Conflicts: src/plugins/kibana/public/kibana.js src/ui/public/config/defaults.js

BigFunger added discuss v4.3.0 labels Aug 18, 2015

alt74 self-assigned this Aug 18, 2015

simianhacker mentioned this pull request Aug 19, 2015

Dashboard background schemes #2906

Closed

Removed old commented values from less files

7c3f7ac

BigFunger assigned BigFunger and unassigned alt74 Aug 31, 2015

BigFunger added 2 commits September 1, 2015 13:03

Modified link color

d44415d

Style tweeks and saving theme per dashboard

247b5b6

BigFunger assigned lukasolson and unassigned BigFunger Sep 2, 2015

spalger reviewed Sep 2, 2015
View reviewed changes

BigFunger force-pushed the dark-theme branch from f4da987 to 9f5d454 Compare September 3, 2015 20:15

rashidkpc assigned alt74 and unassigned BigFunger Sep 4, 2015

Merge branch 'master' of github.com:elastic/kibana into dark-theme

c6c1284

rashidkpc added v4.2.0 and removed v4.3.0 labels Sep 14, 2015

[dashboard][dark-theme] - color tweeks

8eced64

BigFunger added a commit that referenced this pull request Sep 15, 2015

Merge pull request #4702 from BigFunger/dark-theme

e22009b

Dark theme

BigFunger merged commit e22009b into elastic:master Sep 15, 2015

tbragin mentioned this pull request Sep 21, 2015

Documentation for Kibana 4.2 #4369

Closed

8 tasks

palecur mentioned this pull request Sep 21, 2015

Adds documentation on dark theme #4993

Merged

rashidkpc mentioned this pull request Nov 5, 2015

Update dashboard.asciidoc #5261

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark theme #4702

Dark theme #4702

BigFunger commented Aug 18, 2015

glaszig commented Aug 19, 2015

tbragin commented Aug 26, 2015

spalger commented Aug 26, 2015

tbragin commented Aug 26, 2015

spalger commented Aug 26, 2015

rashidkpc commented Aug 31, 2015

rashidkpc commented Sep 1, 2015

spalger Sep 2, 2015

alt74 commented Sep 4, 2015

tbragin commented Sep 10, 2015

spalger commented Sep 10, 2015

BigFunger commented Sep 14, 2015

BigFunger commented Sep 14, 2015

alt74 commented Sep 14, 2015

BigFunger commented Sep 14, 2015

BigFunger commented Sep 15, 2015

BigFunger commented Sep 15, 2015

BigFunger commented Sep 15, 2015

BigFunger commented Sep 15, 2015

BigFunger commented Sep 15, 2015

spalger commented Sep 15, 2015

hackforfood-uk commented Nov 19, 2015

tbragin commented Nov 19, 2015

ltagliamonte commented Dec 8, 2015

davison commented Dec 8, 2015

spalger commented Dec 8, 2015

Dark theme #4702

Dark theme #4702

Conversation

BigFunger commented Aug 18, 2015

glaszig commented Aug 19, 2015

tbragin commented Aug 26, 2015

spalger commented Aug 26, 2015

tbragin commented Aug 26, 2015

spalger commented Aug 26, 2015

rashidkpc commented Aug 31, 2015

rashidkpc commented Sep 1, 2015

spalger Sep 2, 2015

Choose a reason for hiding this comment

alt74 commented Sep 4, 2015

tbragin commented Sep 10, 2015

spalger commented Sep 10, 2015

BigFunger commented Sep 14, 2015

BigFunger commented Sep 14, 2015

alt74 commented Sep 14, 2015

BigFunger commented Sep 14, 2015

BigFunger commented Sep 15, 2015

BigFunger commented Sep 15, 2015

BigFunger commented Sep 15, 2015

BigFunger commented Sep 15, 2015

BigFunger commented Sep 15, 2015

spalger commented Sep 15, 2015

hackforfood-uk commented Nov 19, 2015

tbragin commented Nov 19, 2015

ltagliamonte commented Dec 8, 2015

davison commented Dec 8, 2015

spalger commented Dec 8, 2015