Skip to content

Commit 8a88af6

Browse files
the-coder-othe-coder-o
committed
chnaged theme-provider and theme provider button added new styles for theme
1 parent ca1c123 commit 8a88af6

File tree

7 files changed

+146
-26
lines changed

7 files changed

+146
-26
lines changed

‎app/globals.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22
@import 'tailwindcss/components';
33
@import 'tailwindcss/utilities';
44

5+
@import '@radix-ui/colors/gray.css';
6+
@import '@radix-ui/colors/gray-dark.css';
7+
@import '@radix-ui/colors/gray-alpha.css';
8+
@import '@radix-ui/colors/gray-dark-alpha.css';
9+
10+
@import '@radix-ui/colors/blue.css';
11+
@import '@radix-ui/colors/blue-dark.css';
12+
@import '@radix-ui/colors/blue-alpha.css';
13+
@import '@radix-ui/colors/blue-dark-alpha.css';
14+
515
@layer base {
616
:root {
717
--background: 0 0% 100%;
@@ -64,6 +74,24 @@
6474
--input: 12 6.5% 15.1%;
6575
--ring: 24 5.7% 82.9%;
6676
}
77+
78+
.light .prose {
79+
--tw-prose-headings: var(--gray-12);
80+
--tw-prose-body: var(--gray-12);
81+
--tw-prose-bold: var(--gray-12);
82+
--tw-prose-links: var(--blue-11);
83+
--tw-prose-code: var(--gray-12);
84+
--tw-prose-quotes: var(--gray-12);
85+
}
86+
87+
.dark .prose {
88+
--tw-prose-headings: var(--gray-12);
89+
--tw-prose-body: var(--gray-11);
90+
--tw-prose-bold: var(--gray-11);
91+
--tw-prose-links: var(--blue-11);
92+
--tw-prose-code: var(--gray-11);
93+
--tw-prose-quotes: var(--gray-11);
94+
}
6795
}
6896

6997
@layer base {
@@ -77,6 +105,7 @@
77105
}
78106
body {
79107
@apply bg-background text-foreground;
108+
overflow-x: hidden;
80109
}
81110
}
82111

‎app/layout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import './globals.css'
66
import Script from 'next/script'
77

88
import { cn } from '@/lib/utils'
9+
import clsx from 'clsx'
910
import { Provider } from 'react-redux'
1011

1112
import { store } from '@/redux/store/store'
@@ -68,9 +69,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
6869
<meta name="twitter:image" content="https://opengraph.b-cdn.net/production/documents/0a0926f1-2adc-4cc9-b2ce-82458eea1368.jpg?token=Sth5htvy1OqzIhZfzP5iJ6pPzhbTJEAIMpsqvP5Xj0g&height=640&width=640&expires=33243406322" />
6970
<link rel="canonical" href="https://a-bd.me/" />
7071
</head>
71-
<body className={cn(font.className, 'bg-[#FCFCFC] dark:bg-[#000]')}>
72+
<body className={clsx(font.className, 'antialiased bg-white dark:bg-black text-primary width-full')}>
7273
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossOrigin="anonymous" referrerPolicy="no-referrer" />
73-
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey={'my-blog'}>
74+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
7475
<Provider store={store}>
7576
<Header />
7677
{children}

‎components/mode-toggle.tsx‎

Lines changed: 60 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,69 @@
11
'use client'
22

3-
import * as React from 'react'
4-
import { Moon, Sun } from 'lucide-react'
3+
import { useEffect, useState } from 'react'
4+
import { Listbox } from '@headlessui/react'
5+
6+
import clsx from 'clsx'
57
import { useTheme } from 'next-themes'
8+
import { motion, AnimatePresence } from 'framer-motion'
9+
10+
import { SunIcon } from '@heroicons/react/24/outline'
11+
import { MoonIcon, CheckIcon } from '@heroicons/react/20/solid'
12+
13+
export default function ThemeSwitcher() {
14+
const [mounted, setMounted] = useState(false)
15+
const { theme, setTheme, resolvedTheme, themes } = useTheme()
616

7-
import { Button } from '@/components/ui/button'
8-
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
17+
useEffect(() => {
18+
setMounted(true)
19+
}, [])
920

10-
export function ModeToggle() {
11-
const { setTheme } = useTheme()
21+
if (!mounted) {
22+
return null
23+
}
1224

1325
return (
14-
<DropdownMenu>
15-
<DropdownMenuTrigger asChild className={''}>
16-
<Button className={'bg-transparent border-0'} variant="ghost" size="icon">
17-
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 text-[#646464] transition-all dark:-rotate-90 dark:scale-0 " />
18-
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 text-[#b4b4b4] scale-0 transition-all dark:rotate-0 dark:scale-100" />
19-
<span className="sr-only ">Toggle theme</span>
20-
</Button>
21-
</DropdownMenuTrigger>
22-
<DropdownMenuContent className={'!z-[999999999]'} align="end">
23-
<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
24-
<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
25-
<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
26-
</DropdownMenuContent>
27-
</DropdownMenu>
26+
<>
27+
<Listbox value={theme} onChange={(value) => setTheme(value)}>
28+
{({ open }) => {
29+
const iconClassName = clsx('w-5 h-5 dark:text-[#B4B4B4] text-black hover:!text-primary cursor-pointer transition-colors', open ? 'text-primary' : 'text-secondary')
30+
return (
31+
<div className="relative">
32+
<Listbox.Button className={clsx('relative w-8 h-8 cursor-default rounded-full flex items-center justify-center focus:outline-none ')}>
33+
{resolvedTheme === 'dark' ? <MoonIcon className={iconClassName} /> : <SunIcon className={'w-5 h-5 dark:text-[#B4B4B4] text-black hover:!text-primary cursor-pointer transition-colors'} />}
34+
</Listbox.Button>
35+
<AnimatePresence>
36+
{open && (
37+
<Listbox.Options
38+
as={motion.ul}
39+
static
40+
initial={{ opacity: 0, scale: 0.9 }}
41+
animate={{ opacity: 1, scale: 1 }}
42+
exit={{ opacity: 0, scale: 0.9 }}
43+
transition={{ type: 'spring', bounce: 0.3, duration: 0.3 }}
44+
className="absolute right-0 p-2 mt-2 overflow-auto text-base origin-top-right shadow-lg max-h-60 w-42 rounded-xl dark:bg-[#111111] focus:outline-none sm:text-sm capitalize"
45+
>
46+
{themes.map((theme) => (
47+
<Listbox.Option key={theme} className={({ active }) => clsx('relative cursor-default select-none py-2 pl-10 pr-4 rounded-md', active ? 'bg-secondary' : '')} value={theme}>
48+
{({ selected }) => (
49+
<>
50+
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>{theme == 'system' ? 'Automatic' : theme}</span>
51+
{selected ? (
52+
<span className="absolute inset-y-0 left-0 flex items-center pl-3 dark:text-neutral-50">
53+
<CheckIcon className="w-5 h-5" aria-hidden="true" />
54+
</span>
55+
) : null}
56+
</>
57+
)}
58+
</Listbox.Option>
59+
))}
60+
</Listbox.Options>
61+
)}
62+
</AnimatePresence>
63+
</div>
64+
)
65+
}}
66+
</Listbox>
67+
</>
2868
)
2969
}

‎components/provider/theme-provider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { type ThemeProviderProps } from 'next-themes/dist/types'
66

77
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
88
return (
9-
<NextThemesProvider themes={['light', 'dark', 'terminal']} {...props}>
9+
<NextThemesProvider themes={['light', 'dark']} {...props}>
1010
{children}
1111
</NextThemesProvider>
1212
)

‎components/ui/header/components/header-mobile.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { usePathname, useRouter } from 'next/navigation'
55

66
import { HeaderData } from '@/lib/data/header.data'
77

8-
import { ModeToggle } from '@/components/mode-toggle'
8+
import ThemeSwitcher from '@/components/mode-toggle'
99
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
1010

1111
const HeaderMobile = () => {
@@ -30,7 +30,7 @@ const HeaderMobile = () => {
3030
</DropdownMenuContent>
3131
</DropdownMenu>
3232
</div>
33-
<ModeToggle />
33+
<ThemeSwitcher />
3434
</div>
3535
)
3636
}

‎package-lock.json‎

Lines changed: 48 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
"postinstall": "prisma generate"
1212
},
1313
"dependencies": {
14+
"@headlessui/react": "^1.7.18",
1415
"@heroicons/react": "^2.1.1",
1516
"@mapbox/polyline": "^1.2.1",
1617
"@prisma/client": "^5.10.1",
18+
"@radix-ui/colors": "^3.0.0",
1719
"@radix-ui/react-avatar": "^1.0.4",
1820
"@radix-ui/react-dropdown-menu": "^2.0.6",
1921
"@radix-ui/react-progress": "^1.0.3",
@@ -67,4 +69,4 @@
6769
"tailwindcss": "^3.4.1",
6870
"typescript": "^5"
6971
}
70-
}
72+
}

0 commit comments

Comments
 (0)