Utilising localStorage for theme saving
This commit is contained in:
parent
cc9a7e0d5e
commit
5616975351
2 changed files with 12 additions and 19 deletions
|
@ -5,8 +5,9 @@ import type { NextPage } from 'next'
|
|||
import { AppProps } from 'next/app';
|
||||
import { DefaultTheme, ThemeProvider } from 'styled-components';
|
||||
import { createContext, useContext, useEffect, useState } from 'react'
|
||||
import { getCookie, getCookies, setCookie } from 'cookies-next'
|
||||
import { darkTheme } from '../components/themes';
|
||||
import useSWR from 'swr';
|
||||
import { getTheme } from '../components/themeselector';
|
||||
|
||||
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
|
||||
getLayout?: (page: ReactElement) => ReactNode
|
||||
|
@ -26,10 +27,16 @@ export const useUpdateTheme = () => useContext(ThemeUpdateContext);
|
|||
|
||||
export default function Website({ Component, pageProps }: AppPropsWithLayout) {
|
||||
const [selectedTheme, setselectedTheme] = useState(darkTheme);
|
||||
//console.log("Selected Theme: ", selectedTheme); // DEBUG
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setCookie('theme', selectedTheme.themeId);
|
||||
const storedThemeIdTemp = localStorage.getItem("theme");
|
||||
// get stored theme data
|
||||
// if theme data differs set it
|
||||
// if not just exit
|
||||
if (storedThemeIdTemp && parseInt(storedThemeIdTemp) !== selectedTheme.themeId) {
|
||||
setselectedTheme(getTheme(parseInt(storedThemeIdTemp)))
|
||||
}
|
||||
}, [selectedTheme])
|
||||
|
||||
|
||||
|
@ -45,12 +52,3 @@ export default function Website({ Component, pageProps }: AppPropsWithLayout) {
|
|||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
|
||||
return {
|
||||
props: {
|
||||
token: {},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,12 +1,7 @@
|
|||
import { getCookie, getCookies, setCookie } from 'cookies-next';
|
||||
import { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
|
||||
import { useUpdateTheme } from './_app';
|
||||
import { darkTheme } from '../components/themes';
|
||||
import { GetServerSidePropsContext } from 'next';
|
||||
|
||||
export default function Document(ctx: DocumentContext) {
|
||||
const updateTheme = useUpdateTheme();
|
||||
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang='en'>
|
||||
<Head />
|
||||
|
|
Loading…
Reference in a new issue