use theme css vars instead of hardcoded rgba

components/TopBar.tsx

@@ -111,7 +111,7 @@ const TopBar = () => {
           <ConnectWalletButton />
         ) : (
           <button
-            className="from-mango-theme-yellow to-mango-theme-red-dark relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
+            className="relative flex h-16 items-center justify-center rounded-none bg-th-bkg-2 bg-gradient-to-bl px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
             onClick={handleShowSetup}
           >
             <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />

components/settings/AnimationSettings.tsx

@@ -33,7 +33,7 @@ const AnimationSettings = () => {
 
   return (
     <>
-      <div className="mb-4 flex items-center justify-between pr-4 md:pr-8">
+      <div className="mb-4 flex items-center justify-between pr-4">
         <h2 className="text-base">{t('settings:animations')}</h2>
         <Switch
           checked={!Object.values(animationSettings).includes(false)}

components/settings/SoundSettings.tsx

@@ -34,7 +34,7 @@ const SoundSettings = () => {
 
   return (
     <>
-      <div className="mb-4 flex items-center justify-between pr-4 md:pr-8">
+      <div className="mb-4 flex items-center justify-between pr-4">
         <h2 className="text-base">{t('settings:sounds')}</h2>
         <Switch
           checked={!Object.values(soundSettings).includes(false)}

components/shared/DetailedAreaChart.tsx

@@ -245,10 +245,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                       dataKey={xKey}
                       padding={{ left: 20, right: 20 }}
                       tick={{
-                        fill:
-                          theme === 'Light'
-                            ? 'rgba(0,0,0,0.4)'
-                            : 'rgba(255,255,255,0.6)',
+                        fill: 'var(--fgd-4)',
                         fontSize: 10,
                       }}
                       tickLine={false}
@@ -263,10 +260,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                       domain={['dataMin', 'dataMax']}
                       padding={{ top: 20, bottom: 20 }}
                       tick={{
-                        fill:
-                          theme === 'Light'
-                            ? 'rgba(0,0,0,0.4)'
-                            : 'rgba(255,255,255,0.6)',
+                        fill: 'var(--fgd-4)',
                         fontSize: 10,
                       }}
                       tickFormatter={

components/shared/SheenLoader.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from 'next-themes'
 import { ReactNode } from 'react'
 
 // Children should be a shape or set of shapes with a bg color to animate over
@@ -10,15 +9,10 @@ const SheenLoader = ({
   children: ReactNode
   className?: string
 }) => {
-  const { theme } = useTheme()
   return (
     <div className="flex items-center">
       <div
-        className={`relative ${className} overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_4s_infinite] before:bg-gradient-to-r before:from-transparent ${
-          theme === 'Light'
-            ? 'before:via-[rgba(0,0,0,0.1)]'
-            : 'before:via-[rgba(255,255,255,0.1)]'
-        } before:to-transparent`}
+        className={`relative ${className} overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_4s_infinite] before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-50`}
       >
         {children}
       </div>

components/swap/SwapTokenChart.tsx

@@ -44,7 +44,6 @@ const CustomizedLabel = ({
   value?: number
 }) => {
   const { width } = useViewport()
-  const { theme } = useTheme()
   const [min, max] = useMemo(() => {
     if (chartData.length) {
       const prices = chartData.map((d: any) => d.price)
@@ -59,7 +58,7 @@ const CustomizedLabel = ({
         x={x}
         y={y}
         dy={value === min ? 16 : -8}
-        fill={theme === 'Light' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.7)'}
+        fill="var(--fgd-4)"
         fontSize={10}
         textAnchor={x && y && x > width / 3 ? 'end' : 'start'}
         className="font-mono"

components/token/PriceChart.tsx

@@ -53,10 +53,7 @@ const PriceChart = ({
               dataKey="0"
               padding={{ left: 20, right: 20 }}
               tick={{
-                fill:
-                  theme === 'Light'
-                    ? 'rgba(0,0,0,0.4)'
-                    : 'rgba(255,255,255,0.6)',
+                fill: 'var(--fgd-4)',
                 fontSize: 10,
               }}
               tickLine={false}
@@ -69,10 +66,7 @@ const PriceChart = ({
               domain={['dataMin', 'dataMax']}
               padding={{ top: 20, bottom: 20 }}
               tick={{
-                fill:
-                  theme === 'Light'
-                    ? 'rgba(0,0,0,0.4)'
-                    : 'rgba(255,255,255,0.6)',
+                fill: 'var(--fgd-4)',
                 fontSize: 10,
               }}
               tickFormatter={(x) => `$${x.toFixed(2)}`}

components/trade/TradingViewChart.tsx

@@ -143,7 +143,7 @@ const TradingViewChart = () => {
         fullscreen: defaultProps.fullscreen,
         autosize: defaultProps.autosize,
         studies_overrides: defaultProps.studiesOverrides,
-        theme: theme === 'Light' ? 'Light' : 'Dark',
+        theme: theme === 'Light' || theme === 'Banana' ? 'Light' : 'Dark',
         custom_css_url: '/styles/tradingview.css',
         loading_screen: {
           backgroundColor:
@@ -151,7 +151,15 @@ const TradingViewChart = () => {
               ? COLORS.BKG1.Dark
               : theme === 'Light'
               ? COLORS.BKG1.Light
-              : COLORS.BKG1.Mango,
+              : theme === 'Mango Classic'
+              ? COLORS.BKG1['Mango Classic']
+              : theme === 'Medium'
+              ? COLORS.BKG1.Medium
+              : theme === 'Avocado'
+              ? COLORS.BKG1.Avocado
+              : theme === 'Blueberry'
+              ? COLORS.BKG1.Blueberry
+              : COLORS.BKG1.Banana,
         },
         overrides: {
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,