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)