diff --git a/src/components/Navbar/ThemeToggleButton.tsx b/src/components/Navbar/ThemeToggleButton.tsx index 8af3503..83ade85 100644 --- a/src/components/Navbar/ThemeToggleButton.tsx +++ b/src/components/Navbar/ThemeToggleButton.tsx @@ -1,4 +1,5 @@ -import styled, { ThemeConsumer } from "styled-components" +import { useContext } from "react" +import styled from "styled-components" import { isMobile } from "react-device-detect" import ReactTooltip from "react-tooltip" @@ -6,6 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons" import theming from "../../styles/theming" +import { ActionsEnum, globalContext } from "../../globalContext" const StyledThemeButton = styled.div` ${theming.styles.navbarButtonStyle} @@ -17,26 +19,35 @@ const StyledThemeButton = styled.div` ` const ThemeToggleButton = () => { + const { globalState, dispatch } = useContext(globalContext) + const theme = globalState.theme + return ( - - {({ currentTheme, setTheme }) => ( - <> - setTheme(currentTheme === "dark" ? "light" : "dark")} - > - {currentTheme == "dark" && } - {currentTheme == "light" && } - - {!isMobile && ( - - Using {currentTheme} theme - + <> + + dispatch({ + type: ActionsEnum.UPDATE_THEME, + payload: theme === "dark" ? "light" : "dark", + }) + } + > + {theme == "dark" && } + {theme == "light" && } + + + {!isMobile && ( + + {globalState.locale == "en" ? ( + Using {theme} theme + ) : ( + {theme == "dark" ? "어두운" : "밝은"} 테마 사용중 )} - + )} - + ) }