Next js 14 Theming with Daisy UI - Light and Dark Mode

In this video, you will learn how to setup daisy ui in next.js 14. How to implement theming using daisy ui in next.js 14. Not just dark and light mode, but I will teach you how to setup other theming variations as well like retro, aqua etc.
00:10 Overview of theming in next.js 14 using daisy UI
01:24 Create new next.js 14 project
02:00 Learn from more next.js 14 tutorials
03:30 Setup layout and Navbar
06:40 Install daisy UI in next.js 14 project
10:35 Implement Theming
17:00 Create context for theming layout
25:40 Add buttons of theming
28:50 Testing
#nextjs14 #nextjs13 #nextjs #theming #ui
Follow Whatsapp Channel:
whatsapp.com/c...
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Angular Tutorials:
• Angular 16 Life Cycle ...
Angular 16 Crash Course For Begineers:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Tutorials: • Next.js 13 Tutorials -...
Next.js 14 Tutorials:
• Next.js 14 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Contact us for development services:
/ umair-jameel-24aa5368

[@SattwikSahuIISERB]

AFAIK it is also possible to control styling for an element using the `dark:` directive in tailwind. DaisyUI also provides some documentation on enabling this. However, when I tried to do the same, I did not get the desired result. There was no custom style change on changing to the dark theme. Could you help me with this issue?

[@elementalhero9939]

Ssr destroyed 😢

[@0xsabbir]

now not taking full height of the screen, if I use
{children}
className h-screen here that making the whole page scrollable

[@maxapps7318]

Good work, but you still need to fix the flash problem on refresh/load .
Good luck!

[@maskman4821]

Yeah, this is the issue we need to fix 😅

[@maskman4821]

I have got this issue fixed, simply install next-themes library and it reads and persist theme value on server so when we refresh the page we won't see a flicker/flash or a blank screen which is really awesome 🥰

[@Redona_]

@@maskman4821 Nice. Could I see the implementation

[@sumitkumarsharma3103]

I think there is a better way using theme-change package, by using this package we donot need to create context api.

[@alirazahaider110]

Umair, could you please create a series on headless CMS, specifically focusing on using WordPress as a headless CMS with Next.js 14? There seems to be a lack of content on RUclips regarding this topic, especially when it comes to fetching data from WordPress headless with Next.js 14. Your expertise on this would be highly valuable.

[@ProgrammingwithUmair321]

Sure, I will consider wordpress as well.

[@TarekIbnKhayer]

Very useful content.Thanks a ton, brother.

[@craigmcclanahan8410]

Awesome video -- as it happens, I was just wondering how DaisyUI theming got along with NextJS 14 :-).
One nitpick -- I ended up with Typescript errors in ThemeContext (where you aren't defining a default value, or declaring a type on the createContext call), and in Navbar and ClientThemeWrapper (where you call useContext to extract the values returned (again, since it's not Typescript typed). The app still runs in dev mode (a little surprising), but it causes fatal compile errors if you try to build it.
I usually deal with this sort of thing by declaring a type for the context value:
type ThemeContextValue = { theme: string; changeTheme: (theme: string) => void }
and set my context export to be typed:
const ThemeContext = createContext("", (theme: string) => void)
or something appropriate to your Context's actual values, to avoid these types of issues.

[@khandoor7228]

Umair your videos have been awesome, what do you prefer Shadcn or DaisyUI?

[@ProgrammingwithUmair321]

I prefer shadcn usually

[@fabiojonathanarifin1]

Amazing! thank you

[@KhanGaming-ls5ue]

Brother headless cms please next js

[@RwandaBruno]

Thanks very much ❤❤

[@maskman4821]

Sir, this is client side approach, users will see a blank screen or a flicker when page gets refreshed which is not a good experience, how do we implement theme switcher with cookie in nextjs app router app? Can you create a tutorial on this topic? 🙏

[@maskman4821]

I have got this issue fixed, simply install next-themes library and it reads and persist theme value on server so when we refresh the page we won't see a flicker/flash or a blank screen which is really awesome 🥰

[@D9J9V]

Did you use app router also? I'm using pages and cannot make it work with daisyUI even with next-themes@@maskman4821

[@awbibib]

@@maskman4821 hi can you explain more of this? are u using next-theme from scratch or just editing some of this code? thanks

[@maskman4821]

@@awbibib next-themes

[@vitozdev]

Very useful, thank you buddy!

[@lamnguyenduy946]

thanks you!