feat: berry theme update & bug fix (#1282)

* ⚡️ improve: delete google fonts

* ⚡️ improve: Optimized priority input handling in TableRow component.

* 🔖 chore: channel batch add

* ✨ feat: add dark mod

* ✨ feat: support token limit ip range and models

* ✨ feat: add MessagePusher

* ✨ feat: add lark login

web/berry/src/themes/compStyleOverride.js

@@ -1,5 +1,5 @@
 export default function componentStyleOverrides(theme) {
-  const bgColor = theme.colors?.grey50;
+  const bgColor = theme.mode === 'dark' ? theme.backgroundDefault : theme.colors?.grey50;
   return {
     MuiButton: {
       styleOverrides: {
@@ -12,15 +12,7 @@ export default function componentStyleOverrides(theme) {
         }
       }
     },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          '&:hover': {
-            backgroundColor: theme.colors?.grey100
-          }
-        }
-      }
-    }, //MuiAutocomplete-popper MuiPopover-root
+    //MuiAutocomplete-popper MuiPopover-root
     MuiAutocomplete: {
       styleOverrides: {
         popper: {
@@ -226,12 +218,12 @@ export default function componentStyleOverrides(theme) {
     MuiTableCell: {
       styleOverrides: {
         root: {
-          borderBottom: '1px solid rgb(241, 243, 244)',
+          borderBottom: '1px solid ' + theme.tableBorderBottom,
           textAlign: 'center'
         },
         head: {
           color: theme.darkTextSecondary,
-          backgroundColor: 'rgb(244, 246, 248)'
+          backgroundColor: theme.headBackgroundColor
         }
       }
     },
@@ -239,7 +231,7 @@ export default function componentStyleOverrides(theme) {
       styleOverrides: {
         root: {
           '&:hover': {
-            backgroundColor: 'rgb(244, 246, 248)'
+            backgroundColor: theme.headBackgroundColor
           }
         }
       }
@@ -247,10 +239,29 @@ export default function componentStyleOverrides(theme) {
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          color: theme.paper,
+          color: theme.colors.paper,
           background: theme.colors?.grey700
         }
       }
+    },
+    MuiCssBaseline: {
+      styleOverrides: `
+      .apexcharts-title-text {
+          fill: ${theme.textDark} !important
+        }
+      .apexcharts-text {
+        fill: ${theme.textDark} !important
+      }
+      .apexcharts-legend-text {
+        color: ${theme.textDark} !important
+      }
+      .apexcharts-menu {
+        background: ${theme.backgroundDefault} !important
+      }
+      .apexcharts-gridline, .apexcharts-xaxistooltip-background, .apexcharts-yaxistooltip-background {
+        stroke: ${theme.divider} !important;
+      }
+      `
     }
   };
 }

web/berry/src/themes/index.js

@@ -15,19 +15,10 @@ import themeTypography from './typography';
 
 export const theme = (customization) => {
   const color = colors;
-
+  const options = customization.theme === 'light' ? GetLightOption() : GetDarkOption();
   const themeOption = {
     colors: color,
-    heading: color.grey900,
-    paper: color.paper,
-    backgroundDefault: color.paper,
-    background: color.primaryLight,
-    darkTextPrimary: color.grey700,
-    darkTextSecondary: color.grey500,
-    textDark: color.grey900,
-    menuSelected: color.secondaryDark,
-    menuSelectedBack: color.secondaryLight,
-    divider: color.grey200,
+    ...options,
     customization
   };
 
@@ -53,3 +44,49 @@ export const theme = (customization) => {
 };
 
 export default theme;
+
+function GetDarkOption() {
+  const color = colors;
+  return {
+    mode: 'dark',
+    heading: color.darkTextTitle,
+    paper: color.darkLevel2,
+    backgroundDefault: color.darkPaper,
+    background: color.darkBackground,
+    darkTextPrimary: color.darkTextPrimary,
+    darkTextSecondary: color.darkTextSecondary,
+    textDark: color.darkTextTitle,
+    menuSelected: color.darkSecondaryMain,
+    menuSelectedBack: color.darkSelectedBack,
+    divider: color.darkDivider,
+    borderColor: color.darkBorderColor,
+    menuButton: color.darkLevel1,
+    menuButtonColor: color.darkSecondaryMain,
+    menuChip: color.darkLevel1,
+    headBackgroundColor: color.darkBackground,
+    tableBorderBottom: color.darkDivider
+  };
+}
+
+function GetLightOption() {
+  const color = colors;
+  return {
+    mode: 'light',
+    heading: color.grey900,
+    paper: color.paper,
+    backgroundDefault: color.paper,
+    background: color.primaryLight,
+    darkTextPrimary: color.grey700,
+    darkTextSecondary: color.grey500,
+    textDark: color.grey900,
+    menuSelected: color.secondaryDark,
+    menuSelectedBack: color.secondaryLight,
+    divider: color.grey200,
+    borderColor: color.grey300,
+    menuButton: color.secondaryLight,
+    menuButtonColor: color.secondaryDark,
+    menuChip: color.primaryLight,
+    headBackgroundColor: color.tableBackground,
+    tableBorderBottom: color.tableBorderBottom
+  };
+}

web/berry/src/themes/palette.js

@@ -5,7 +5,7 @@
 
 export default function themePalette(theme) {
   return {
-    mode: 'light',
+    mode: theme.mode,
     common: {
       black: theme.colors?.darkPaper
     },

web/berry/src/themes/typography.js

@@ -132,6 +132,19 @@ export default function themeTypography(theme) {
       width: '44px',
       height: '44px',
       fontSize: '1.5rem'
+    },
+    menuButton: {
+      color: theme.menuButtonColor,
+      background: theme.menuButton
+    },
+    menuChip: {
+      background: theme.menuChip
+    },
+    CardWrapper: {
+      backgroundColor: theme.mode === 'dark' ? theme.colors.darkLevel2 : theme.colors.primaryDark
+    },
+    SubCard: {
+      border: theme.mode === 'dark' ? '1px solid rgba(227, 232, 239, 0.2)' : '1px solid rgb(227, 232, 239)'
     }
   };
 }