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,14 +27,16 @@ html, body, #root {
 	margin: 0;
 	display: flex;
 	flex-flow: column;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
-		light: theming.light.backgroundColor1,
+		theming.theme(props.theme.currentTheme, {
-		dark: theming.dark.backgroundColor1,
+			light: theming.light.backgroundColor1,
-	})};
+			dark: theming.dark.backgroundColor1,
-	color: ${theme("mode", {
+		})};
-		light: theming.light.color1,
+	color: ${(props) =>
-		dark: theming.dark.color1,
+		theming.theme(props.theme.currentTheme, {
-	})};
+			light: theming.light.color1,
+			dark: theming.dark.color1,
+		})};
 	font-size: ${theming.size.medium};
 	font-family: ${theming.font.regular};
 	-webkit-font-smoothing: antialiased;
@@ -93,10 +94,11 @@ blockquote {
 
 .card {
 	margin: auto;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
-		light: "white",
+		theming.theme(props.theme.currentTheme, {
-		dark: "#2F3136",
+			light: "white",
-	})};
+			dark: "#2F3136",
+		})};
 	padding: 2rem;
 	border-radius: 6px;
 	box-shadow: 0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);
@@ -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,14 +9,16 @@ 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) =>
-		light: "white",
+		theming.theme(props.theme.currentTheme, {
-		dark: "black",
+			light: "white",
-	})};
+			dark: "black",
-	color: ${theme("mode", {
+		})};
-		light: "black",
+	color: ${(props) =>
-		dark: "white",
+		theming.theme(props.theme.currentTheme, {
-	})};
+			light: "black",
+			dark: "white",
+		})};
 	* {
 		margin: 0;
 		padding: 0;
@@ -30,16 +32,18 @@ const StyledFooter = styled.footer`
 const StyledLink = styled.a`
 	width: 30px;
 	font-size: 2rem;
-	color: ${theme("mode", {
+	color: ${(props) =>
-		light: "lightgrey",
+		theming.theme(props.theme.currentTheme, {
-		dark: "grey",
+			light: "lightgrey",
-	})};
+			dark: "grey",
+		})};
 
 	&:hover {
-		color: ${theme("mode", {
+		color: ${(props) =>
-			light: "black",
+			theming.theme(props.theme.currentTheme, {
-			dark: "white",
+				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,14 +17,16 @@ const StyledNav = styled.nav`
 	height: 2rem;
 	margin: 0;
 	padding: 1rem;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
-		light: theming.light.backgroundColor0,
+		theming.theme(props.theme.currentTheme, {
-		dark: theming.dark.backgroundColor0,
+			light: theming.light.backgroundColor0,
-	})};
+			dark: theming.dark.backgroundColor0,
-	color: ${theme("mode", {
+		})};
-		light: theming.light.color0,
+	color: ${(props) =>
-		dark: theming.dark.color0,
+		theming.theme(props.theme.currentTheme, {
-	})};
+			light: theming.light.color0,
+			dark: theming.dark.color0,
+		})};
 	box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
 
 	.right {

source/src/components/SearchBox.tsx

@@ -1,26 +1,29 @@
 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) =>
-		light: "white",
+		theming.theme(props.theme.currentTheme, {
-		dark: "#202225",
+			light: "white",
-	})};
+			dark: "#202225",
-	color: ${theme("mode", {
+		})};
-		light: "black",
+	color: ${(props) =>
-		dark: "#CFD0D0",
+		theming.theme(props.theme.currentTheme, {
-	})};
+			light: "black",
+			dark: "#CFD0D0",
+		})};
 
 	&:hover {
-		background-color: ${theme("mode", {
+		background-color: ${(props) =>
-			light: "whitesmoke",
+			theming.theme(props.theme.currentTheme, {
-			dark: "#36393F",
+				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,14 +66,16 @@ const SidebarNav = styled.nav<StateProps>`
 	z-index: 30;
 	overflow-x: hidden;
 	overflow-y: scroll;
-	background-color: ${theme("mode", {
+	background-color: ${(props) =>
-		light: theming.light.backgroundColor0,
+		theming.theme(props.theme.currentTheme, {
-		dark: theming.dark.backgroundColor0,
+			light: theming.light.backgroundColor0,
-	})};
+			dark: theming.dark.backgroundColor0,
-	color: ${theme("mode", {
+		})};
-		light: theming.light.color0,
+	color: ${(props) =>
-		dark: theming.dark.color0,
+		theming.theme(props.theme.currentTheme, {
-	})};
+			light: theming.light.color0,
+			dark: theming.dark.color0,
+		})};
 `
 
 const SidebarWrap = styled.div`

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,41 +8,38 @@ import theming from "../theming"
 
 const StyledThemeButton = styled.div`
 	${theming.styles.navbarButtonStyle}
-	${theme("mode", {
+	${(props) =>
-		light: "",
+		theming.theme(props.theme.currentTheme, {
-		dark: "transform: scaleX(-1);\
+			light: "",
+			dark: "transform: scaleX(-1);\
 			-moz-transform: scaleX(-1);\
 			-webkit-transform: scaleX(-1);\
 			-ms-transform: scaleX(-1);",
-	})};
+		})};
 `
 
 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,10 +10,11 @@ const StyledPostList = styled.div`
 	padding-top: 2rem;
 	margin: auto;
 	text-align: center;
-	color: ${theme("mode", {
+	color: ${(props) =>
-		light: "#111111",
+		theming.theme(props.theme.currentTheme, {
-		dark: "#EEEEEE",
+			light: "#111111",
-	})};
+			dark: "#EEEEEE",
+		})};
 `
 
 const StyledH1 = styled.h1`
@@ -30,10 +31,11 @@ const StyledTitle = styled.h1`
 const StyledLink = styled(Link)`
 	text-decoration: none;
 
-	color: ${theme("mode", {
+	color: ${(props) =>
-		light: "black",
+		theming.theme(props.theme.currentTheme, {
-		dark: "white",
+			light: "black",
-	})};
+			dark: "white",
+		})};
 
 	&:hover {
 		text-decoration: underline;

source/src/pages/notfound.tsx

@@ -1,15 +1,16 @@
 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) =>
-		light: "#111111",
+		theming.theme(props.theme.currentTheme, {
-		dark: "#EEEEEE",
+			light: "#111111",
-	})};
+			dark: "#EEEEEE",
+		})};
 `
 
 const Styled404 = styled.h1`

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,19 +49,22 @@ export default {
 			text-decoration: none;
 			margin: 0.1em;
 			transition: transform 0.1s linear;
-			color: ${theme("mode", {
+			color: ${(props) =>
-				light: "black",
+				theme(props.theme.currentTheme, {
-				dark: "#CFD0D0",
+					light: "black",
-			})};
+					dark: "#CFD0D0",
-			background-color: ${theme("mode", {
-				light: "white",
-				dark: "#202225",
-			})};
-			&:hover {
-				background-color: ${theme("mode", {
-					light: "lightgrey",
-					dark: "#36393F",
 				})};
+			background-color: ${(props) =>
+				theme(props.theme.currentTheme, {
+					light: "white",
+					dark: "#202225",
+				})};
+			&:hover {
+				background-color: ${(props) =>
+					theme(props.theme.currentTheme, {
+						light: "lightgrey",
+						dark: "#36393F",
+					})};
 			}
 		`,
 	},