优化主题色

weizhanzhan · weizhanzhan · commit 1215f8e79cc5 · 2019-06-15T18:20:33.000+08:00
diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <title>React Admin</title>
   </head>
   <body>
       <link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/static/color.less" />
diff --git a/public/static/color.less b/public/static/color.less
@@ -2140,6 +2140,7 @@ this.tinycolor = tinycolor;
 
 :root { 
     --PC: @primary-color;   //color.less中加入css原生变量：--PC
+    --PCL:color(~`colorPalette("@{btn-primary-bg}", 1)`);
  }
 
 html {
diff --git a/src/styles/vars.less b/src/styles/vars.less
@@ -4,4 +4,5 @@
 @btn-primary-bg: rgb(47, 84, 235);
 :root { 
     --PC: @primary-color;   //color.less中加入css原生变量：--PC
+    --PCL:color(~`colorPalette("@{btn-primary-bg}", 1)`);
  }
diff --git a/src/views/Layout/components/Sider.js b/src/views/Layout/components/Sider.js
@@ -13,8 +13,8 @@ class WSider extends Component{
         return(
             <Sider  collapsed={collapsed} theme={this.props.menuTheme} >
                 <div className="logo" >
-                    <img src="/ico.png"  alt=""></img>
-                    <span className={collapsed?'menu_theme dark hide':'menu_theme dark show'} href="">React Admin</span>
+                    <img src="/ico.png" alt=""></img>
+                    <span className={collapsed?`menu_theme ${menuTheme} hide`:`menu_theme ${menuTheme} show`} href="">React Admin</span>
                 </div>
                 <Menu 
                     theme={menuTheme}
diff --git a/src/views/Layout/index.less b/src/views/Layout/index.less
@@ -11,18 +11,21 @@
 }
 .menu_theme{
   padding-left: 10px;
-  vertical-align: top
+  vertical-align: top;
+  font-size: 18px;
+  font-weight: bold
 }
 .menu_theme.dark{
   color: #ffffff;
-  font-size: 18px;
-  font-weight: bold
 }
-.menu_theme.dark.show{
+.menu_theme.light{
+  color: var(--PC)
+}
+.menu_theme.dark.show,.menu_theme.light.show{
   opacity: 1;
   transition: all 1s ease-in
 }
-.menu_theme.dark.hide{
+.menu_theme.dark.hide,.menu_theme.light.hide{
   opacity: 0;
 
 }

Original file line number	Diff line number	Diff line change
`@@ -2140,6 +2140,7 @@ this.tinycolor = tinycolor;`
`2140`	`2140`
`2141`	`2141`	`:root {`
`2142`	`2142`	`--PC: @primary-color; //color.less中加入css原生变量：--PC`
	`2143`	+ --PCL:color(~`colorPalette("@{btn-primary-bg}", 1)`);
`2143`	`2144`	`}`
`2144`	`2145`
`2145`	`2146`	`html {`
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,5 @@`
`4`	`4`	`@btn-primary-bg: rgb(47, 84, 235);`
`5`	`5`	`:root {`
`6`	`6`	`--PC: @primary-color; //color.less中加入css原生变量：--PC`
	`7`	+ --PCL:color(~`colorPalette("@{btn-primary-bg}", 1)`);
`7`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,18 +11,21 @@`
`11`	`11`	`}`
`12`	`12`	`.menu_theme{`
`13`	`13`	`padding-left: 10px;`
`14`		`- vertical-align: top`
	`14`	`+ vertical-align: top;`
	`15`	`+ font-size: 18px;`
	`16`	`+ font-weight: bold`
`15`	`17`	`}`
`16`	`18`	`.menu_theme.dark{`
`17`	`19`	`color: #ffffff;`
`18`		`- font-size: 18px;`
`19`		`- font-weight: bold`
`20`	`20`	`}`
`21`		`-.menu_theme.dark.show{`
	`21`	`+.menu_theme.light{`
	`22`	`+ color: var(--PC)`
	`23`	`+}`
	`24`	`+.menu_theme.dark.show,.menu_theme.light.show{`
`22`	`25`	`opacity: 1;`
`23`	`26`	`transition: all 1s ease-in`
`24`	`27`	`}`
`25`		`-.menu_theme.dark.hide{`
	`28`	`+.menu_theme.dark.hide,.menu_theme.light.hide{`
`26`	`29`	`opacity: 0;`
`27`	`30`
`28`	`31`	`}`