Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6a0e7f1

Browse files
pbteja1998pbteja1998
committed
Add dark mode using nightwind
1 parent b42b8c8 commit 6a0e7f1

15 files changed

+188
-68
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
"markdown-to-jsx": "7.1.1",
2727
"next": "10.0.7",
2828
"next-auth": "3.2.0",
29+
"next-themes": "0.0.10",
30+
"nightwind": "1.1.6",
2931
"phosphor-react": "1.1.2",
3032
"react": "17.0.1",
3133
"react-dom": "17.0.1",

‎src/components/AppNavBar.tsx

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,56 +4,28 @@ import { Logo } from '@/components'
44
import Link from 'next/link'
55
import { useRouter } from 'next/router'
66
import { User } from 'src/pages/members'
7+
import { Toggle } from '@/ui'
78

89
const navbarItems = [
910
{
1011
title: 'Home',
1112
value: 'home',
1213
href: '/',
1314
},
14-
// {
15-
// title: 'Learn',
16-
// value: 'learn',
17-
// href: '/learn',
18-
// },
19-
// {
20-
// title: 'Events',
21-
// value: 'events',
22-
// href: '/events',
23-
// },
24-
// {
25-
// title: 'Space',
26-
// value: 'space',
27-
// href: '/space',
28-
// },
2915
{
3016
title: 'Members',
3117
value: 'members',
3218
href: '/members',
3319
},
34-
// {
35-
// title: 'Projects',
36-
// value: 'projects',
37-
// href: '/projects',
38-
// },
39-
// {
40-
// title: 'Jobs',
41-
// value: 'jobs',
42-
// href: '/jobs',
43-
// },
44-
// {
45-
// title: 'Notifications',
46-
// value: 'notifications',
47-
// href: '/notifications',
48-
// },
4920
]
5021

5122
export default function AppNavBar() {
5223
const [session, loading] = useSession()
5324
const router = useRouter()
25+
5426
return (
5527
<NavBar
56-
className="border-b shadow-none"
28+
className="border-b border-gray-200 shadow-none"
5729
logo={<Logo className="hidden lg:block" />}
5830
leftDesktopItems={
5931
<>
@@ -74,6 +46,8 @@ export default function AppNavBar() {
7446
{!loading &&
7547
(session ? (
7648
<>
49+
<Toggle />
50+
7751
<Menu
7852
trigger={
7953
<Avatar
@@ -98,6 +72,7 @@ export default function AppNavBar() {
9872
</>
9973
) : (
10074
<>
75+
<Toggle />
10176
<Button
10277
variant="solid"
10378
variantColor="brand"

‎src/components/Logo.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@ export default function Logo({
1212
return (
1313
<A href="/" className="flex items-center cursor-pointer">
1414
<Image src="/logo.svg" width={size} height={size} alt="Coderplex Logo" />
15-
<span className={classNames('ml-2 text-base font-medium', className)}>
15+
<span
16+
className={classNames(
17+
'ml-2 text-base font-medium text-black',
18+
className
19+
)}
20+
>
1621
Coderplex Community
1722
</span>
1823
</A>

‎src/components/ui/form/Input.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ const Input = React.forwardRef(
141141
type={type}
142142
id={id}
143143
className={classNames(
144-
'block w-full sm:text-sm',
144+
'block w-full sm:text-sm bg-white',
145145
hasError
146146
? `border-red-300 text-red-900 placeholder-red-900
147147
focus:ring-red-500 focus-within:border-red-500`

‎src/components/ui/form/Select.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const Select = React.forwardRef(
5454
<select
5555
id={id}
5656
className={classNames(
57-
'mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md',
57+
'bg-white text-black mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md',
5858
selectClassName
5959
)}
6060
ref={ref}

‎src/components/ui/form/TextArea.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const TextArea = React.forwardRef(
6161
id={id}
6262
rows={rows}
6363
className={classNames(
64-
'block w-full rounded-md shadow-sm sm:text-sm',
64+
'block w-full rounded-md shadow-sm sm:text-sm bg-white',
6565
hasError
6666
? `border-red-300 text-red-900 placeholder-red-900
6767
focus:ring-red-500 focus-within:border-red-500`

‎src/components/ui/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export * from './avatar'
33
export * from './button'
44
export * from './menu'
55
export * from './form'
6+
export * from './toggle'

‎src/components/ui/navbar/NavBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const NavBar = ({
6161
</div>
6262
</div>
6363
<div className="flex items-center">
64-
<div className="flex flex-shrink-0 space-x-4">
64+
<div className="flex flex-shrink-0 space-x-4 items-center">
6565
{rightDesktopItems}
6666
</div>
6767
<div className="hidden md:ml-4 md:flex-shrink-0 md:flex md:items-center">

‎src/components/ui/toggle/Toggle.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Switch } from '@headlessui/react'
2+
import classNames from 'classnames'
3+
import { useTheme } from 'next-themes'
4+
import { useEffect, useState } from 'react'
5+
6+
export default function Toggle() {
7+
const { theme, setTheme } = useTheme()
8+
const [enabled, setEnabled] = useState(theme === 'light' ? false : true)
9+
console.log(theme)
10+
11+
useEffect(() => {
12+
if (enabled) {
13+
setTheme('dark')
14+
} else {
15+
setTheme('light')
16+
}
17+
}, [enabled, setTheme])
18+
return (
19+
<>
20+
<Switch
21+
checked={enabled}
22+
onChange={setEnabled}
23+
className={classNames(
24+
enabled ? 'bg-brand-600' : 'bg-gray-200',
25+
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500'
26+
)}
27+
>
28+
<span className="sr-only">Use dark mode</span>
29+
<span
30+
aria-hidden="true"
31+
className={classNames(
32+
enabled ? 'translate-x-5' : 'translate-x-0',
33+
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
34+
)}
35+
></span>
36+
</Switch>
37+
</>
38+
)
39+
}

‎src/components/ui/toggle/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Toggle } from './Toggle'

‎src/pages/_app.tsx

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Title, Description, Meta } from '@/components'
88
import React from 'react'
99
import ProgressBar from '@badrap/bar-of-progress'
1010
import { Router } from 'next/router'
11+
import { ThemeProvider } from 'next-themes'
1112

1213
const progress = new ProgressBar({
1314
size: 2,
@@ -44,17 +45,23 @@ function MyApp({ Component, pageProps }: AppProps) {
4445
"We're a non-profit startup on a mission to improve the state of tech across India"
4546

4647
return (
47-
<QueryClientProvider client={queryClient}>
48-
<Provider session={pageProps.session}>
49-
<Title suffix="Coderplex">{meta.metaTitle || meta.title}</Title>
50-
<Description>{description}</Description>
51-
<Meta />
52-
<Layout {...layoutProps}>
53-
<Component {...pageProps} />
54-
</Layout>
55-
<ReactQueryDevtools initialIsOpen={false} />
56-
</Provider>
57-
</QueryClientProvider>
48+
<ThemeProvider
49+
attribute="class"
50+
storageKey="nightwind-mode"
51+
defaultTheme="system" // default "light"
52+
>
53+
<QueryClientProvider client={queryClient}>
54+
<Provider session={pageProps.session}>
55+
<Title suffix="Coderplex">{meta.metaTitle || meta.title}</Title>
56+
<Description>{description}</Description>
57+
<Meta />
58+
<Layout {...layoutProps}>
59+
<Component {...pageProps} />
60+
</Layout>
61+
<ReactQueryDevtools initialIsOpen={false} />
62+
</Provider>
63+
</QueryClientProvider>
64+
</ThemeProvider>
5865
)
5966
}
6067

‎src/pages/_document.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class MyDocument extends Document {
1414

1515
render() {
1616
return (
17-
<Html lang="en">
17+
<Html lang="en" className="nightwind">
1818
<Head>
1919
<link
2020
rel="preload"

‎src/pages/profile/settings.tsx

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
SocialMediaSettings,
1212
} from '@/components'
1313
import { PaddedLayout } from 'src/layouts'
14+
import { Select } from '@/ui'
1415

1516
const tabValues = ['profile', 'private', 'social', 'other'] as const
1617

@@ -51,25 +52,22 @@ export default function Settings() {
5152
return (
5253
<>
5354
<div className="py-4 lg:grid lg:grid-cols-12 lg:gap-x-5">
54-
<div className="px-2 py-6 lg:hidden sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
55-
<label htmlFor="selectedTab" className="sr-only">
56-
Select a tab
57-
</label>
58-
<select
59-
id="selectedTab"
60-
className="block w-full py-2 pl-3 pr-10 mt-1 text-base border-gray-300 rounded-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"
61-
onChange={(e) =>
62-
setSelectedTab(e.target.value as typeof tabValues[number])
63-
}
64-
value={selectedTab}
65-
>
66-
{tabs.map((tab) => (
67-
<option key={tab.value} value={tab.value}>
68-
{tab.name}
69-
</option>
70-
))}
71-
</select>
72-
</div>
55+
<Select
56+
label="Select a tab"
57+
id="selectedTab"
58+
onChange={(e) =>
59+
setSelectedTab(e.target.value as typeof tabValues[number])
60+
}
61+
hideLabel={true}
62+
value={selectedTab}
63+
className="px-2 py-6 lg:hidden sm:px-6 lg:py-0 lg:px-0 lg:col-span-3"
64+
>
65+
{tabs.map((tab) => (
66+
<option key={tab.value} value={tab.value}>
67+
{tab.name}
68+
</option>
69+
))}
70+
</Select>
7371

7472
<aside className="hidden px-2 py-6 lg:block sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
7573
<nav className="space-y-1">

‎tailwind.config.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@ module.exports = {
55
purge: {
66
content: ['./src/**/*.{js,ts,jsx,tsx}'],
77
},
8-
darkMode: false,
8+
darkMode: 'class',
99
theme: {
10+
nightwind: {
11+
typography: true,
12+
colorClasses: ['placeholder'],
13+
},
1014
fontFamily: {
1115
sans: ['Inter', ...fontFamily.sans],
1216
},
@@ -32,6 +36,7 @@ module.exports = {
3236
require('@tailwindcss/forms'),
3337
require('@tailwindcss/typography'),
3438
require('@tailwindcss/aspect-ratio'),
39+
require('nightwind'),
3540
],
3641
}
3742

0 commit comments

Comments
 (0)