Toggle Dark Mode

[hipstersmoothie]

Issue:

What I did

Added a Toggle dark mode button to the menu.

• Need to be able to set the UI back to the configured theme. Currently it sets it back to the light them

  • Now during initialization I save the configure theme as the lightTheme so it doesn't get overwritten

• Initial loading UI still renders with light mode. Is there a way to set this so the use doesn't see light mode flash for a second?

@shilman @ndelangen Is this something you would include?

Follow Up PRs to include:

- configure the dark theme via settings Add this to the PR as well. You can configure the darkTheme

How to test

• Is this testable with Jest or Chromatic screenshots? yes
• Does this need a new example in the kitchen sink apps? no
• Does this need an update to the documentation? yes

If your answer is yes to any of these, please make sure to include it in your PR.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[shilman]

@hipstersmoothie Love this! We're just about to ship 5.0 so this would be a 5.1 feature, but I'm game to get it integrated.

[codecov]

Codecov Report

Merging #5841 into next will decrease coverage by 0.04%.
The diff coverage is 7.69%.

@@            Coverage Diff             @@
##             next    #5841      +/-   ##
==========================================
- Coverage   34.31%   34.27%   -0.05%     
==========================================
  Files         648      648              
  Lines        9461     9473      +12     
  Branches     1370     1348      -22     
==========================================
  Hits         3247     3247              
- Misses       5596     5604       +8     
- Partials      618      622       +4

Impacted Files	Coverage Δ
lib/ui/src/settings/shortcuts.js	93.84% <ø> (ø)	⬆️
lib/ui/src/core/layout.js	14.03% <0%> (-2.64%)	⬇️
lib/ui/src/core/shortcuts.js	18.44% <0%> (-0.37%)	⬇️
lib/ui/src/containers/nav.js	11.76% <50%> (-0.74%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 51be1fc...76d9961. Read the comment docs.

[hipstersmoothie]

Awesome! That's fine with me 🚀

[hipstersmoothie]

As per conversations on twitter, this works better as a plugin. I will work with @ndelangen to add more addon APIs for the menu and shortcuts.

Here is the addon!

https://github.com/hipstersmoothie/storybook-dark-mode