Skip to content

Commit

Permalink
Initial theme switcher functionality - No UI Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
thomas-desmond committed Feb 5, 2024
1 parent c01a362 commit 05cecaf
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 36 deletions.
13 changes: 10 additions & 3 deletions src/components/ui/Navigation/Navigation.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Box, Button, HStack, IconButton, Link, Show, Tooltip } from '@chakra-ui/react';
import { Box, Button, HStack, IconButton, Link, Show, Tooltip, Select } from '@chakra-ui/react';
import { useGameInfoContext } from 'components/Contexts';
import Image from 'next/image';
import Router from 'next/router';
import { FC } from 'react';
import { MdCached, MdOutlineMarkChatRead, MdSave } from 'react-icons/md';
import { InfoModal } from '../InfoModal/InfoModal';
import { ProgressTracker } from '../ProgressTracker/ProgressTracker';
import { useThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher';

interface NavigationProps {
showProgressBar?: boolean;
Expand All @@ -22,6 +23,7 @@ export const Navigation: FC<NavigationProps> = ({
showFeedbackButton = true,
}) => {
const gameInfoContext = useGameInfoContext();
const themeSwitcher = useThemeSwitcher();

return (
<>
Expand All @@ -48,8 +50,8 @@ export const Navigation: FC<NavigationProps> = ({
? 'lg'
: 'sm'
: showProgressBar && showResetButton
? 'md'
: 'sm'
? 'md'
: 'sm'
}
>
<Tooltip label="Leave Feedback" aria-label="Leave Feedback">
Expand Down Expand Up @@ -94,6 +96,11 @@ export const Navigation: FC<NavigationProps> = ({

<InfoModal />
</HStack>
<Select onChange={(event) => themeSwitcher.changeTheme(event.target.selectedOptions[0].value)}>
<option selected hidden disabled value="">Change Theme</option>
<option value='fantasy'>Fantasy</option>
<option value='corporate'>Corporate</option>
</Select>
</Box>
</HStack>
</Box>
Expand Down
65 changes: 35 additions & 30 deletions src/components/ui/ThemeSwitcher/ThemeSwitcher.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,46 @@
import { ChakraProvider, ChakraTheme, extendTheme } from '@chakra-ui/react';
import { withProse } from '@nikolovlazar/chakra-ui-prose';
import sitecoreTheme from '@sitecore/blok-theme';
import { ChakraProvider } from '@chakra-ui/react';
import { corporateTheme } from 'chakra/theme/corporate/theme';
import fantasyTheme from 'chakra/theme/fantasy/theme';
import { useGameInfoContext } from 'components/Contexts';
import { FC, useEffect, useState } from 'react';
import React, { FC, useState, createContext } from 'react';

interface ThemeSwitcherProps {
children: React.ReactNode;
}

export const ThemeSwitcher: FC<ThemeSwitcherProps> = ({ children }) => {
const gameInfoContext = useGameInfoContext();
const [theme, setTheme] = useState<ChakraTheme | Record<string, any>>(sitecoreTheme);

useEffect(() => {
if (gameInfoContext?.theme?.chakraTheme == 'fantasy') {
setTheme(
extendTheme(
fantasyTheme,
withProse({
baseStyle: {
p: {
fontFamily: 'inherit',
},
},
})
)
);
} else if (gameInfoContext?.theme?.chakraTheme == 'corporate') {
setTheme(corporateTheme);
}
}, [gameInfoContext?.theme]);
export const ThemeSwitcher = createContext<ThemeSwitcherType>({} as ThemeSwitcherType);

export interface ThemeSwitcherType {
changeTheme: (themeChoice: string) => void;
}

export const useThemeSwitcher = () => React.useContext(ThemeSwitcher);


export const ThemeSwitcherProvider: FC<ThemeSwitcherProps> = ({ children }) => {
const themes = {
"corporate": corporateTheme,
"fantasy": fantasyTheme
};

const [themeName, setThemeName] = useState<string>("corporate");

const changeTheme = (themeChoice: string) => {
setThemeName(themeChoice);
}

const currentTheme = themes[themeName as keyof typeof themes];

return (
<>
<ChakraProvider theme={theme}>{children}</ChakraProvider>
</>
<ThemeSwitcher.Provider
value={{
changeTheme: (themeChoice: string) => {
changeTheme(themeChoice);
},
}}
>
<ChakraProvider theme={currentTheme}>
{children}
</ChakraProvider>
</ThemeSwitcher.Provider>
);
};
6 changes: 3 additions & 3 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Analytics } from '@vercel/analytics/react';
import { EngageTrackerProvider, GameInfoProvider } from 'components/Contexts';
import { ThemeSwitcher } from 'components/ui';
import { ThemeSwitcherProvider } from 'components/ui';
import * as GTag from 'lib/GTag';
import { AppConfig } from 'models/Config';
import { AppProps } from 'next/app';
Expand Down Expand Up @@ -60,9 +60,9 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
<Analytics />
<EngageTrackerProvider>
<GameInfoProvider>
<ThemeSwitcher>
<ThemeSwitcherProvider>
<Component {...pageProps} />
</ThemeSwitcher>
</ThemeSwitcherProvider>
</GameInfoProvider>
</EngageTrackerProvider>
</>
Expand Down

0 comments on commit 05cecaf

Please sign in to comment.