Add Dark Mode

[NicolasOmar]

Objective

Add dark mode in the following contexts

• App
• Storybook

To do so, I will need to investigate about possible alternatives which will need the lowest code maintenance, as well as a clean implementation.

---

Is blocked by: none

---

Tasks:

• Research
  • [x] Look for dark Bulma styles
  • [x] Look for style settings at OS or browser level
  • [x] Look for ThemeProvider articles in React (only from StyledComponents)
  • [x] Look for theme switcher (light/dark) in Storybook
• Development
  • [x] Implement it on Storybook
  • [x] Add theme swticher to its configuration
  • [x] Check themes are well implemented on all atom level components
  • [x] Check themes are well implemented on all molecule level components
  • [x] Check themes are well implemented on all organism level components
  • [x] Check themes are well implemented on all template level components
  • [x] Implement it on the App
  • [x] Change Bulma styling injection from calling the stylesheet to implementing the npm package
  • [x] Create an idea to toggle the mode for each user (by localStorage or by configurations maintained in a db)
  • [x] Implement mentioned idea above
  • [x] Add needed UT

[NicolasOmar]

Articles which I will be basing my investigation for this implementations

• Browser-level implementation
• Adapt Bulma with node-sass
• Theme switcher for Storybook

[NicolasOmar]

Bulma has been installed from its npm package and reused with node-sass to create style files for storybook and the public app Scripts have been included in the PR.

Used article

[NicolasOmar]

Have in mind that update react-scripts from 4.0.X to 5 could arise some build errors related to JSON object deconstruction. The way to solve that is to make the same deconstruction but as a JS constant (the JSON reference must be imported as a const)

Used article

[NicolasOmar]

The best tutorial to implement Dark mode in storybook (based on my approach using prefers-color-scheme) is this long but carefully explained article