diff options
| author | Sebastien Castiel <sebastien@castiel.me> | 2023-12-07 18:35:09 -0500 |
|---|---|---|
| committer | Sebastien Castiel <sebastien@castiel.me> | 2023-12-07 18:35:09 -0500 |
| commit | 4bc03002e17a0d128059c9d6d76c91ba7bac2e8f (patch) | |
| tree | 59687bb0e83a02f07121f8f34820fcbffb786ef6 /src/app/layout.tsx | |
| parent | 61201c28646ccb3be155b84b2a95cbc4502e51e4 (diff) | |
Dark mode
Diffstat (limited to 'src/app/layout.tsx')
| -rw-r--r-- | src/app/layout.tsx | 60 |
1 files changed, 36 insertions, 24 deletions
diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 799f8c5..8943688 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,6 @@ import { ProgressBar } from '@/components/progress-bar' +import { ThemeProvider } from '@/components/theme-provider' +import { ThemeToggle } from '@/components/theme-toggle' import { Button } from '@/components/ui/button' import { env } from '@/lib/env' import type { Metadata } from 'next' @@ -39,30 +41,40 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - <html lang="en"> - <body className="bg-slate-50"> - <ProgressBar /> - <header className="fixed top-0 left-0 right-0 flex justify-between bg-white bg-opacity-50 p-2 border-b backdrop-blur-sm"> - <Link className="flex items-center gap-2" href="/"> - <h1> - <Image - src="/logo-with-text.png" - className="m-1" - width={(35 * 522) / 180} - height={35} - alt="Spliit" - /> - </h1> - </Link> - <ul role="nav" className="flex items-center text-sm"> - <li> - <Button variant="link" asChild className="-my-3"> - <Link href="/groups">Groups</Link> - </Button> - </li> - </ul> - </header> - <div className="max-w-screen-md mx-auto p-4 pt-20">{children}</div> + <html lang="en" suppressHydrationWarning> + <body className="light:bg-slate-50"> + <ThemeProvider + attribute="class" + defaultTheme="system" + enableSystem + disableTransitionOnChange + > + <ProgressBar /> + <header className="fixed top-0 left-0 right-0 flex justify-between bg-white dark:bg-slate-800 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm"> + <Link className="flex items-center gap-2" href="/"> + <h1> + <Image + src="/logo-with-text.png" + className="m-1" + width={(35 * 522) / 180} + height={35} + alt="Spliit" + /> + </h1> + </Link> + <ul role="nav" className="flex items-center text-sm"> + <li> + <Button variant="link" asChild className="-my-3"> + <Link href="/groups">Groups</Link> + </Button> + </li> + <li> + <ThemeToggle /> + </li> + </ul> + </header> + <div className="max-w-screen-md mx-auto p-4 pt-20">{children}</div> + </ThemeProvider> </body> </html> ) |