Skip to content
This repository was archived by the owner on Aug 22, 2024. It is now read-only.

Commit 1a3f3f9

Browse files
joelhooksjoelhooks
committed
adds a dark mode toggle
1 parent 6dc53c7 commit 1a3f3f9

9 files changed

+83
-12
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22
.mdx-data
3+
/.idea
34
# dependencies
45
/node_modules
56
/.pnp

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"next": "10.0.5",
2121
"next-seo": "^4.17.0",
2222
"next-sitemap": "^1.4.5",
23+
"next-themes": "^0.0.10",
2324
"react": "17.0.1",
2425
"react-dom": "17.0.1",
2526
"rehype": "^11.0.0",

‎src/components/dark-mode-toggle.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as React from 'react'
2+
import {useTheme} from 'next-themes'
3+
4+
const DarkModeToggle: React.FC = () => {
5+
const [mounted, setMounted] = React.useState(false)
6+
const {theme, setTheme} = useTheme()
7+
React.useEffect(() => setMounted(true), [])
8+
9+
return (
10+
<button
11+
aria-label="Toggle Dark Mode"
12+
type="button"
13+
className="bg-trueGray-200 dark:bg-trueGray-800 rounded p-3 h-10 w-10"
14+
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
15+
>
16+
{mounted && (
17+
<svg
18+
xmlns="http://www.w3.org/2000/svg"
19+
viewBox="0 0 24 24"
20+
fill="currentColor"
21+
stroke="currentColor"
22+
className="h-4 w-4 text-gray-800 dark:text-gray-200"
23+
>
24+
{theme === 'dark' ? (
25+
<path
26+
strokeLinecap="round"
27+
strokeLinejoin="round"
28+
strokeWidth={2}
29+
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
30+
/>
31+
) : (
32+
<path
33+
strokeLinecap="round"
34+
strokeLinejoin="round"
35+
strokeWidth={2}
36+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
37+
/>
38+
)}
39+
</svg>
40+
)}
41+
</button>
42+
)
43+
}
44+
45+
export default DarkModeToggle

‎src/layouts/index.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@ type LayoutProps = {
55
meta: any
66
}
77

8-
const DefaultLayout: FunctionComponent<LayoutProps> = ({
9-
children,
10-
meta,
11-
}) => {
8+
const DefaultLayout: FunctionComponent<LayoutProps> = ({children, meta}) => {
129
const {title, description, titleAppendSiteName = false, url, ogImage} =
1310
meta || {}
1411
return (
@@ -25,7 +22,7 @@ const DefaultLayout: FunctionComponent<LayoutProps> = ({
2522
}}
2623
canonical={url}
2724
/>
28-
<div className="prose md:prose-xl max-w-screen-md mt-0 mx-auto leading-6">
25+
<div className="prose dark:prose-dark md:dark:prose-xl-dark md:prose-xl max-w-screen-md mt-0 mx-auto leading-6">
2926
{title && <h1 className="text-xl leading-tight">{title}</h1>}
3027
{children}
3128
</div>

‎src/pages/_app.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@ import {AppProps} from 'next/app'
33
import '../styles/globals.css'
44
import {DefaultSeo} from 'next-seo'
55
import SEO from '../../next-seo.json'
6+
import {ThemeProvider} from 'next-themes'
67

78
function MyApp({Component, pageProps}: AppProps) {
89
return (
910
<>
1011
<DefaultSeo {...SEO} />
11-
<Component {...pageProps} />
12+
<ThemeProvider attribute="class">
13+
<Component {...pageProps} />
14+
</ThemeProvider>
1215
</>
1316
)
1417
}

‎src/pages/_document.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default class MyDocument extends Document {
3535
href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/cloud-with-lightning-and-rain_26c8-fe0f.png"
3636
/>
3737
</Head>
38-
<body>
38+
<body className="dark:bg-gray-800">
3939
<Main />
4040
<NextScript />
4141
</body>

‎src/pages/index.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import {jsx} from '@emotion/core'
22
import Head from 'next/head'
3+
import DarkModeToggle from '../components/dark-mode-toggle'
34

45
export default function Home() {
56
return (
6-
<div>
7+
<div className="dark:bg-gray-800">
78
<Head>
89
<title>Next.js, TypeScript, Tailwind, Jest</title>
910
<link rel="icon" href="/favicon.ico" />
1011
</Head>
1112

12-
<h1 className="text-3xl text-pink-500" css={{backgroundColor: 'teal'}}>
13+
<h1 className=" text-3xl text-pink-500" css={{backgroundColor: 'teal'}}>
1314
Welcome to Your App
1415
</h1>
16+
<DarkModeToggle />
1517
</div>
1618
)
1719
}

‎tailwind.config.js

+20-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
module.exports = {
2-
purge: ['./src/**/*.tsx'],
2+
darkMode: 'class',
3+
purge: {
4+
content: ['./src/**/*.tsx'],
5+
options: {
6+
safelist: ['dark'],
7+
},
8+
},
39
theme: {
410
typography: (theme) => ({}),
5-
extend: {},
11+
extend: {
12+
colors: {},
13+
typography: (theme) => ({
14+
dark: {
15+
css: {
16+
color: 'white',
17+
},
18+
},
19+
}),
20+
},
21+
},
22+
variants: {
23+
typography: ['dark'],
624
},
7-
variants: {},
825
plugins: [require('@tailwindcss/typography')],
926
}

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -5557,6 +5557,11 @@ next-sitemap@^1.4.5:
55575557
matcher "^3.0.0"
55585558
minimist "^1.2.5"
55595559

5560+
next-themes@^0.0.10:
5561+
version "0.0.10"
5562+
resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.10.tgz#86fe5f8a4654416f5d9157993217180174e582b8"
5563+
integrity sha512-YapL2GVJDooOuGYCYyCywYXRMpulBngG5Qay/HkMK9RyL9xOZ6C3vEgac2dzLWpo3uDVlk+0Qc9XgwGfLHwq/w==
5564+
55605565
next-tick@~1.0.0:
55615566
version "1.0.0"
55625567
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"

0 commit comments

Comments
 (0)