颜色更新

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dt-theme",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "main": "lib/index.js",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

src/style/blue.js

@@ -10,11 +10,26 @@ const myTheme = {
   '--dt-primary-color5': ['#9DBDFB', 'rgba(80, 141, 248, 0.5)'],
   '--dt-primary-color6': ['#BDD2FC', 'rgba(80, 141, 248, 0.3)'],
   '--dt-primary-color7': ['#EAF1FE', 'rgba(80, 141, 248, 0.2)'],
-  '--dt-primary-color': ['var(--dt-primary-color1)', 'var(--dt-primary-color1)'],
-  '--dt-primary-color-hover': ['var(--dt-primary-color2)', 'var(--dt-primary-color2)'],
-  '--dt-primary-color-click': ['var(--dt-primary-color3)', 'var(--dt-primary-color3)'],
-  '--dt-primary-color-disabled': ['var(--dt-primary-color5)', 'var(--dt-primary-color5)'],
-  '--dt-primary-color-label': ['var(--dt-primary-color7)', 'var(--dt-primary-color7)'],
+  '--dt-primary-color': [
+    'var(--dt-primary-color1)',
+    'var(--dt-primary-color1)',
+  ],
+  '--dt-primary-color-hover': [
+    'var(--dt-primary-color2)',
+    'var(--dt-primary-color2)',
+  ],
+  '--dt-primary-color-click': [
+    'var(--dt-primary-color3)',
+    'var(--dt-primary-color3)',
+  ],
+  '--dt-primary-color-disabled': [
+    'var(--dt-primary-color5)',
+    'var(--dt-primary-color5)',
+  ],
+  '--dt-primary-color-label': [
+    'var(--dt-primary-color7)',
+    'var(--dt-primary-color7)',
+  ],
   '--dt-text-color1': ['#1F232B', 'rgba(255, 255, 255, 0.85)'],
   '--dt-text-color2': ['#4D596A', 'rgba(255, 255, 255, 0.6)'],
   '--dt-text-color3': ['#848e9b', 'rgba(255, 255, 255, 0.45)'],
@@ -22,12 +37,13 @@ const myTheme = {
   '--dt-line-color1': ['#F2F3F5', 'rgba(255, 255, 255, 0.08)'],
   '--dt-line-color2': ['#E5E6EA', 'rgba(255, 255, 255, 0.12)'],
   '--dt-line-color3': ['#C9CDD4', 'rgba(255, 255, 255, 0.16)'],
-  '--dt-fill-color1': ['#f7f8fa', '#1f2729'],
+  '--dt-fill-color1': ['#f7f8fa', '#17181A'],
   '--dt-fill-color2': ['#C9CDD4', 'rgba(255, 255, 255, 0.24)'],
-  '--dt-fill-color3': ['#ffffff', '#293133'],
+  '--dt-fill-color3': ['#ffffff', '#212123'],
   '--dt-fill-color4': ['#F2F3F5', 'rgba(255, 255, 255, 0.08)'],
   '--dt-fill-color5': ['#E5E6EB', 'rgba(255, 255, 255, 0.16)'],
   '--dt-fill-color6': ['#4E5969', '#C5C5C5'],
+  '--dt-fill-color7': ['#ffffff', '#323234'],
   '--dt-success-color1': ['#2da641', '#27C346'],
   '--dt-success-color2': ['#57B867', '#23AE3F'],
   '--dt-success-color3': ['#29973B', '#67D57D'],
@@ -52,11 +68,21 @@ const myTheme = {
   '--dt-special-color1': ['#ffffff', '#ffffff'],
   '--dt-special-color2': ['#ffffff', '#ffffff'],
   '--dt-special-color3': ['#000000', '#000000'],
-  '--dt-special-color4': ['#1f232b', '#2e3739'],
+  '--dt-special-color4': ['#1f232b', '#323234'],
   '--dt-special-color5': ['#e5e6ea', '#3a4143'],
-  '--dt-special-color6': ['#F2F3F5', '#3A4143'],
+  '--dt-special-color6': ['#F2F3F5', '#2c2d2f'],
   '--dt-shadow-color1':['rgba(0, 0, 0, 0.10)','rgba(0, 0, 0, 0.25)'],
   '--dt-canvas-color':['var(--dt-fill-color3)','var(--dt-fill-color3)'],
+  '--dt-shadow-color1': ['rgba(0, 0, 0, 0.10)', 'rgba(0, 0, 0, 0.25)'],
+  '--dt-canvas-color': ['var(--dt-fill-color3)', 'var(--dt-fill-color3)'],
+  '--dt-menu-shadow-color': [
+    'linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%)',
+    'linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)',
+  ],
+  '--dt-menu-shadow-color1': [
+    'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%)',
+    'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%)',
+  ],
 };
 
 export default myTheme;

src/style/dark.js

@@ -8,11 +8,26 @@ const myTheme = {
   '--dt-primary-color5': ['#9DBDFB', 'rgba(80, 141, 248, 0.5)'],
   '--dt-primary-color6': ['#BDD2FC', 'rgba(80, 141, 248, 0.3)'],
   '--dt-primary-color7': ['#EAF1FE', 'rgba(80, 141, 248, 0.2)'],
-  '--dt-primary-color': ['var(--dt-primary-color1)', 'var(--dt-primary-color1)'],
-  '--dt-primary-color-hover': ['var(--dt-primary-color2)', 'var(--dt-primary-color2)'],
-  '--dt-primary-color-click': ['var(--dt-primary-color3)', 'var(--dt-primary-color3)'],
-  '--dt-primary-color-disabled': ['var(--dt-primary-color5)', 'var(--dt-primary-color5)'],
-  '--dt-primary-color-label': ['var(--dt-primary-color7)', 'var(--dt-primary-color7)'],
+  '--dt-primary-color': [
+    'var(--dt-primary-color1)',
+    'var(--dt-primary-color1)',
+  ],
+  '--dt-primary-color-hover': [
+    'var(--dt-primary-color2)',
+    'var(--dt-primary-color2)',
+  ],
+  '--dt-primary-color-click': [
+    'var(--dt-primary-color3)',
+    'var(--dt-primary-color3)',
+  ],
+  '--dt-primary-color-disabled': [
+    'var(--dt-primary-color5)',
+    'var(--dt-primary-color5)',
+  ],
+  '--dt-primary-color-label': [
+    'var(--dt-primary-color7)',
+    'var(--dt-primary-color7)',
+  ],
   '--dt-text-color1': ['#1F232B', '#cce8ff'],
   '--dt-text-color2': ['#4D596A', '#80baea'],
   '--dt-text-color3': ['#848e9b', '#2d76b2'],
@@ -26,6 +41,7 @@ const myTheme = {
   '--dt-fill-color4': ['#F2F3F5', '#0d274f'],
   '--dt-fill-color5': ['#E5E6EB', 'rgba(255, 255, 255, 0.16)'],
   '--dt-fill-color6': ['#4E5969', '#0077db'],
+  '--dt-fill-color7': ['#ffffff', '#071a36'],
   '--dt-success-color1': ['#2da641', '#27C346'],
   '--dt-success-color2': ['#57B867', '#23AE3F'],
   '--dt-success-color3': ['#29973B', '#67D57D'],
@@ -53,8 +69,16 @@ const myTheme = {
   '--dt-special-color4': ['#1f232b', '#2e3739'],
   '--dt-special-color5': ['#e5e6ea', '#0077db'],
   '--dt-special-color6': ['#F2F3F5', 'var(--dt-fill-color4)'],
-  '--dt-shadow-color1':['rgba(0, 0, 0, 0.10)','rgba(0, 0, 0, 0.25)'],
-  '--dt-canvas-color':['var(--dt-fill-color3)','var(--dt-fill-color3)'],
+  '--dt-shadow-color1': ['rgba(0, 0, 0, 0.10)', 'rgba(0, 0, 0, 0.25)'],
+  '--dt-canvas-color': ['var(--dt-fill-color3)', 'var(--dt-fill-color3)'],
+  '--dt-menu-shadow-color': [
+    'linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%)',
+    'linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)',
+  ],
+  '--dt-menu-shadow-color1': [
+    'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%)',
+    'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%)',
+  ],
 };
 
 export default myTheme;

src/style/green.js

@@ -8,11 +8,26 @@ const myTheme = {
   '--dt-primary-color5': ['#A6E8B2', 'rgba(80, 141, 248, 0.5)'],
   '--dt-primary-color6': ['#C3F0CB', 'rgba(80, 141, 248, 0.3)'],
   '--dt-primary-color7': ['#ECFAEE', 'rgba(80, 141, 248, 0.2)'],
-  '--dt-primary-color': ['var(--dt-primary-color1)', 'var(--dt-primary-color1)'],
-  '--dt-primary-color-hover': ['var(--dt-primary-color2)', 'var(--dt-primary-color2)'],
-  '--dt-primary-color-click': ['var(--dt-primary-color3)', 'var(--dt-primary-color3)'],
-  '--dt-primary-color-disabled': ['var(--dt-primary-color5)', 'var(--dt-primary-color5)'],
-  '--dt-primary-color-label': ['var(--dt-primary-color7)', 'var(--dt-primary-color7)'],
+  '--dt-primary-color': [
+    'var(--dt-primary-color1)',
+    'var(--dt-primary-color1)',
+  ],
+  '--dt-primary-color-hover': [
+    'var(--dt-primary-color2)',
+    'var(--dt-primary-color2)',
+  ],
+  '--dt-primary-color-click': [
+    'var(--dt-primary-color3)',
+    'var(--dt-primary-color3)',
+  ],
+  '--dt-primary-color-disabled': [
+    'var(--dt-primary-color5)',
+    'var(--dt-primary-color5)',
+  ],
+  '--dt-primary-color-label': [
+    'var(--dt-primary-color7)',
+    'var(--dt-primary-color7)',
+  ],
   '--dt-text-color1': ['#1F232B', 'rgba(255, 255, 255, 0.85)'],
   '--dt-text-color2': ['#4D596A', 'rgba(255, 255, 255, 0.6)'],
   '--dt-text-color3': ['#848e9b', 'rgba(255, 255, 255, 0.45)'],
@@ -26,6 +41,7 @@ const myTheme = {
   '--dt-fill-color4': ['#F2F3F5', 'rgba(255, 255, 255, 0.08)'],
   '--dt-fill-color5': ['#E5E6EB', 'rgba(255, 255, 255, 0.16)'],
   '--dt-fill-color6': ['#4E5969', '#C5C5C5'],
+  '--dt-fill-color7': ['#ffffff', '#323234'],
   '--dt-success-color1': ['#7CDB1D', '#27C346'],
   '--dt-success-color2': ['#96E24A', '#23AE3F'],
   '--dt-success-color3': ['#71C71A', '#67D57D'],
@@ -53,8 +69,16 @@ const myTheme = {
   '--dt-special-color4': ['#1f232b', '#2e3739'],
   '--dt-special-color5': ['#e5e6ea', '#3a4143'],
   '--dt-special-color6': ['#F2F3F5', '#3A4143'],
-  '--dt-shadow-color1':['rgba(0, 0, 0, 0.10)','rgba(0, 0, 0, 0.25)'],
-  '--dt-canvas-color':['var(--dt-fill-color3)','var(--dt-fill-color3)'],
+  '--dt-shadow-color1': ['rgba(0, 0, 0, 0.10)', 'rgba(0, 0, 0, 0.25)'],
+  '--dt-canvas-color': ['var(--dt-fill-color3)', 'var(--dt-fill-color3)'],
+  '--dt-menu-shadow-color': [
+    'linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%)',
+    'linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)',
+  ],
+  '--dt-menu-shadow-color1': [
+    'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%)',
+    'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%)',
+  ],
 };
 
 export default myTheme;

src/useDtTheme/index.jsx

@@ -27,6 +27,9 @@ const themeKeys = (themeKey) => {
 }
 
 export function getAntdToken(theme, alwaysLight) {//alwaysLight主要适用于登录页只有白色的情况
+  if (APP_THEME_CHANGEABLE_KEY() == 'false') {
+    theme = APP_THEME_KEY()
+  }
 
   function recur(antdTokenCorRes) {
     const colors = Object.keys(antdTokenCorRes).map(key => {
@@ -100,6 +103,9 @@ const useLocalStorageThemeName = (presetTheme) => {
   useEffect(() => {
     if (!window.__MICRO_APP_ENVIRONMENT__) {
       changeTheme(themeName)
+      if (APP_THEME_CHANGEABLE_KEY() == 'false') {
+        return;
+      }
       if (!localStorage.getItem('--dt-theme')) {
         localStorage.setItem('--dt-theme', themeName);
       }

src/useDtTheme/utils.jsx

@@ -52,6 +52,9 @@ const antdTokenCorRes = {
   "colorBgLayout": "--dt-fill-color1",
   borderRadius: 6,
   components: {
+    "Tabs": {
+      "cardBg": "--dt-fill-color4"
+    },
     "Button": {
       // "colorTextDisabled": "#ffffff",
       // "colorBgContainerDisabled": "--dt-primary-color5",
@@ -74,11 +77,6 @@ const antdTokenCorRes = {
       "colorTextLabel": "--dt-text-color2",
       "colorText": "--dt-text-color1"
     },
-    "Select": {
-      "colorIcon": "--dt-text-color2",
-      "colorFillSecondary": "--dt-line-color1",
-      "colorText": "--dt-text-color1"
-    },
     "Pagination": {
       "colorBgTextHover": "--dt-line-color1"
     },
@@ -92,7 +90,46 @@ const antdTokenCorRes = {
     },
     "Radio": {
       "colorTextDisabled": "--dt-text-color3",
-    }
+    },
+    "Dropdown": {
+      colorBgElevated: '--dt-fill-color7',
+    },
+    "Cascader": {
+      colorBgElevated: '--dt-fill-color7',
+    },
+    "DatePicker": {
+      colorBgElevated: '--dt-fill-color7',
+    },
+    "Select": {
+      colorBgElevated: '--dt-fill-color7',
+      "optionSelectedBg": "--dt-primary-color7",
+      "optionSelectedColor": "--dt-primary-color1",
+      "colorIcon": "--dt-text-color2",
+      "colorFillSecondary": "--dt-line-color1",
+      "colorText": "--dt-text-color1",
+       "optionSelectedFontWeight": 400
+    },
+    "Switch": {
+      colorBgElevated: '--dt-fill-color7',
+    },
+    "TimePicker": {
+      colorBgElevated: '--dt-fill-color7',
+    },
+    "TreeSelect": {
+      colorBgElevated: '--dt-fill-color7',
+    },
+    "Popover": {
+      colorBgElevated: '--dt-fill-color7',
+    },
+    "Tooltip": {
+      colorBgElevated: '--dt-special-color4',
+    },
+    "Notification": {
+      colorBgElevated: '--dt-fill-color7',
+    },
+    "Popconfirm": {
+      colorBgElevated: '--dt-fill-color7',
+    },
   }
 }