137 lines
2.8 KiB
TypeScript
137 lines
2.8 KiB
TypeScript
import { ThemeProvider as MuiThemeProvider, createTheme as muiCreateTheme, PaletteMode } from '@mui/material'
|
|
import { useEffect, useState } from 'react'
|
|
import { useCookies } from 'react-cookie'
|
|
import { ToastContainer } from 'react-toastify'
|
|
import { createGlobalStyle, ThemeProvider } from 'styled-components'
|
|
import Container from '../components/container'
|
|
import Footer from '../components/footer'
|
|
import Header from '../components/header'
|
|
import Main from '../components/main'
|
|
import "react-toastify/dist/ReactToastify.css"
|
|
|
|
const GlobalStyle = createGlobalStyle`
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
`
|
|
|
|
const lightTheme = {
|
|
colors: {
|
|
background: "#ffffff",
|
|
color: "#000000",
|
|
error: "#f85b5b"
|
|
},
|
|
pages: {
|
|
index: {
|
|
cards: {
|
|
signin: "#0a60cf",
|
|
register: "#a06800",
|
|
files: "#3d8011",
|
|
settings: "#75006f"
|
|
},
|
|
title: {
|
|
a: "#a109c0"
|
|
}
|
|
}
|
|
},
|
|
footer: {
|
|
borderTop: "#eaeaea"
|
|
}
|
|
}
|
|
|
|
const darkTheme = {
|
|
colors: {
|
|
background: "#131212",
|
|
color: "#ffffff",
|
|
error: "#f85b5b"
|
|
},
|
|
pages: {
|
|
index: {
|
|
cards: {
|
|
signin: "#0a60cf",
|
|
register: "#a06800",
|
|
files: "#54ad19",
|
|
settings: "#c90dbf"
|
|
},
|
|
title: {
|
|
a: "#a109c0"
|
|
}
|
|
}
|
|
},
|
|
footer: {
|
|
borderTop: "#161616"
|
|
}
|
|
}
|
|
|
|
export default function App({ Component, pageProps }) {
|
|
const [cookies, setCookies] = useCookies(["theme"])
|
|
|
|
const [theme, setTheme] = useState(lightTheme)
|
|
const [themeName, setThemeName]: [PaletteMode, any] = useState("light")
|
|
|
|
useEffect(() => {
|
|
if (!cookies.theme) setCookies("theme", "light")
|
|
|
|
if (cookies.theme == "dark"){
|
|
setTheme(darkTheme)
|
|
setThemeName("dark")
|
|
}
|
|
}, [setCookies, setTheme, setThemeName, cookies])
|
|
|
|
const toggleTheme = () => {
|
|
if (cookies.theme == "light") {
|
|
setTheme(darkTheme)
|
|
setThemeName("dark")
|
|
|
|
setCookies("theme", "dark")
|
|
}
|
|
if (cookies.theme == "dark") {
|
|
setTheme(lightTheme)
|
|
setThemeName("light")
|
|
|
|
setCookies("theme", "light")
|
|
}
|
|
}
|
|
|
|
const muiThene = muiCreateTheme({
|
|
palette: {
|
|
mode: themeName,
|
|
},
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<GlobalStyle />
|
|
|
|
<ToastContainer theme={themeName} />
|
|
|
|
<MuiThemeProvider theme={muiThene}>
|
|
<ThemeProvider theme={theme}>
|
|
<Container>
|
|
<Header toggleTheme={toggleTheme} theme={themeName} />
|
|
|
|
<Main>
|
|
<Component {...pageProps} />
|
|
</Main>
|
|
|
|
<Footer />
|
|
</Container>
|
|
</ThemeProvider>
|
|
</MuiThemeProvider>
|
|
</>
|
|
)
|
|
}
|