feat: add next-themes

package.json

@@ -22,6 +22,7 @@
  "eslint-config-next": "13.0.6",
  "next": "13.0.6",
  "next-contentlayer": "^0.2.9",
+ "next-themes": "^0.2.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "reading-time": "^1.5.0",

pages/_app.tsx

@@ -3,24 +3,27 @@ import type { AppProps } from 'next/app'
 import { sansFont } from '~/lib/font'
 import Seo from '~/components/Seo'
 import { clsxm } from '@zolplay/utils'
+import { ThemeProvider } from 'next-themes'
 
 export default function App({ Component, pageProps }: AppProps) {
  return (
  <>
  <Seo />
 
- <main
- className={clsxm(
- sansFont.variable,
- 'relative h-full font-sans',
- 'bg-primary-900 text-slate-50',
- 'bg-[url("/grid.svg")] bg-top bg-repeat'
- )}
- >
- <span className="pointer-events-none fixed top-0 block h-[800px] w-full select-none bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(255,255,255,0.09)_0%,rgba(255,255,255,0)_100%)]" />
+ <ThemeProvider attribute="class">
+ <main
+ className={clsxm(
+ sansFont.variable,
+ 'relative h-full font-sans',
+ 'bg-primary-900 text-slate-50',
+ 'bg-[url("/grid.svg")] bg-top bg-repeat'
+ )}
+ >
+ <span className="pointer-events-none fixed top-0 block h-[800px] w-full select-none bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(255,255,255,0.09)_0%,rgba(255,255,255,0)_100%)]" />
 
- <Component {...pageProps} />
- </main>
+ <Component {...pageProps} />
+ </main>
+ </ThemeProvider>
  </>
  )
 }

tailwind.config.js

@@ -2,6 +2,7 @@ const { fontFamily } = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+ darkMode: 'class',
  content: [
  './pages/**/*.{js,ts,jsx,tsx}',
  './components/**/*.{js,ts,jsx,tsx}',