-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4f7fb93
commit 8d80123
Showing
5 changed files
with
83 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,71 @@ | ||
| 'use client' | ||
| 'use client'; | ||
|
|
||
| import localFont from "next/font/local"; | ||
| import "./globals.css"; | ||
| import React, { useCallback, useState } from "react"; | ||
| import React, { useCallback, useEffect, useState } from "react"; | ||
| import { AuthProvider } from "@/context/auth-provider"; | ||
|
|
||
| import {ITheme, IThemeContextType} from "@/interfaces/IThemeContext"; | ||
|
|
||
| const geistSans = localFont({ | ||
| src: "./fonts/GeistVF.woff", | ||
| variable: "--font-geist-sans", | ||
| weight: "100 900", | ||
| }); | ||
|
|
||
| const geistMono = localFont({ | ||
| src: "./fonts/GeistMonoVF.woff", | ||
| variable: "--font-geist-mono", | ||
| weight: "100 900", | ||
| }); | ||
|
|
||
| export const ThemeContext = React.createContext<any>(null); | ||
| export const ThemeContext = React.createContext<IThemeContextType|null>(null); | ||
|
|
||
| export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { | ||
| const DEFAULT_THEME = "dark"; | ||
| const [theme, setThemeMode] = useState<ITheme>(DEFAULT_THEME); | ||
|
|
||
| export default function RootLayout({children}: Readonly<{ children: React.ReactNode }>) { | ||
| useEffect(() => { | ||
| const storedTheme = localStorage.getItem('theme') as ITheme; | ||
| if (storedTheme) { | ||
| setThemeMode(storedTheme); | ||
| } else { | ||
| localStorage.setItem('theme', DEFAULT_THEME); | ||
| setThemeMode(DEFAULT_THEME); | ||
| } | ||
| }, []); | ||
|
|
||
| const DEFAULT_THEME:'dark'|'light' = 'dark'; | ||
| const [theme,setThemeMode] = useState<'dark'|'light'>(DEFAULT_THEME); | ||
|
|
||
| const currentTheme = ():'dark'|'light' => { | ||
| if (typeof window !== 'undefined') { | ||
| const t = localStorage.getItem('theme') as 'dark'|'light'; | ||
| if(!t){ | ||
| localStorage.setItem('theme',DEFAULT_THEME); | ||
| return DEFAULT_THEME; | ||
| } else { | ||
| return t; | ||
| } | ||
| } | ||
| return DEFAULT_THEME; | ||
| } | ||
| useEffect(() => { | ||
| document.documentElement.className = theme as ITheme; | ||
| }, [theme]); | ||
|
|
||
|
|
||
| const setTheme = useCallback((newTheme:'dark'|'light') => { | ||
| if(currentTheme()!==newTheme && currentTheme()!==null){ | ||
| localStorage.setItem('theme',newTheme); | ||
| const setTheme = useCallback( | ||
| (newTheme: ITheme) => { | ||
| if (theme !== newTheme) { | ||
| localStorage.setItem('theme', newTheme); | ||
| setThemeMode(newTheme); | ||
| console.log('theme set to',newTheme); | ||
| } | ||
| },[]); | ||
|
|
||
| const tougleTheme = () => { | ||
| setThemeMode((prev) => prev === 'dark' ? 'light' : 'dark'); | ||
| console.log('Theme set to', newTheme); | ||
| } | ||
| }, | ||
| [theme] | ||
| ); | ||
|
|
||
| const toggleTheme = useCallback(() => { | ||
| const newTheme = theme === 'dark' ? 'light' : 'dark'; | ||
| setTheme(newTheme); | ||
| console.log('Toggled theme to', newTheme); | ||
| }, [theme, setTheme]); | ||
|
|
||
| return ( | ||
| <AuthProvider> | ||
|
|
||
| <ThemeContext.Provider value={[setTheme,tougleTheme,currentTheme]}> | ||
| <html className={theme} lang="en"> | ||
| <body className={`${geistSans.variable} ${geistMono.variable} dark:bg-dark-gradient bg-light-gradient antialiased`} > | ||
| <ThemeContext.Provider value={{ setTheme, toggleTheme, theme }}> | ||
| <html lang="en"> | ||
| <body | ||
| className={`${geistSans.variable} ${geistMono.variable} dark:bg-dark-gradient bg-light-gradient antialiased`} | ||
| > | ||
| {children} | ||
| </body> | ||
| </html> | ||
| </ThemeContext.Provider> | ||
|
|
||
| </html> | ||
| </ThemeContext.Provider> | ||
| </AuthProvider> | ||
| ); | ||
|
|
||
|
|
||
| }; | ||
|
|
||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export type ITheme = 'dark' | 'light'; | ||
|
|
||
| export interface IThemeContextType { | ||
| theme: ITheme; | ||
| toggleTheme: () => void; | ||
| setTheme: (newTheme: 'dark' | 'light') => void; | ||
| } |