This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
- Install Daisy UI
- Add custom themes in
src/app/globals.css- Can generate DaisyUI themes Here
- Create util functions to get and set theme as cookies
- check here 👉🏾
src/utils/theme.ts
- check here 👉🏾
- Add HTML
data-themeattribute in root layout *- Use
getThemeCookie()fromsrc/utils/theme.tsto get current theme src/app/layout.tsxtheme()- Line 24 -ish<html lang="en" data-theme={ currentTheme }>- Line 35 -ish
- Use
- Create component to update appearance and change theme
<AppearanceSettings />in this case.- See 👉🏾
src/components/appearanceSettings
- Import and use
<AppearanceSettings />src/app/page.tsxin this case.
blurElementOnClick()insrc/components/appearanceSettings/AppearanceSettings.tsxhelps to dismiss DaisyUI's DropdownonClick- Can also add logic to update to appropriate appearance (Light / Dark) on theme change
- Improvement and optimization comments are always welcomed