feat: add green theme

haydenull · May 1, 2022 · 792970d · 792970d
1 parent 0dd4871
commit 792970d
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 12 deletions.
diff --git a/src/components/GaugeChart.tsx b/src/components/GaugeChart.tsx
@@ -2,6 +2,13 @@ import type { ECharts } from 'echarts/lib/echarts'
 import React, { useEffect, useRef, useState } from 'react'
 import * as echarts from 'echarts/core'
 
+// const BACK_COLOR = '#f2f6ff'
+// const LINE_COLOR = '#5146a0'
+// const SHADOW_COLOR = 'rgba(58,77,233,0.8)'
+const BACK_COLOR = '#e9f2f0'
+const LINE_COLOR = '#058f68'
+const SHADOW_COLOR = 'rgba(5, 143, 104, 0.8)'
+
 const GaugeChart: React.FC<{
   progress: number
 }> = ({ progress = 0 }) => {
@@ -25,8 +32,8 @@ const GaugeChart: React.FC<{
               containLabel: true,
             },
             itemStyle: {
-              color: '#5146a0',
-              shadowColor: 'rgba(58,77,233,0.8)',
+              color: LINE_COLOR,
+              shadowColor: SHADOW_COLOR,
               shadowBlur: 10,
               shadowOffsetX: 2,
               shadowOffsetY: 2
@@ -44,7 +51,7 @@ const GaugeChart: React.FC<{
               lineStyle: {
                 width: 7,
                 color: [
-                  [1, '#f2f6ff']
+                  [1, BACK_COLOR]
                 ],
               }
             },

diff --git a/src/components/Polygonal.tsx b/src/components/Polygonal.tsx
@@ -3,6 +3,11 @@ import * as echarts from 'echarts/core'
 import type { ECharts } from 'echarts/lib/echarts'
 import dayjs from 'dayjs'
 
+// const LINE_COLOR = '#047857'
+// const BACK_COLOR = 'rgba(58,77,233,0.8)'
+const LINE_COLOR = '#058f68'
+const BACK_COLOR = 'rgba(5, 143, 104, 0.8)'
+
 const Polygonal: React.FC<{
   data: { date: string; value: number }[]
 }> = ({ data }) => {
@@ -61,11 +66,14 @@ const Polygonal: React.FC<{
               focus: 'series'
             },
             showSymbol: false,
+            itemStyle: {
+              color: LINE_COLOR,
+            },
             areaStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: 'rgba(58,77,233,0.8)'
+                  color: BACK_COLOR
                 },
                 {
                   offset: 1,

diff --git a/src/pages/Dashboard/index.module.less b/src/pages/Dashboard/index.module.less
@@ -7,10 +7,9 @@
   .stats {
     height: 240px;
     .statsRight {
-      background-color: #d5e1fd;
+      background-color: var(--ls-quinary-background-color);
       .amount {
         width: 60px;
-        // background-color: var(--ls-quaternary-background-color);
         background-color: var(--ls-primary-background-color);
         transform: scale(0.7);
       }
@@ -28,7 +27,7 @@
   }
   .milestone {
     // width: 4.5rem;
-    border-left: 1px solid var(--ls-description-text-color);
+    border-left: 1px solid var(--ls-tint-text-color);
   }
   .timeline {
     transition: height 0.1s;
@@ -68,7 +67,7 @@
 .rightSide {
   width: 450px;
   height: 100vh;
-  border-left: 1px solid var(--ls-secondary-background-color);
+  border-left: 1px solid var(--ls-quinary-background-color);
   @apply p-8 overflow-auto;
 }
 
@@ -103,8 +102,10 @@
         .time {
           font-weight: 700;
           color: var(--ls-tertiary-background-color);
+          text-shadow: 0px 1px 1px var(--ls-tertiary-background-color);
           &::after {
             background-color: var(--ls-tertiary-background-color);
+            box-shadow: 0px 1px 2px var(--ls-tertiary-background-color);
           }
         }
       }

diff --git a/src/style/var/dark.less b/src/style/var/dark.less
@@ -1,4 +1,4 @@
-html[data-theme="light"] {
+html[data-theme="dark"] {
   --ls-primary-background-color: #f2f6ff;
   --ls-secondary-background-color: #c2d4fd;
   --ls-tertiary-background-color: #5146a0;

diff --git a/src/style/var/light.less b/src/style/var/light.less
@@ -1,12 +1,14 @@
 html[data-theme="light"] {
   // back color
-  --ls-primary-background-color: #f2f6ff;
-  --ls-secondary-background-color: #c2d4fd;
-  --ls-tertiary-background-color: #5146a0;
+  --ls-primary-background-color: #e9f2f0;
+  --ls-secondary-background-color: #c3e3db;
+  --ls-tertiary-background-color: #047857;
   --ls-quaternary-background-color: #fff;
+  --ls-quinary-background-color: #c7e8e0;
 
   // text color
   --ls-title-text-color: #181a2b;
   --ls-text-color: #5f636c;
   --ls-description-text-color: #a7a7a7;
+  --ls-tint-text-color: #e3e3e3;
 }
diff --git a/src/style/var/purple.less b/src/style/var/purple.less
@@ -0,0 +1,14 @@
+html[data-theme="light"] {
+  // back color
+  --ls-primary-background-color: #f2f6ff;
+  --ls-secondary-background-color: #c2d4fd;
+  --ls-tertiary-background-color: #5146a0;
+  --ls-quaternary-background-color: #fff;
+  --ls-quinary-background-color: #d5e1fd;
+
+  // text color
+  --ls-title-text-color: #181a2b;
+  --ls-text-color: #5f636c;
+  --ls-description-text-color: #a7a7a7;
+  --ls-tint-text-color: #e3e3e3;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx,css}'],
+  darkMode: 'class',
   content: [],
   theme: {
     extend: {},