lychee theme

components/settings/DisplaySettings.tsx

@@ -50,6 +50,7 @@ const DisplaySettings = () => {
       'Avocado',
       'Banana',
       'Blueberry',
+      'Lychee',
       // 'Smoothy',
     ]
   }, [t])

components/trade/TradingViewChart.tsx

@@ -143,7 +143,10 @@ const TradingViewChart = () => {
         fullscreen: defaultProps.fullscreen,
         autosize: defaultProps.autosize,
         studies_overrides: defaultProps.studiesOverrides,
-        theme: theme === 'Light' || theme === 'Banana' ? 'Light' : 'Dark',
+        theme:
+          theme === 'Light' || theme === 'Banana' || theme === 'Lychee'
+            ? 'Light'
+            : 'Dark',
         custom_css_url: '/styles/tradingview.css',
         loading_screen: {
           backgroundColor:
@@ -159,7 +162,9 @@ const TradingViewChart = () => {
               ? COLORS.BKG1.Avocado
               : theme === 'Blueberry'
               ? COLORS.BKG1.Blueberry
-              : COLORS.BKG1.Banana,
+              : theme === 'Banana'
+              ? COLORS.BKG1.Banana
+              : COLORS.BKG1.Lychee,
         },
         overrides: {
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,

styles/colors.ts

@@ -7,6 +7,7 @@ export const COLORS: any = {
     Medium: '#1d1d20',
     Blueberry: '#0e265d',
     Banana: '#fcf9cf',
+    Lychee: '#faebec',
   },
   BKG2: {
     'Mango Classic': '#282433',
@@ -16,6 +17,7 @@ export const COLORS: any = {
     Medium: '#29292e',
     Blueberry: '#112f73',
     Banana: '#f7f2ba',
+    Lychee: '#f4d7d9',
   },
   BKG3: {
     'Mango Classic': '#332e42',
@@ -25,6 +27,7 @@ export const COLORS: any = {
     Medium: '#35353b',
     Blueberry: '#15388a',
     Banana: '#f0eaa8',
+    Lychee: '#efc3c6',
   },
   BKG4: {
     'Mango Classic': '#3f3851',
@@ -34,6 +37,7 @@ export const COLORS: any = {
     Medium: '#414149',
     Blueberry: '#1841a0',
     Banana: '#e6df99',
+    Lychee: '#eaaeb2',
   },
   FGD4: {
     'Mango Classic': '#9189ae',
@@ -43,6 +47,7 @@ export const COLORS: any = {
     Medium: '#808080',
     Blueberry: '#6b94e6',
     Banana: '#7b7b65',
+    Lychee: '#b7343a',
   },
   UP: {
     'Mango Classic': '#A6CD03',
@@ -52,6 +57,7 @@ export const COLORS: any = {
     Medium: '#4aa13a',
     Blueberry: '#15d1a2',
     Banana: '#86AE7E',
+    Lychee: '#2d805e',
   },
   ACTIVE: {
     'Mango Classic': '#f1c84b',
@@ -61,6 +67,7 @@ export const COLORS: any = {
     Medium: '#f1c84b',
     Blueberry: '#f1c84b',
     Banana: '#606afb',
+    Lychee: '#040e9f',
   },
   DOWN: {
     'Mango Classic': '#F84638',
@@ -70,5 +77,6 @@ export const COLORS: any = {
     Medium: '#d35555',
     Blueberry: '#d1534d',
     Banana: '#BE6A6A',
+    Lychee: '#c5303a',
   },
 }

styles/globals.css

@@ -235,6 +235,32 @@ th {
   --warning: theme('colors.banana-theme.warning');
 }
 
+[data-theme='Lychee'] {
+  --active: theme('colors.lychee-theme.active.DEFAULT');
+  --active-dark: theme('colors.lychee-theme.active.dark');
+  --down: theme('colors.lychee-theme.down.DEFAULT');
+  --down-dark: theme('colors.lychee-theme.down.dark');
+  --down-muted: theme('colors.lychee-theme.down.muted');
+  --up: theme('colors.lychee-theme.up.DEFAULT');
+  --up-dark: theme('colors.lychee-theme.up.dark');
+  --up-muted: theme('colors.lychee-theme.up.muted');
+  --link: theme('colors.lychee-theme.link.DEFAULT');
+  --link-hover: theme('colors.lychee-theme.link.hover');
+  --bkg-1: theme('colors.lychee-theme.bkg-1');
+  --bkg-2: theme('colors.lychee-theme.bkg-2');
+  --bkg-3: theme('colors.lychee-theme.bkg-3');
+  --bkg-4: theme('colors.lychee-theme.bkg-4');
+  --fgd-1: theme('colors.lychee-theme.fgd-1');
+  --fgd-2: theme('colors.lychee-theme.fgd-2');
+  --fgd-3: theme('colors.lychee-theme.fgd-3');
+  --fgd-4: theme('colors.lychee-theme.fgd-4');
+  --button: theme('colors.lychee-theme.button.DEFAULT');
+  --button-hover: theme('colors.lychee-theme.button.hover');
+  --error: theme('colors.lychee-theme.error');
+  --success: theme('colors.lychee-theme.success');
+  --warning: theme('colors.lychee-theme.warning');
+}
+
 /* [data-theme='Smoothy'] {
   --active: theme('colors.smoothy-theme.active.DEFAULT');
   --active-dark: theme('colors.smoothy-theme.active.dark');

tailwind.config.js

@@ -246,6 +246,39 @@ module.exports = {
           'fgd-3': 'hsl(120, 20%, 73%)',
           'fgd-4': 'hsl(120, 20%, 63%)',
         },
+
+        'lychee-theme': {
+          active: {
+            DEFAULT: 'hsl(236, 95%, 32%)',
+            dark: 'hsl(236, 95%, 27%)',
+          },
+          button: {
+            DEFAULT: 'hsl(356, 61%, 80%)',
+            hover: 'hsl(356, 61%, 75%)',
+          },
+          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
+          down: {
+            DEFAULT: 'hsl(356, 61%, 48%)',
+            dark: 'hsl(356, 61%, 43%)',
+            muted: 'hsl(356, 21%, 43%)',
+          },
+          up: {
+            DEFAULT: 'hsl(155, 48%, 34%)',
+            dark: 'hsl(155, 48%, 29%)',
+            muted: 'hsl(155, 8%, 29%)',
+          },
+          error: 'hsl(356, 61%, 48%)',
+          success: 'hsl(155, 48%, 34%)',
+          warning: 'hsl(33, 100%, 44%)',
+          'bkg-1': 'hsl(356, 58%, 95%)',
+          'bkg-2': 'hsl(356, 58%, 90%)',
+          'bkg-3': 'hsl(356, 58%, 85%)',
+          'bkg-4': 'hsl(356, 58%, 80%)',
+          'fgd-1': 'hsl(357, 56%, 21%)',
+          'fgd-2': 'hsl(357, 51%, 31%)',
+          'fgd-3': 'hsl(357, 46%, 41%)',
+          'fgd-4': 'hsl(357, 41%, 51%)',
+        },
         'th-bkg-1': 'var(--bkg-1)',
         'th-bkg-2': 'var(--bkg-2)',
         'th-bkg-3': 'var(--bkg-3)',