sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-18 21:44:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add theme provider and toggler

Browse Source
This commit is contained in:
sirin 2024-08-29 08:54:43 +07:00
parent bfc6879a53
commit abb3b884a5
3 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/layout.tsx
View File

@ -1,5 +1,6 @@
import type { Metadata } from "next";
import { Montserrat } from "next/font/google";
import { ThemeProvider } from "@/components/theme-provider";
import "@/app/globals.css";
const montserrat = Montserrat({
@ -15,14 +16,20 @@ export const metadata: Metadata = {
description: "B2DVentures is a financial services company.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
interface RootLayoutProps {
children: Readonly<React.ReactNode>;
}
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en">
<body className={`${montserrat.className}`}>{children}</body>
<body className={`${montserrat.className}`}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<div className="relative flex min-h-screen flex-col">
<div className="flex-1">{children}</div>
</div>
</ThemeProvider>
</body>
</html>
);
}

9
src/components/theme-provider.tsx Normal file
View File

@ -0,0 +1,9 @@
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

22
src/components/theme-toggle.tsx
View File

@ -1,9 +1,19 @@
"use client"
"use client";
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
import { Button } from "@/components/ui/button";
export function ThemeToggle() {
const { setTheme, theme } = useTheme();
return (
<Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
<Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" />
<Moon className="hidden h-5 w-5 dark:block" />
<span className="sr-only">Toggle theme</span>
</Button>
);
}