diff --git a/source/src/components/PostCard.tsx b/source/src/components/PostCard.tsx index 30fe30e..717d146 100644 --- a/source/src/components/PostCard.tsx +++ b/source/src/components/PostCard.tsx @@ -40,8 +40,8 @@ const StyledTitle = styled.h1` const StyledMetaContainer = styled.small` color: ${(props) => theming.theme(props.theme.currentTheme, { - light: "#555", - dark: "#CCC", + light: theming.light.color2, + dark: theming.dark.color2, })}; ` diff --git a/source/src/components/Tag.tsx b/source/src/components/Tag.tsx index 2f1fd9b..eeafcdb 100644 --- a/source/src/components/Tag.tsx +++ b/source/src/components/Tag.tsx @@ -9,11 +9,14 @@ import theming from "../styles/theming" const StyledTag = styled.div` text-align: center; - padding: 0 0.8rem 0.1rem 0.8rem; + margin-right: 0.8rem; border-radius: 10px; - background-color: ${theming.color.linkColor}; - color: white; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.color2, + dark: theming.dark.color2, + })}; ` interface Props { diff --git a/source/src/styles/theming.ts b/source/src/styles/theming.ts index 490f404..75c1da4 100644 --- a/source/src/styles/theming.ts +++ b/source/src/styles/theming.ts @@ -13,7 +13,7 @@ function theme( return values[currentTheme] } -export default { +const theming = { theme: theme, font: { regular: "'Noto Sans KR', sans-serif", @@ -38,6 +38,7 @@ export default { backgroundColor2: "#2F3136", color0: "#FFFFFF", color1: "#EEEEEE", + color2: "#CCC", }, light: { backgroundColor0: "#FFFFFF", @@ -45,6 +46,7 @@ export default { backgroundColor2: "#DDDDDD", color0: "#000000", color1: "#111111", + color2: "#555", }, styles: { hoverCard: css` @@ -76,6 +78,7 @@ export default { light: "white", dark: "#202225", })}; + &:hover { background-color: ${(props) => theme(props.theme.currentTheme, { @@ -86,3 +89,5 @@ export default { `, }, } + +export default theming