Change tag bg color

Author: velopert

src/components/common/TagItem.tsx

@@ -19,7 +19,7 @@ const TagItem: React.FC<TagItemProps> = ({ name, link }) => {
 
 const tagStyle = css`
   margin-bottom: 0.875rem;
-  background: ${themedPalette.bg_element3};
+  background: ${themedPalette.bg_tag};
   padding-left: 1rem;
   padding-right: 1rem;
   height: 2rem;
@@ -49,7 +49,7 @@ const TagDiv = styled.div`
 const TagLink = styled(Link)`
   ${tagStyle}
   &:hover {
-    background: ${themedPalette.bg_element4};
+    opacity: 0.75;
   }
 `;
 

src/lib/styles/themes.ts

@@ -11,6 +11,7 @@ type ThemeVariables = {
   bg_element8: string;
   bg_invert: string;
   bg_inline_code: string;
+  bg_tag: string;
   text1: string;
   text2: string;
   text3: string;
@@ -63,6 +64,8 @@ const themeVariableSets: Record<Theme, ThemeVariables> = {
     bg_element8: '#FBFDFC',
     bg_invert: '#1E1E1E',
     bg_inline_code: '#E9ECEF',
+    bg_tag: '#F8F9FA',
+
     text1: '#212529',
     text2: '#495057',
     text3: '#868E96',
@@ -109,6 +112,7 @@ const themeVariableSets: Record<Theme, ThemeVariables> = {
     bg_element8: '#0c0c0c',
     bg_invert: '#FFFFFF',
     bg_inline_code: '#363636',
+    bg_tag: '#252525',
     text1: '#ECECEC',
     text2: '#D9D9D9',
     text3: '#ACACAC',