You can also watch the YouTube video: [Next JS Tutorial #2 | Dark Mode with Next Themes](https://www.youtube.com/watch?v=uBbu5Vf4CDA) ### Installing Next Themes and React Icons ```bash yarn add next-themes react-icons ``` ### Installing Required ShadCN UI Components ```bash npx shadcn@latest add dropdown-menu sheet ``` We'll need a few css classes for our components let's add them to `globals.css` before we start: ```css @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 10% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .navbar-link { @apply block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700; } .sidenav-li { @apply cursor-pointer flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700; } .sidenav-li--icon { @apply w-5 h-5 text-gray-400 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white; } .input { @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500; } .btn { @apply inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800 !important; } ``` We also need to add dark mode compatible version of `next.svg` image so we'll change `next.svg` image name to `next-light.svg` and we'll create a new image named `next-dark.svg` in our `public` folder: `next-dark.svg`: ```js ``` Create `ThemeSwitcherDropdown.jsx` in `components` folder: ```js "use client"; import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Moon, Sun } from "lucide-react"; import { useTheme } from "next-themes"; import { useEffect, useState } from "react"; import { HiOutlineSwitchVertical } from "react-icons/hi"; const ThemeSwitcherDropdown = () => { const [isOpen, setIsOpen] = useState(false); const [mounted, setMounted] = useState(false); const { systemTheme, theme, setTheme } = useTheme(); const currentTheme = theme === "system" ? systemTheme : theme; useEffect(() => { setMounted(true); }, []); if (!mounted) return null; return ( {currentTheme === "light" ? ( ) : ( )}

{ setTheme("dark"); setIsOpen(false); }} className="flex items-center cursor-pointer py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white" > Dark
{ setTheme("light"); setIsOpen(false); }} className="flex items-center cursor-pointer py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white" > Light
{ setTheme("system"); setIsOpen(false); }} className="flex items-center cursor-pointer py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white" > System

); }; export default ThemeSwitcherDropdown; ``` Edit `layout.jsx` in `app` folder: ```js import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; import { ThemeProvider } from "next-themes"; import Header from "@/components/Header"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", variable: "--font-geist-sans", weight: "100 900", }); const geistMono = localFont({ src: "./fonts/GeistMonoVF.woff", variable: "--font-geist-mono", weight: "100 900", }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode, }>) { return (

{children} ); } ``` Edit `page.jsx` in `app` folder: ```js export default function Home() { return (

Home

); } ``` Create `Header.jsx` in `components` folder: ```js "use client"; import nextDark from "@/public/next-dark.svg"; import nextLight from "@/public/next-light.svg"; import { useTheme } from "next-themes"; import Image from "next/image"; import Link from "next/link"; import ThemeSwitcherDropdown from "./ThemeSwitcherDropdown"; import { Button } from "./ui/button"; import SidenavSheet from "./SidenavSheet"; import { useEffect, useState } from "react"; const Header = () => { const [mounted, setMounted] = useState(false); const { systemTheme, theme } = useTheme(); const currentTheme = theme === "system" ? systemTheme : theme; useEffect(() => { setMounted(true); }, []); if (!mounted) return null; return (

Home
Create Product
Admin

); }; export default Header; ``` Create `SidenavSheet.jsx` in `components` folder: ```js import { ArrowBigRight, Menu } from "lucide-react"; import Link from "next/link"; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, } from "./ui/sheet"; const SidenavSheet = () => { return ( Next.Js

Home

Edit Profile

Create Product

Admin

); }; export default SidenavSheet; ``` That's it for this tutorial, we added dark mode functionality into our app and created header and sidenavsheet components. Next tutorial we'll install prisma and start using mongodb.