From bc7ada8abc74b700dd3af547d4db9b8f91d155f1 Mon Sep 17 00:00:00 2001 From: Defectink Date: Tue, 22 Mar 2022 11:55:03 +0800 Subject: [PATCH] Add dark mode with next-themes --- components/DarkModeBtn.tsx | 30 ++++++++++++++++++++++++++++++ components/NavBar.tsx | 12 ++++++++++++ next.config.js | 3 +++ package.json | 5 +++-- pages/_app.tsx | 22 +++++++++++----------- tailwind.config.js | 1 + types/index.ts | 5 +++++ yarn.lock | 15 ++++++++++----- 8 files changed, 75 insertions(+), 18 deletions(-) create mode 100644 components/DarkModeBtn.tsx diff --git a/components/DarkModeBtn.tsx b/components/DarkModeBtn.tsx new file mode 100644 index 0000000..41a2ba2 --- /dev/null +++ b/components/DarkModeBtn.tsx @@ -0,0 +1,30 @@ +import { useTheme } from 'next-themes'; +import { FC, useEffect, useState } from 'react'; +import { FiMoon, FiSun } from 'react-icons/fi'; + +const DarkModeBtn: FC = () => { + const [mounted, setMounted] = useState(false); + const { systemTheme, theme, setTheme } = useTheme(); + // When mounted on client, now we can show the UI + useEffect(() => setMounted(true), []); + + const currentTheme = theme === 'system' ? systemTheme : theme; + + if (!mounted) return null; + + return ( + <> + {currentTheme === 'dark' ? ( + + ) : ( + + )} + + ); +}; + +export default DarkModeBtn; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index fd842d3..b36cdc8 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -2,6 +2,9 @@ import cn from 'classnames'; import Link from 'next/link'; import { FC, useState } from 'react'; import { FiMenu } from 'react-icons/fi'; +import dynamic from 'next/dynamic'; + +const DarkModeBtn = dynamic(() => import('components/DarkModeBtn')); const txtMenu = [ { @@ -68,6 +71,15 @@ const HeadBar: FC = () => { {m.name} ))} +
  • + +
    • diff --git a/next.config.js b/next.config.js index e96d36c..a4d4212 100644 --- a/next.config.js +++ b/next.config.js @@ -10,6 +10,9 @@ const withMDX = require('@next/mdx')({ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + // experimental: { + // reactMode: 'concurrent', + // }, pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], }; diff --git a/package.json b/package.json index c5db59b..94cf093 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,9 @@ "@next/mdx": "^12.1.0", "classnames": "^2.3.1", "next": "12.1.0", - "react": "17.0.2", - "react-dom": "17.0.2", + "next-themes": "^0.1.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-icons": "^4.3.1" }, "devDependencies": { diff --git a/pages/_app.tsx b/pages/_app.tsx index 5ca6041..f90a243 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,15 +1,7 @@ import 'styles/globals.css'; -import type { AppProps } from 'next/app'; -import { NextPage } from 'next'; -import { ReactElement, ReactNode } from 'react'; import Head from 'next/head'; - -type NextPageWithLayout = NextPage & { - getLayout?: (page: ReactElement) => ReactNode; -}; -type AppPropsWithLayout = AppProps & { - Component: NextPageWithLayout; -}; +import { AppPropsWithLayout } from 'types'; +import { ThemeProvider } from 'next-themes'; function MyApp({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout ?? ((page) => page); @@ -24,7 +16,15 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { RUA - {getLayout()} + + {getLayout()} + ); } diff --git a/tailwind.config.js b/tailwind.config.js index c1fc127..8617665 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,5 @@ module.exports = { + darkMode: 'class', content: [ './pages/**/*.{js,ts,jsx,tsx,md,mdx}', './components/**/*.{js,ts,jsx,tsx}', diff --git a/types/index.ts b/types/index.ts index dd69599..4b39aa3 100644 --- a/types/index.ts +++ b/types/index.ts @@ -1,6 +1,11 @@ import { NextPage } from 'next'; +import { AppProps } from 'next/app'; import { ReactElement } from 'react'; export type NextPageWithLayout = { getLayout(page: ReactElement): JSX.Element; } & NextPage; + +export type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout; +}; diff --git a/yarn.lock b/yarn.lock index 55db76b..3986efd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2088,6 +2088,11 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= +next-themes@^0.1.1: + version "0.1.1" + resolved "https://registry.npmmirror.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a" + integrity sha512-Iqxt6rhS/KfK/iHJ0tfFjTcdLEAI0AgwFuAFrMwLOPK5e+MI3I+fzyvBoS+VaOS+NldUiazurhgwYhrfV0VXsQ== + next@12.1.0: version "12.1.0" resolved "https://registry.yarnpkg.com/next/-/next-12.1.0.tgz#c33d753b644be92fc58e06e5a214f143da61dd5d" @@ -2390,9 +2395,9 @@ quick-lru@^5.1.1: resolved "https://registry.npmmirror.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== -react-dom@17.0.2: +react-dom@^17.0.2: version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + resolved "https://registry.npmmirror.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" @@ -2409,9 +2414,9 @@ react-is@^16.13.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react@17.0.2: +react@^17.0.2: version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + resolved "https://registry.npmmirror.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" @@ -2519,7 +2524,7 @@ sade@^1.7.3: scheduler@^0.20.2: version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== dependencies: loose-envify "^1.1.0"