Опубликовано: День назад

Tuomo Kankaanpää
подписчиков: 8 тыс.

Learn how to add dark mode to your Next.js 13 application that uses app directory. Using different themes with Next JS 13 application can easily be done with the next-themes package. In this video we will take a deep dive on how the theming works with Next.js 13 and Tailwind. In the first example we add next-themes without Tailwind and in second example we learn how to add theming that works with Tailwind classes.
Integrify Academy - study and land a job in tech!
A 4-month Full Stack program for developers based in Finland: bit.ly/3IReH4S
A 5-month Data Science and Machine Learning program for developers based in Finland, Sweden, Denmark, Germany, and the Netherlands: bit.ly/45HeHxS
Github repos from the video
Example 1: github.com/tumetus/next-js-th...
Example 2: github.com/tumetus/next-js-th...
Support the channel (tips): bit.ly/3XTXNZu
My courses:
React basics: skl.sh/2XAKn7u
HTML & CSS for beginners: skl.sh/34wvGUH
Draft.js basics: skl.sh/3cJ5Hw4
💻 MY GEAR
MY CODIGN LAPTOP: amzn.to/3MI90ci
MY MOUSE: amzn.to/3mr3no9
MY KEYBOARD: amzn.to/3GIoMjh
MY MICROPHONE: amzn.to/3KCDPfv
MICROPHONE BOOSTER: amzn.to/43trLWB
MY MICROPHONE ARM: amzn.to/3oaf5DW
MY CAMERA: amzn.to/3UxyvyJ
MY STREAMING LIGHT: amzn.to/3KE0PuE
Connect with me:
Website: tuomokankaanpaa.com
My newsletter: tuomokankaanpaa.com/newsletter
Twitter: / tumee
Skillshare: www.skillshare.com/r/user/tume
Timestamps (generated with www.chaptermarkerstotimestamp...)
00:00 What this video is about
00:25 Setting up the example project
01:48 Adding next-themes library
03:18 Solving client component error
06:08 How to boost your tech skills
07:07 Adding theme changer component
08:45 Solving hydration error
11:35 Adding theme specific css
13:47 Color-scheme css property
16:02 Dark mode with Tailwind CSS
17:29 Add next-themes & theme switcher
19:31 Configure ThemeProvider for Tailwind CSS
20:11 Adding Tailwind style classes
21:48 Configuring tailwind.config.js
#nextjs #nextjstutorial #darkmode