removed styled-theming dependency

source/package.json

@@ -42,13 +42,11 @@
 		"react-scripts": "^4.0.3",
 		"react-tooltip": "^4.2.19",
 		"styled-components": "^5.3.0",
-		"styled-theming": "^2.2.0",
 		"web-vitals": "^1.1.2"
 	},
 	"devDependencies": {
 		"@types/node": "^15.0.2",
 		"@types/styled-components": "^5.1.9",
-		"@types/styled-theming": "^2.2.5",
 		"@typescript-eslint/eslint-plugin": "^4.23.0",
 		"@typescript-eslint/parser": "^4.23.0",
 		"eslint": "^7.26.0",

source/src/App.tsx

@@ -3,7 +3,6 @@ import { ThemeProvider, createGlobalStyle } from "styled-components"
 import { HelmetProvider } from "react-helmet-async"
 import storage from "local-storage-fallback"
 import { useState, useEffect } from "react"
-import theme from "styled-theming"
 import Spinner from "./components/Spinner"
 import LanguageContext from "./LanguageContext"
 import theming from "./theming"
@@ -17,7 +16,7 @@ import NotFound from "./pages/notfound"
 import Portfolio from "./pages/portfolio"
 
 // Theme that will be used throughout the website
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle<{ theme: { currentTheme: string } }>`
 body {
 	overflow-x: hidden;
 	overflow-y: scroll;
@@ -28,11 +27,13 @@ html, body, #root {
 	margin: 0;
 	display: flex;
 	flex-flow: column;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: theming.light.backgroundColor1,
 			dark: theming.dark.backgroundColor1,
 		})};
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: theming.light.color1,
 			dark: theming.dark.color1,
 		})};
@@ -93,7 +94,8 @@ blockquote {
 
 .card {
 	margin: auto;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "white",
 			dark: "#2F3136",
 		})};
@@ -147,14 +149,13 @@ function App() {
 	/**
 	 *  Theme
 	 */
-	const [currentTheme, _setTheme] = useState(() => {
+	const [currentTheme, _setTheme] = useState(
-		const savedTheme = storage.getItem("theme")
+		storage.getItem("theme") || "dark" // get theme from storage and set to "dark" mode if not set already
-		return savedTheme ? JSON.parse(savedTheme) : { mode: "dark" }
+	)
-	})
 
 	// save theme when it is changed
 	useEffect(() => {
-		storage.setItem("theme", JSON.stringify(currentTheme))
+		storage.setItem("theme", currentTheme)
 	}, [currentTheme])
 
 	/**
@@ -184,9 +185,9 @@ function App() {
 		<HelmetProvider>
 			<ThemeProvider
 				theme={{
-					...currentTheme,
+					currentTheme: currentTheme,
 					// eslint-disable-next-line @typescript-eslint/no-unused-vars
-					setTheme: ({ setTheme, ...theme }) => _setTheme(theme), // make setTheme function available in other components
+					setTheme: (setThemeTo) => _setTheme(setThemeTo), // make setTheme function available in other components
 				}}
 			>
 				<LanguageContext.Provider value={languageState}>
@@ -198,9 +199,9 @@ function App() {
 								<Spinner
 									size={200}
 									color={
-										currentTheme.mode == "light"
+										currentTheme == "dark"
-											? theming.light.color1
+											? theming.dark.color1
-											: theming.dark.color1
+											: theming.light.color1
 									}
 								/>
 							) : (

source/src/components/Footer.tsx

@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import styled from "styled-components"
-import theme from "styled-theming"
+import theming from "../theming"
 
 const StyledFooter = styled.footer`
 	display: flex;
@@ -9,11 +9,13 @@ const StyledFooter = styled.footer`
 	margin-bottom: 1px; /* footer goes outside the page by 1 px for some reason */
 	padding: 50px 10px;
 	background-color: white;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "white",
 			dark: "black",
 		})};
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "black",
 			dark: "white",
 		})};
@@ -30,13 +32,15 @@ const StyledFooter = styled.footer`
 const StyledLink = styled.a`
 	width: 30px;
 	font-size: 2rem;
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "lightgrey",
 			dark: "grey",
 		})};
 
 	&:hover {
-		color: ${theme("mode", {
+		color: ${(props) =>
+			theming.theme(props.theme.currentTheme, {
 				light: "black",
 				dark: "white",
 			})};

source/src/components/Navbar.tsx

@@ -1,7 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import styled from "styled-components"
-import theme from "styled-theming"
 import ReactTooltip from "react-tooltip"
 import NavbarData from "../data/NavbarData"
 import theming from "../theming"
@@ -18,11 +17,13 @@ const StyledNav = styled.nav`
 	height: 2rem;
 	margin: 0;
 	padding: 1rem;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: theming.light.backgroundColor0,
 			dark: theming.dark.backgroundColor0,
 		})};
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: theming.light.color0,
 			dark: theming.dark.color0,
 		})};

source/src/components/SearchBox.tsx

@@ -1,23 +1,26 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faSearch } from "@fortawesome/free-solid-svg-icons"
 import styled from "styled-components"
-import theme from "styled-theming"
+import theming from "../theming"
 
 const StyledSearchBoxContainer = styled.div`
 	display: flex;
 	justify-content: left;
 	align-items: center;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "white",
 			dark: "#202225",
 		})};
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "black",
 			dark: "#CFD0D0",
 		})};
 
 	&:hover {
-		background-color: ${theme("mode", {
+		background-color: ${(props) =>
+			theming.theme(props.theme.currentTheme, {
 				light: "whitesmoke",
 				dark: "#36393F",
 			})};

source/src/components/Sidebar.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react"
 import styled, { css } from "styled-components"
 import NavbarData from "../data/NavbarData"
-import theme from "styled-theming"
 import ReactTooltip from "react-tooltip"
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
@@ -67,11 +66,13 @@ const SidebarNav = styled.nav<StateProps>`
 	z-index: 30;
 	overflow-x: hidden;
 	overflow-y: scroll;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: theming.light.backgroundColor0,
 			dark: theming.dark.backgroundColor0,
 		})};
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: theming.light.color0,
 			dark: theming.dark.color0,
 		})};

source/src/components/ThemeToggleButton.tsx

@@ -1,7 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
 import styled, { ThemeConsumer } from "styled-components"
-import theme from "styled-theming"
 
 import ReactTooltip from "react-tooltip"
 
@@ -9,7 +8,8 @@ import theming from "../theming"
 
 const StyledThemeButton = styled.div`
 	${theming.styles.navbarButtonStyle}
-	${theme("mode", {
+	${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "",
 			dark: "transform: scaleX(-1);\
 			-moz-transform: scaleX(-1);\
@@ -21,29 +21,25 @@ const StyledThemeButton = styled.div`
 function Navbar() {
 	return (
 		<ThemeConsumer>
-			{(_theme) => (
+			{({ currentTheme, setTheme }) => (
 				<>
 					<StyledThemeButton
 						data-tip
 						data-for="theme"
 						className="right"
 						onClick={() =>
-							_theme.setTheme(
+							setTheme(currentTheme === "dark" ? "light" : "dark")
-								_theme.mode === "dark"
-									? { ..._theme, mode: "light" }
-									: { ..._theme, mode: "dark" }
-							)
 						}
 					>
-						{_theme.mode == "dark" && (
+						{currentTheme == "dark" && (
 							<FontAwesomeIcon icon={faMoon} />
 						)}
-						{_theme.mode == "light" && (
+						{currentTheme == "light" && (
 							<FontAwesomeIcon icon={faSun} />
 						)}
 					</StyledThemeButton>
 					<ReactTooltip id="theme" type="dark" effect="solid">
-						<span>Using {_theme.mode} theme</span>
+						<span>Using {currentTheme} theme</span>
 					</ReactTooltip>
 				</>
 			)}

source/src/pages/home.tsx

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom"
 import styled from "styled-components"
-import theme from "styled-theming"
+import theming from "../theming"
 import marked from "marked"
 import { Helmet } from "react-helmet-async"
 
@@ -10,7 +10,8 @@ const StyledPostList = styled.div`
 	padding-top: 2rem;
 	margin: auto;
 	text-align: center;
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "#111111",
 			dark: "#EEEEEE",
 		})};
@@ -30,7 +31,8 @@ const StyledTitle = styled.h1`
 const StyledLink = styled(Link)`
 	text-decoration: none;
 
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "black",
 			dark: "white",
 		})};

source/src/pages/notfound.tsx

@@ -1,12 +1,13 @@
 import styled from "styled-components"
-import theme from "styled-theming"
+import theming from "../theming"
 import { Helmet } from "react-helmet-async"
 
 const StyledNotFound = styled.div`
 	margin: auto;
 	margin-top: 2rem;
 	text-align: center;
-	color: ${theme("mode", {
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
 			light: "#111111",
 			dark: "#EEEEEE",
 		})};

source/src/theming.ts

@@ -3,10 +3,14 @@
  *	It makes changing values easier
  */
 
-import theme from "styled-theming"
 import { css } from "styled-components"
 
+function theme(currentTheme, values) {
+	return values[currentTheme]
+}
+
 export default {
+	theme: theme,
 	font: {
 		regular: "'Noto Sans KR', sans-serif",
 		code: "'Source Code Pro', monospace",
@@ -45,16 +49,19 @@ export default {
 			text-decoration: none;
 			margin: 0.1em;
 			transition: transform 0.1s linear;
-			color: ${theme("mode", {
+			color: ${(props) =>
+				theme(props.theme.currentTheme, {
 					light: "black",
 					dark: "#CFD0D0",
 				})};
-			background-color: ${theme("mode", {
+			background-color: ${(props) =>
+				theme(props.theme.currentTheme, {
 					light: "white",
 					dark: "#202225",
 				})};
 			&:hover {
-				background-color: ${theme("mode", {
+				background-color: ${(props) =>
+					theme(props.theme.currentTheme, {
 						light: "lightgrey",
 						dark: "#36393F",
 					})};