A very simple darkmode example with Next.js and Tailwindcss.
🔥Demo: https://simpledarkmode.vercel.app
First, install Next Themes [https://www.npmjs.com/package/next-themes]
npm install next-themes
# or
yarn add next-themesThen add the "Next Theme" code to your _app.tsx (or _app.js) file.
Example:
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { ThemeProvider } from 'next-themes'
export default function App({ Component, pageProps }: AppProps) {
return <>
<ThemeProvider defaultTheme="dark" attribute="class">
<Component {...pageProps} />
</ThemeProvider>
</>
}Add the Phosphor icon set to make the icons look good.
npm install --save phosphor-reactMore information: https://phosphoricons.com
Next, add the line darkMode: "class" to tailwind.config.js.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class", // or 'media' or 'class'
theme: {
extend: {},
},
plugins: [],
}Copy the Darkmode.tsx file to your project and it will start working.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent