source/src/components/LanguageToggleButton.tsx

@@ -0,0 +1,35 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faLanguage } from "@fortawesome/free-solid-svg-icons"
+import styled from "styled-components"
+import theme from "styled-theming"
+
+import ReactTooltip from "react-tooltip"
+
+import theming from "../theming"
+
+const StyledThemeButton = styled.div`
+	${theming.styles.navbarButtonStyle}
+	transition: transform 0.2s linear;
+	/* ${theme("mode", {
+		light: "",
+		dark: "transform: scaleX(-1);\
+			-moz-transform: scaleX(-1);\
+			-webkit-transform: scaleX(-1);\
+			-ms-transform: scaleX(-1);",
+	})}; */
+`
+
+function LanguageToggleButton() {
+	return (
+		<>
+			<StyledThemeButton data-tip data-for="language">
+				<FontAwesomeIcon icon={faLanguage} />
+			</StyledThemeButton>
+			<ReactTooltip id="language" type="dark" effect="solid">
+				<span>Change to Korean/English</span>
+			</ReactTooltip>
+		</>
+	)
+}
+
+export default LanguageToggleButton

source/src/components/Navbar.tsx

@@ -10,7 +10,7 @@ import { Link } from "react-router-dom"
 import SearchBox from "./SearchBox"
 import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
-import { faLanguage } from "@fortawesome/free-solid-svg-icons"
+import LanguageToggleButton from "./LanguageToggleButton"
 
 const StyledNav = styled.nav`
 	display: flex;
@@ -71,13 +71,7 @@ function Navbar() {
 			</StyledNavLinks>
 
 			<ThemeToggleButton />
-
-			<StyledALink data-tip data-for="language">
-				<FontAwesomeIcon icon={faLanguage} />
-			</StyledALink>
-			<ReactTooltip id="language" type="dark" effect="solid">
-				<span>Change to Korean/English</span>
-			</ReactTooltip>
+			<LanguageToggleButton />
 
 			<StyledALink
 				data-tip

source/src/components/ThemeToggleButton.tsx

@@ -44,7 +44,7 @@ function Navbar() {
 						)}
 					</StyledThemeButton>
 					<ReactTooltip id="theme" type="dark" effect="solid">
-						<span>Change theme</span>
+						<span>Using {_theme.mode} theme</span>
 					</ReactTooltip>
 				</>
 			)}