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

03:30 Setup layout and Navbar
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:

React tutorials:

JavaScript Tutorials and Projects:

Angular Tutorials:

Angular 16 Crash Course For Begineers:

Tech Tutorials - Random:

Join our facebook group:

Contact us for development services:

[TarekIbnKhayer]

Very useful content.Thanks a ton, brother.

[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?

[alirazahaider]

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 YouTube 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.

[maxapps]

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

[khandoor]

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

[craigmcclanahan]

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<ThemeContextValue>("", (theme: string) => void)

or something appropriate to your Context's actual values, to avoid these types of issues.

[maskman]

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? 🙏

[sumitkumarsharma]

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

[xsabbir]

now not taking full height of the screen, if I use

<div data-theme={theme}>
{children}
</div>

className h-screen here that making the whole page scrollable