AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Update docs for useTheme hook, move meta viewport to _app

Browse Source
This commit is contained in:
Aaron William Po
2023-04-21 23:42:14 -04:00
parent 6a00532f75
commit 603588ca54
4 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ui/Navbar.tsx
View File

@@ -1,9 +1,10 @@
import useMediaQuery from '@/hooks/useMediaQuery';
import useNavbar from '@/hooks/useNavbar';
import Link from 'next/link';
import { FC, useEffect, useState } from 'react';
import { FC } from 'react';
import { MdDarkMode, MdLightMode } from 'react-icons/md';
import { GiHamburgerMenu } from 'react-icons/gi';
import useTheme from '@/hooks/useTheme';
const DesktopLinks: FC = () => {
const { pages, currentURL } = useNavbar();
@@ -56,24 +57,6 @@ const MobileLinks: FC = () => {
);
};
const useTheme = () => {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
if (prefersDarkMode && !savedTheme) {
setTheme('dark');
localStorage.setItem('theme', 'dark');
return;
}
setTheme(savedTheme as 'light' | 'dark');
}, [prefersDarkMode, theme]);
return { theme, setTheme };
};
const Navbar = () => {
const isDesktopView = useMediaQuery('(min-width: 1024px)');

31
src/hooks/useTheme.ts Normal file
View File

@@ -0,0 +1,31 @@
import { useState, useEffect } from 'react';
import useMediaQuery from './useMediaQuery';
/**
* A custom hook to manage the theme of the app. If a preferred theme is not set in
* localStorage, it will use what the user's browser prefers as determined by the
* prefers-color-scheme media query. If the user changes their preferred theme, it will be
* saved in localStorage and used in subsequent visits.
*
* @returns ThemeState.theme - The current theme of the app.
* @returns ThemeState.setTheme - A setter function to change the theme of the app.
*/
const useTheme = () => {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
if (prefersDarkMode && !savedTheme) {
setTheme('dark');
localStorage.setItem('theme', 'dark');
return;
}
setTheme(savedTheme as 'light' | 'dark');
}, [prefersDarkMode, theme]);
return { theme, setTheme };
};
export default useTheme;

8
src/pages/_app.tsx
View File

@@ -6,6 +6,7 @@ import { useEffect } from 'react';
import { themeChange } from 'theme-change';
import { Space_Grotesk } from 'next/font/google';
import Head from 'next/head';
const spaceGrotesk = Space_Grotesk({
subsets: ['latin'],
@@ -26,7 +27,12 @@ export default function App({ Component, pageProps }: AppProps) {
}
`}
</style>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
</Head>
<UserContext.Provider value={{ user, isLoading, error, mutate }}>
<Component {...pageProps} />
</UserContext.Provider>

4
src/pages/_document.tsx
View File

@@ -22,10 +22,6 @@ export default function Document() {
href="favicon/favicon-16x16.png"
/>
<link rel="manifest" href="favicon/site.webmanifest" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
</Head>
<body>
<Main />