How to create a Dark Mode with Angular and TailwindCSS
#angular #TailwindCSS #darkmode
💖 Buy me a coffee (if you found value in the video)
https://buymeacoffee.com/zoaibkhan
📽️ My courses:
https://zoaibkhan.com/courses
✍️My blog for more free Angular posts:
https://zoaibkhan.com/blog
Companion blog:
https://zoaibkhan.com/blog/how-to-cre...
Add a dash of cool to your angular app with dark mode! Learn a simple way to bring this popular feature using Tailwind CSS and store user preferences in browser! Watch here.
Add TailwindCSS to an Angular app
https://tailwindcss.com/docs/guides/a...
The complete code for this tutorial can be found at this following github repository:
https://github.com/thisiszoaib/angula...
00:00 Introduction
00:24 Step 1: Creating Angular App
01:00 Step 2: Adding Tailwind CSS
01:33 Step 3: Creating Basic UI
01:57 Step 4: Adding Material Icons
02:21 Step 5: Testing Layout
02:50 Step 6: Adding Dark Mode Signal
03:27 Step 7: Testing Icon State Change
03:50 Step 8: Adding Interactive Animation
04:23 Step 9: Enabling Dark Mode in Tailwind CSS
05:01 Step 10: Using Host Binding Decorator
05:52 Step 11: Adding Dark Variants
06:19 Step 12: Testing Dark Variants
06:54 Step 13: Further UI Development
07:14 Step 14: Adding Card List Component
08:00 Step 15: Dealing with Default Mode on Refresh
08:36 Step 16: Syncing Dark Mode Setting with Local Storage
09:36 Step 17: Testing Local Storage Sync
10:18 Conclusion
Follow me on:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :) Grab my new course 'Angular Firebase Authentication: Create Full Sign up App' with 50% off here:
https://www.udemy.com/course/angular-...
