From 1814b7cb3327b61b4f281e8d2efa7af478126916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?=
 <33005392+nguyenhoaidanh@users.noreply.github.com>
Date: Fri, 11 Aug 2023 23:23:54 +0700
Subject: [PATCH] update: color for light theme token security info (#2161)

---
 src/components/swapv2/TokenInfo/SecurityInfo/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
index 67447e3e75..bae066644b 100644
--- a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
+++ b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
@@ -11,6 +11,7 @@ import { ReactComponent as TreadingSecurity } from 'assets/svg/security_trading.
 import { CollapseItem } from 'components/Collapse'
 import { getSecurityTokenInfo } from 'components/swapv2/TokenInfo/utils'
 import useTheme from 'hooks/useTheme'
+import { useIsDarkMode } from 'state/user/hooks'
 
 import { Container } from '../index'
 import Content from './Content'
@@ -18,8 +19,13 @@ import Header from './Header'
 
 export default function SecurityInfo({ token }: { token: Token | undefined }) {
   const theme = useTheme()
-  const style: CSSProperties = { background: rgba(theme.black, 0.2), borderRadius: '16px', padding: '0' }
-  const headerStyle: CSSProperties = { background: rgba(theme.black, 0.48) }
+  const isDarkMode = useIsDarkMode()
+  const style: CSSProperties = {
+    background: isDarkMode ? rgba(theme.black, 0.2) : rgba(theme.subText, 0.04),
+    borderRadius: '16px',
+    padding: '0',
+  }
+  const headerStyle: CSSProperties = { background: isDarkMode ? rgba(theme.black, 0.48) : rgba(theme.subText, 0.08) }
   const arrowStyle: CSSProperties = { marginRight: '6px', color: theme.subText }
   const { data, isLoading } = useGetSecurityTokenInfoQuery(
     { chainId: token?.chainId as ChainId, address: token?.address ?? '' },