CODEWITHSUNDEEP
next.jsnext.js14shadcnuilightmode
GʀᴜᴍᴘʏCᴀᴛ
GʀᴜᴍᴘʏCᴀᴛ

Reputation: 8920

In Shadcn how to set prefers-color-scheme to always be light?

Building out a light theme and while I prefer dark mode I'm having an issue with Shadcn setting:

@media (prefers-color-scheme: dark) {
}

is always set for all the components. I've read through:

In a Next.js 14 project using Shadcn how can I set theme to always be light?

Upvotes: 0

Views: 494

Answers (1)

Mubashir Waheed
Mubashir Waheed

Reputation: 364

You can use next-themes to add dark and light mode to you app.

npm install next-themes

Theme provider

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Root layout

import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <>
      <html lang="en" suppressHydrationWarning>
        <head />
        <body>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>
        </body>
      </html>
    </>
  )
}

Also has useTheme hook to change the theme

import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

You can read here: https://github.com/pacocoursey/next-themes

Upvotes: 0

Related Questions