0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2025-02-12 01:48:10 -05:00

feat: use system color theme

This commit is contained in:
Elias Schneider 2022-10-10 22:30:04 +02:00
parent db7edc4cd6
commit d902aae03f
5 changed files with 51 additions and 108 deletions

View file

@ -1,41 +0,0 @@
import {
ColorScheme,
ColorSchemeProvider,
MantineProvider,
} from "@mantine/core";
import { ModalsProvider } from "@mantine/modals";
import { setCookies } from "cookies-next";
import { Dispatch, ReactNode, SetStateAction } from "react";
import mantineTheme from "../../styles/mantine.style";
const ThemeProvider = ({
children,
colorScheme,
setColorScheme,
}: {
children: ReactNode;
colorScheme: ColorScheme;
setColorScheme: Dispatch<SetStateAction<ColorScheme>>;
}) => {
const toggleColorScheme = (value?: ColorScheme) => {
const nextColorScheme =
value || (colorScheme === "dark" ? "light" : "dark");
setColorScheme(nextColorScheme);
setCookies("mantine-color-scheme", nextColorScheme, {
maxAge: 60 * 60 * 24 * 30,
});
};
return (
<MantineProvider theme={{ colorScheme, ...mantineTheme }} withGlobalStyles>
<ColorSchemeProvider
colorScheme={colorScheme}
toggleColorScheme={toggleColorScheme}
>
<ModalsProvider>{children}</ModalsProvider>
</ColorSchemeProvider>
</MantineProvider>
);
};
export default ThemeProvider;

View file

@ -1,8 +1,7 @@
import { ActionIcon, Avatar, Menu } from "@mantine/core"; import { ActionIcon, Avatar, Menu } from "@mantine/core";
import { NextLink } from "@mantine/next"; import { NextLink } from "@mantine/next";
import { DoorExit, Link, Moon } from "tabler-icons-react"; import { DoorExit, Link } from "tabler-icons-react";
import authService from "../../services/auth.service"; import authService from "../../services/auth.service";
import ToggleThemeButton from "./ToggleThemeButton";
const ActionAvatar = () => { const ActionAvatar = () => {
return ( return (
@ -13,13 +12,12 @@ const ActionAvatar = () => {
</ActionIcon> </ActionIcon>
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown>
<Menu.Label>My account</Menu.Label>
<Menu.Item <Menu.Item
component={NextLink} component={NextLink}
href="/account/shares" href="/account/shares"
icon={<Link size={14} />} icon={<Link size={14} />}
> >
Shares My shares
</Menu.Item> </Menu.Item>
<Menu.Item <Menu.Item
onClick={async () => { onClick={async () => {
@ -29,10 +27,6 @@ const ActionAvatar = () => {
> >
Sign out Sign out
</Menu.Item> </Menu.Item>
<Menu.Label>Settings</Menu.Label>
<Menu.Item icon={<Moon size={14} />}>
<ToggleThemeButton />
</Menu.Item>
</Menu.Dropdown> </Menu.Dropdown>
</Menu> </Menu>
); );

View file

@ -1,4 +1,5 @@
import { import {
Box,
Burger, Burger,
Container, Container,
createStyles, createStyles,
@ -111,7 +112,7 @@ const NavBar = () => {
const user = useUser(); const user = useUser();
const [opened, toggleOpened] = useDisclosure(false); const [opened, toggleOpened] = useDisclosure(false);
const [authenticatedLinks, setAuthenticatedLinks] = useState<Link[]>([ const authenticatedLinks = [
{ {
link: "/upload", link: "/upload",
label: "Upload", label: "Upload",
@ -119,7 +120,7 @@ const NavBar = () => {
{ {
component: <ActionAvatar />, component: <ActionAvatar />,
}, },
]); ];
const [unauthenticatedLinks, setUnauthenticatedLinks] = useState<Link[]>([ const [unauthenticatedLinks, setUnauthenticatedLinks] = useState<Link[]>([
{ {
@ -149,16 +150,15 @@ const NavBar = () => {
}, []); }, []);
const { classes, cx } = useStyles(); const { classes, cx } = useStyles();
console.log(user);
const items = ( const items = (
<> <>
{(user ? authenticatedLinks : unauthenticatedLinks).map((link) => { {(user ? authenticatedLinks : unauthenticatedLinks).map((link) => {
if (link.component) { if (link.component) {
return ( return (
<> <>
<Container pl={5} py={15}> <Box pl={5} py={15}>
{link.component} {link.component}
</Container> </Box>
</> </>
); );
} }
@ -185,8 +185,8 @@ const NavBar = () => {
<Image <Image
src="/img/logo.svg" src="/img/logo.svg"
alt="Pinvgin Share Logo" alt="Pinvgin Share Logo"
height={40} height={35}
width={40} width={35}
/> />
<Text weight={600}>Pingvin Share</Text> <Text weight={600}>Pingvin Share</Text>
</Group> </Group>

View file

@ -1,19 +0,0 @@
import { Switch, useMantineColorScheme } from "@mantine/core";
const ToggleThemeButton = () => {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
return (
<Switch
size="sm"
checked={colorScheme == "dark"}
onClick={(v) =>
toggleColorScheme(v.currentTarget.checked ? "dark" : "light")
}
onLabel="ON"
offLabel="OFF"
/>
);
};
export default ToggleThemeButton;

View file

@ -5,15 +5,14 @@ import {
MantineProvider, MantineProvider,
Stack, Stack,
} from "@mantine/core"; } from "@mantine/core";
import { useColorScheme } from "@mantine/hooks";
import { ModalsProvider } from "@mantine/modals"; import { ModalsProvider } from "@mantine/modals";
import { NotificationsProvider } from "@mantine/notifications"; import { NotificationsProvider } from "@mantine/notifications";
import { getCookie } from "cookies-next"; import { getCookie, setCookies } from "cookies-next";
import { GetServerSidePropsContext } from "next"; import { GetServerSidePropsContext } from "next";
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
import getConfig from "next/config";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import ThemeProvider from "../components/mantine/ThemeProvider";
import Header from "../components/navBar/NavBar"; import Header from "../components/navBar/NavBar";
import { UserContext } from "../hooks/user.hook"; import { UserContext } from "../hooks/user.hook";
import authService from "../services/auth.service"; import authService from "../services/auth.service";
@ -23,12 +22,13 @@ import globalStyle from "../styles/mantine.style";
import { CurrentUser } from "../types/user.type"; import { CurrentUser } from "../types/user.type";
import { GlobalLoadingContext } from "../utils/loading.util"; import { GlobalLoadingContext } from "../utils/loading.util";
const { publicRuntimeConfig } = getConfig()
function App( function App(
props: AppProps & { colorScheme: ColorScheme; environmentVariables: any } props: AppProps & { colorScheme: ColorScheme; environmentVariables: any }
) { ) {
const { Component, pageProps } = props; const { Component, pageProps } = props;
const systemTheme = useColorScheme();
const [colorScheme, setColorScheme] = useState<ColorScheme>( const [colorScheme, setColorScheme] = useState<ColorScheme>(
props.colorScheme props.colorScheme
); );
@ -36,19 +36,29 @@ function App(
const [user, setUser] = useState<CurrentUser | null>(null); const [user, setUser] = useState<CurrentUser | null>(null);
const getInitalData = async () => { const getInitalData = async () => {
console.log(publicRuntimeConfig)
setIsLoading(true); setIsLoading(true);
setUser(await userService.getCurrentUser()); setUser(await userService.getCurrentUser());
setIsLoading(false); setIsLoading(false);
}; };
useEffect(() => { useEffect(() => {
setInterval(async () => await authService.refreshAccessToken(), 30 * 1000); setInterval(async () => await authService.refreshAccessToken(), 30 * 1000);
getInitalData(); getInitalData();
}, []); }, []);
useEffect(() => {
setCookies("mantine-color-scheme", systemTheme, {
maxAge: 60 * 60 * 24 * 30,
});
setColorScheme(systemTheme);
}, [systemTheme]);
return ( return (
<MantineProvider withGlobalStyles withNormalizeCSS theme={globalStyle}> <MantineProvider
<ThemeProvider colorScheme={colorScheme} setColorScheme={setColorScheme}> withGlobalStyles
withNormalizeCSS
theme={{ colorScheme, ...globalStyle }}
>
<GlobalStyle /> <GlobalStyle />
<NotificationsProvider> <NotificationsProvider>
<ModalsProvider> <ModalsProvider>
@ -72,7 +82,6 @@ function App(
</GlobalLoadingContext.Provider> </GlobalLoadingContext.Provider>
</ModalsProvider> </ModalsProvider>
</NotificationsProvider> </NotificationsProvider>
</ThemeProvider>
</MantineProvider> </MantineProvider>
); );
} }