Add Dark Mode

[darekkay]

Prerequesites:

• CSS colors should be refactored into CSS custom properties
• SVGs have to be moved out of CSS (base64) into the markup to allow changing their colors. To keep the markup size small, the SVGs should probably be reused via <use> (MDN).

TODO:

• Define dark theme, probably based on this.
• Add theme switcher

All changes have to be done in this repository.

[sarveshh]

Hey @darekkay I would love to give this a try. Is that okay?

[darekkay]

Hey @sarveshh , sure, feel free :) But it might not be that simple given the not so up-to-date architecture of https://github.com/darekkay/static-marks-app/

[12nick12]

this would be awesome, only if I was smart enough to help :-( good luck

[devnikesh]

Hi, @darekkay I gave it a try. For now, just implemented for theme preference, it's gonna show up according to the user theme preference in their browser settings. Looking forward to your approval to continue along. :)

[darekkay]

Hey @devnikesh , the work in progress looks good to me 👍 I also agree that it's good to start with the browser preferences first before implementing a theme switcher later.

As a hint, have a look into the (newly added) atomic color classes that will match the CSS custom properties: https://github.com/darekkay/static-marks-app/blob/master/src/styles/_atomic.scss

[devnikesh]

@darekkay , yeah sure thank you, glad you liked it.. 😄

[devnikesh]

Hey @darekkay , I'm done with the browser preference part, earlier the menu item icons and text color were not changing on dark mode, now it's fixed. Can we proceed to implement the feature ?

.

[devnikesh]

Hi @darekkay, was waiting for your approval, I've done the testing and have opened a PR. Devnikesh/add dark mode 11

Here's a Screenshot of the test result:

[darekkay]

Version 2.4.0 published, including a Dark Mode. Thanks everyone 🎉