jungle theme

components/settings/DisplaySettings.tsx

@@ -45,8 +45,9 @@ const DisplaySettings = () => {
     return [
       t('settings:light'),
       t('settings:dark'),
+      'Jungle',
       t('settings:mango'),
-      'Smoothy',
+      // 'Smoothy',
     ]
   }, [t])
 

styles/colors.ts

@@ -4,47 +4,55 @@ export const COLORS: any = {
     Dark: 'hsl(240, 6%, 7%)',
     Light: 'hsl(0, 0%, 99%)',
     Smoothy: 'hsl(45, 100%, 96%)',
+    Jungle: 'hsl(120, 18%, 12%)',
   },
   BKG2: {
     Mango: 'hsl(256, 18%, 17%)',
     Dark: 'hsl(240, 6%, 12%)',
     Light: 'hsl(0, 0%, 94%)',
     Smoothy: 'hsl(45, 100%, 91%)',
+    Jungle: 'hsl(120, 18%, 17%)',
   },
   BKG3: {
     Mango: 'hsl(256, 18%, 22%)',
     Dark: 'hsl(240, 6%, 17%)',
     Light: 'hsl(0, 0%, 89%)',
     Smoothy: 'hsl(45, 100%, 86%)',
+    Jungle: 'hsl(120, 18%, 22%)',
   },
   BKG4: {
     Mango: 'hsl(256, 18%, 27%)',
     Dark: 'hsl(240, 6%, 22%)',
     Light: 'hsl(0, 0%, 84%)',
     Smoothy: 'hsl(45, 100%, 81%)',
+    Jungle: 'hsl(120, 18%, 27%)',
   },
   FGD4: {
     Mango: 'hsl(253, 19%, 61%)',
     Dark: 'hsl(0, 0%, 52%)',
     Light: 'hsl(188, 71%, 38%)',
     Smoothy: 'hsl(45, 100%, 34%)',
+    Jungle: 'hsl(120, 20%, 63%)',
   },
   UP: {
     Mango: 'hsl(72, 97%, 41%)',
     Dark: 'hsl(111, 47%, 53%)',
     Light: 'hsl(111, 47%, 53%)',
     Smoothy: 'hsl(110, 73%, 40%)',
+    Jungle: 'hsl(120, 50%, 53%)',
   },
   ACTIVE: {
     Mango: 'hsl(45, 86%, 62%)',
     Dark: 'hsl(45, 86%, 62%)',
     Light: 'hsl(33, 100%, 57%)',
     Smoothy: 'hsl(321, 100%, 48%)',
+    Jungle: 'hsl(120, 100%, 73%)',
   },
   DOWN: {
     Mango: 'hsl(4, 93%, 60%)',
     Dark: 'hsl(0, 67%, 48%)',
     Light: 'hsl(0, 67%, 48%)',
     Smoothy: 'hsl(0, 100%, 56%)',
+    Jungle: 'hsl(0, 100%, 73%)',
   },
 }

styles/globals.css

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

tailwind.config.js

@@ -150,6 +150,38 @@ module.exports = {
           'fgd-3': 'hsl(45, 100%, 24%)',
           'fgd-4': 'hsl(45, 100%, 34%)',
         },
+        'jungle-theme': {
+          active: {
+            DEFAULT: 'hsl(120, 100%, 73%)',
+            dark: 'hsl(120, 100%, 63%)',
+          },
+          button: {
+            DEFAULT: 'hsl(21, 15%, 38%)',
+            hover: 'hsl(21, 15%, 28%)',
+          },
+          link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 47%)' },
+          down: {
+            DEFAULT: 'hsl(0, 100%, 73%)',
+            dark: 'hsl(0, 100%, 63%)',
+            muted: 'hsl(0, 60%, 63%)',
+          },
+          up: {
+            DEFAULT: 'hsl(120, 50%, 53%)',
+            dark: 'hsl(120, 50%, 43%)',
+            muted: 'hsl(120, 10%, 43%)',
+          },
+          error: 'hsl(0, 100%, 73%)',
+          success: 'hsl(120, 50%, 53%)',
+          warning: 'hsl(31, 80%, 57%)',
+          'bkg-1': 'hsl(120, 18%, 12%)',
+          'bkg-2': 'hsl(120, 18%, 17%)',
+          'bkg-3': 'hsl(120, 18%, 22%)',
+          'bkg-4': 'hsl(120, 18%, 27%)',
+          'fgd-1': 'hsl(120, 20%, 93%)',
+          'fgd-2': 'hsl(120, 20%, 83%)',
+          'fgd-3': 'hsl(120, 20%, 73%)',
+          'fgd-4': 'hsl(120, 20%, 63%)',
+        },
         'th-bkg-1': 'var(--bkg-1)',
         'th-bkg-2': 'var(--bkg-2)',
         'th-bkg-3': 'var(--bkg-3)',