DEV Community 👩‍💻👨‍💻

Cover image for Dark mode in your web app
Nur Ilyas
Nur Ilyas

Posted on

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈