fix: themeColor key toUpperCase vueComponent/ant-design-vue-pro/issues/1270

examples/src/config/defaultSettings.js

@@ -14,7 +14,7 @@
 
 export default {
   navTheme: 'dark', // theme for nav menu
-  primaryColor: '#52C41A', // primary color of ant design
+  primaryColor: '#1890ff', // primary color of ant design
   layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
   contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
   fixedHeader: false, // sticky header

examples/src/layouts/BasicLayout.vue

@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import { updateTheme } from '@ant-design-vue/pro-layout'
 import { asyncRouterMap } from '../config/router.config'
 import { i18nRender } from '../locales'
 
@@ -106,6 +107,9 @@ export default {
   created () {
     this.menus = asyncRouterMap.find(item => item.path === '/').children
 
+    // first created, init theme...
+    updateTheme(defaultSettings.primaryColor)
+
     this.$watch('$route', () => {
       this.handleRouteUpdate()
     })

package.json

 {
     "name": "@ant-design-vue/pro-layout",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "main": "./lib/index.js",
     "module": "./es/index.js",
     "repository": {

src/components/SettingDrawer/ThemeColor.jsx

@@ -50,18 +50,18 @@ const ThemeColor = {
         <h3 class={`${baseClassName}-title`}>{title}</h3>
         <div class={`${baseClassName}-content`}>
           {colors.map(item => {
-            const themeKey = genThemeToString(item.key)
-            const check = value === item.key || genThemeToString(value) === item.key
+            const themeKey = genThemeToString(item.key.toUpperCase())
+            const check = value.toUpperCase() === item.key.toUpperCase() || genThemeToString(value.toUpperCase()) === item.key.toUpperCase()
             return (
               <Tooltip
-                key={item.color}
-                title={themeKey ? i18n(`app.setting.themecolor.${themeKey}`) : item.key}
+                key={item.color.toUpperCase()}
+                title={themeKey ? i18n(`app.setting.themecolor.${themeKey}`) : item.key.toUpperCase()}
               >
                 <Tag
                   class={`${baseClassName}-block`}
-                  color={item.color}
+                  color={item.color.toUpperCase()}
                   check={check}
-                  onClick={() => handleChange(item.key)}
+                  onClick={() => handleChange(item.key.toUpperCase())}
                 />
               </Tooltip>
             )

src/utils/util.js

@@ -23,7 +23,7 @@ export const layoutContentWidth = (contentType) => {
 
 const themeConfig = {
   daybreak: 'daybreak',
-  '#1890ff': 'daybreak',
+  '#1890FF': 'daybreak',
   '#F5222D': 'dust',
   '#FA541C': 'volcano',
   '#FAAD14': 'sunset',