Dark mode in your web app

_nur_ilyas_

Nur Ilyas

Posted on October 18, 2020

Dark mode in your web app

Implement dark mode in your web app. #html #css #javascript

Step 1. Set background and text colors using CSS variables.
https://github.com/nibmz7/live-parade-state/blob/master/dev/main.css#L22-L86

Step 2. Apply variables to elements.
https://github.com/nibmz7/live-parade-state/blob/master/ui/global_styles.ts#L63-L64

Step 3. Toggle the dark mode class on document's body and save the user's preference in local storage.
https://github.com/nibmz7/live-parade-state/blob/master/ui/views/view_switcher.ts#L92-L98

Step 4. Add a script at the start of 'body' tag to load dark mode preference.
https://github.com/nibmz7/live-parade-state/blob/master/dev/index-mock.html#L18-L21

💖 💪 🙅 🚩
_nur_ilyas_
Nur Ilyas

Posted on October 18, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related