Implement global dark theme #28445

spalger · 2019-01-10T04:13:06Z

This PR updates the sass build process to automatically create two stylesheets for each of the uiExport.styleSheetPaths that point to a .scss file, one with the .light.css and one with the .dark.css extension. These stylesheets are loaded based on the theme:darkMode uiSetting. This setting is also exposed to the ui_app.pug template so that the loading screen can include accommodations for dark mode.

The dark mode settings from dashboard and the GIS app were removed, as they will now be replaced with the global dark mode setting.

I'm pushing this PR up so that design can take a look and make sure that we're loading the right styles to properly enable dark mode.

Currently we're intercepting imports for @elastic/eui/src/themes/k6/k6_colors_light and replacing them with imports for @elastic/eui/src/themes/k6/k6_colors_dark, which I think is what I discussed with @snide before the holidays but my memory is foggy.

elasticmachine · 2019-01-10T04:13:08Z

Pinging @elastic/kibana-platform

elasticmachine · 2019-01-10T04:13:09Z

Pinging @elastic/kibana-design

snide · 2019-01-10T07:17:40Z

@spalger Your memory is pretty good. There's two things that will need to happen as well:

we'll want to load (a yet to be built) dark theme .css file for bootstrap and
a dark theme .css file for legacy KUI.

These can be handled in styles.js likely based on the logic you have there. Obviously we still need to deliver those two files, but @cchaos and I are working on that bit next week.

Caroline, if you have time, can you just do a brief check of this PR and chat with spencer to make sure we have what we need. Looking at this briefly it looks like we have what we need.

cchaos · 2019-01-10T16:44:39Z

I checked out the branch using this method:

git checkout -b spalger-implement/global-dark-theme master
git pull https://github.com/spalger/kibana.git implement/global-dark-theme

And the switch to dark mode works, but I can't seem to get passed the Dashboard index page. Neither clicking on a sample data board nor the "Create" button does anything and it doesn't spit out an error either.

Also, is it possible to auto-refresh the browser for the user when they turn dark mode on?

As for the bootstrap dark theme, I just got the approval on my Final LESS conversion PR, so once I get that into master, I'll build out the bootstrap dark file.

cchaos · 2019-01-10T21:45:17Z

Since I was able to get my final LESS conversion PR into master, I threw up a WIP PR to address Bootstrap theming. #28528

Right now it compiles both bootstrap_light.less and bootstrap.dark.less into CSS files and imports both in the <head>. Since light comes after dark alphabetically, it's being imported after dark and therefore overriding so it's working ok.

However, maybe you can me figure out how to only import one or the other (or I can wait until this PR is done).

spalger · 2019-01-11T04:21:14Z

Thanks @cchaos and @snide!

@cchaos I decided to try pulling in your PR and adapting it to only load one style or the other. Got this working, and integrated with the other style loading. I also got the styles out of the JS and into their own CSS file which is a win win.

I can't seem to get passed the Dashboard index page

I believe the removal of the dashboard dark mode setting is probably causing something to fail, but I haven't tracked it down yet. Will give it a shot tomorrow.

Also, is it possible to auto-refresh the browser for the user when they turn dark mode on?

We could, but my personal opinion is that auto-refreshing the page is mildly dangerous. I'd prefer if the user was somehow warned or allowed to opt-out of auto-refreshing the page, but those don't seem worth implementing right now either. I'd much rather be able to transition between styles without reloading the page, which should be do-able after we get this in, and even easier once we have all the styles running through the same pipeline (no more less). Thoughts?

cchaos · 2019-01-11T16:10:07Z

Awesome, I will close my PR then.

We could, but my personal opinion is that auto-refreshing the page is mildly dangerous.

Yeah I hear that, since there's all those other settings too. I think it might just be making it more clear by way of text styling for people, like me, who didn't read the description text and therefore didn't read the need to manually refresh. (-_-)

snide · 2019-01-11T18:18:09Z

@spalger im just getting back to work from the offsite. My goal is to get you a KUI PR against this branch by early next week. This is pretty exciting.

elasticmachine · 2019-01-24T05:39:54Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…bal-dark-theme

elasticmachine · 2019-01-24T18:48:39Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

snide · 2019-01-24T21:28:13Z

While I'm reviewing ths... a quick one. I noticed that the login page starts as dark, even if Kibana is defaulted to light? Guessing maybe this is tied to Kibana needing the read the adv. setting from auth? If so, and it can't figure out the state, we should probably default to light for login if it can't flip.

snide

See comment above about the login screen, which needs to be fixed before this is merged.

THIS IS AWESOME.

I did a visual scan of the dark mode and did a scan of the code to make sure I understood how everything worked. Outside of the auth mentioned above, everything works as far as this PR is concerned. There is obviously a lot of work for @cchaos and I to do with the actual dark mode, but those will all be tangental PRs that can be handled after.

Last comment is that baring an auto refresh when you switch modes, we might want to consider popping a toast to say "Theme applied, please refresh your browser to take affect" if possible. I don't consider that critical and is more of a nice to have if it's easy.

Lastly, we'll want to fix #22089 eventually which has been hanging around for too long. Right now we can't flip assets based on mode, and while we don't have many of them, operationally that's the one blocker we have from a design perspective making dark mode awesome.

…bal-dark-theme

spalger · 2019-01-24T22:21:10Z

Last comment is that baring an auto refresh when you switch modes, we might want to consider popping a toast to say "Theme applied, please refresh your browser to take affect" if possible.

Done

spalger · 2019-01-24T22:29:53Z

I noticed that the login page starts as dark,

Oops, had the default set to false when auth was enabled. Fixed

…bal-dark-theme

elasticmachine · 2019-01-25T00:06:39Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-25T00:23:08Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

snide · 2019-01-25T01:38:31Z

Yay!

…

On Thu, Jan 24, 2019, 5:26 PM Spencer ***@***.*** wrote: Merged #28445 <#28445> into master. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#28445 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATzp-Pkp7wcNT40VtxdO-rQttt4BzCrks5vGl1UgaJpZM4Z4wQX> .

blacktop · 2019-04-29T16:02:50Z

@spalger is there a way to default to dark? via a kibana.yml feild etc?

spalger · 2019-05-07T21:17:52Z

@blacktop currently the only option is to override the uiSetting via kibana.yml, but this will prevent updating the setting via the UI.

uiSettings.overrides.theme:darkMode: true

spalger added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. WIP Work in progress Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc labels Jan 10, 2019

spalger requested a review from a team as a code owner January 10, 2019 04:13

This comment has been minimized.

Sign in to view

cchaos mentioned this pull request Jan 11, 2019

[WIP] Created dark theme Bootstrap #28528

Closed

1 task

cchaos mentioned this pull request Jan 15, 2019

Kuery autocomplete is not dark themed #21369

Closed

formgeist mentioned this pull request Jan 18, 2019

[APM] Support EUI lightmode #28928

Closed

This comment has been minimized.

Sign in to view

spalger mentioned this pull request Jan 18, 2019

[dashboard+gis] remove dark mode options #29017

Merged

7 tasks

This comment has been minimized.

Sign in to view

spalger force-pushed the implement/global-dark-theme branch from 90e8e53 to c556305 Compare January 18, 2019 22:22

This comment has been minimized.

Sign in to view

spalger force-pushed the implement/global-dark-theme branch 3 times, most recently from 0a5419e to 0b7f1f6 Compare January 18, 2019 23:24

spalger added the blocked label Jan 18, 2019

This comment has been minimized.

Sign in to view

chrisronline mentioned this pull request Jan 22, 2019

[Monitoring] Ensure we're prepared for dark mode #29100

Closed

weltenwort mentioned this pull request Jan 22, 2019

[Infra UI] Support dark theme and theme switching via the global Kibana settings #29106

Closed

simianhacker mentioned this pull request Jan 22, 2019

Adding support for Dark Mode #29133

Merged

spalger added 2 commits January 23, 2019 20:56

[uiRender/bootstrap] make try auth if necessary

e42935b

[visualize/editor] set reversed prop

4547ad3

spalger force-pushed the implement/global-dark-theme branch from b6ef01e to 4547ad3 Compare January 24, 2019 04:56

remove unnecessary change

3fd8bdf

spalger added review v7.0.0 and removed WIP Work in progress labels Jan 24, 2019

spalger requested a review from cchaos January 24, 2019 18:02

Merge branch 'master' of github.com:elastic/kibana into implement/glo…

6fd24bd

…bal-dark-theme

spalger requested a review from snide January 24, 2019 18:06

snide approved these changes Jan 24, 2019

View reviewed changes

spalger added 3 commits January 24, 2019 14:05

Merge branch 'master' of github.com:elastic/kibana into implement/glo…

bb6da1d

…bal-dark-theme

[styles] show toast when theme:darkMode is changed

8cb639d

[styles] update copy

2927f23

[uiRender] default dark mode to false

47b7d43

This comment has been minimized.

Sign in to view

Merge branch 'master' of github.com:elastic/kibana into implement/glo…

7ec05ff

…bal-dark-theme

spalger merged commit 879025e into elastic:master Jan 25, 2019

spalger deleted the implement/global-dark-theme branch January 25, 2019 01:26

jinmu03 added the release_note:enhancement label Feb 13, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement global dark theme #28445

Implement global dark theme #28445

spalger commented Jan 10, 2019 •

edited

Loading

elasticmachine commented Jan 10, 2019

elasticmachine commented Jan 10, 2019

This comment has been minimized.

snide commented Jan 10, 2019

cchaos commented Jan 10, 2019

cchaos commented Jan 10, 2019

spalger commented Jan 11, 2019

This comment has been minimized.

cchaos commented Jan 11, 2019

snide commented Jan 11, 2019

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

elasticmachine commented Jan 24, 2019

elasticmachine commented Jan 24, 2019

snide commented Jan 24, 2019

snide left a comment •

edited

Loading

spalger commented Jan 24, 2019

spalger commented Jan 24, 2019

This comment has been minimized.

elasticmachine commented Jan 25, 2019

elasticmachine commented Jan 25, 2019

snide commented Jan 25, 2019 via email

blacktop commented Apr 29, 2019

spalger commented May 7, 2019 •

edited

Loading

Implement global dark theme #28445

Implement global dark theme #28445

Conversation

spalger commented Jan 10, 2019 • edited Loading

elasticmachine commented Jan 10, 2019

elasticmachine commented Jan 10, 2019

This comment has been minimized.

snide commented Jan 10, 2019

cchaos commented Jan 10, 2019

cchaos commented Jan 10, 2019

spalger commented Jan 11, 2019

This comment has been minimized.

cchaos commented Jan 11, 2019

snide commented Jan 11, 2019

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

elasticmachine commented Jan 24, 2019

💚 Build Succeeded

elasticmachine commented Jan 24, 2019

💔 Build Failed

snide commented Jan 24, 2019

snide left a comment • edited Loading

Choose a reason for hiding this comment

spalger commented Jan 24, 2019

spalger commented Jan 24, 2019

This comment has been minimized.

elasticmachine commented Jan 25, 2019

💚 Build Succeeded

elasticmachine commented Jan 25, 2019

💚 Build Succeeded

snide commented Jan 25, 2019 via email

blacktop commented Apr 29, 2019

spalger commented May 7, 2019 • edited Loading

spalger commented Jan 10, 2019 •

edited

Loading

snide left a comment •

edited

Loading

spalger commented May 7, 2019 •

edited

Loading