diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index 8c2f77d1177f92427c83e6abf64bfd73a31f4cf2..7ef31536807a64670ec4bc30fbc13ae0df038aa4 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { Layout, Menu, Icon } from 'antd';
 import pathToRegexp from 'path-to-regexp';
 import { Link } from 'dva/router';
+import classNames from 'classnames';
 import styles from './index.less';
 import { urlToList } from '../_utils/pathTools';
 
@@ -75,8 +76,7 @@ export default class SiderMenu extends PureComponent {
   getDefaultCollapsedSubMenus(props) {
     const {
       location: { pathname },
-    } =
-      props || this.props;
+    } = props || this.props;
     return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
   }
 
@@ -212,6 +212,10 @@ export default class SiderMenu extends PureComponent {
   render() {
     const { logo, menuData, collapsed, onCollapse } = this.props;
     const { openKeys } = this.state;
+    const theme = 'dark';
+    const siderClass = classNames(styles.sider, {
+      [styles.light]: theme === 'light',
+    });
     // Don't show popup menu when it is been collapsed
     const menuProps = collapsed
       ? {}
@@ -231,7 +235,7 @@ export default class SiderMenu extends PureComponent {
         breakpoint="lg"
         onCollapse={onCollapse}
         width={256}
-        className={styles.sider}
+        className={siderClass}
       >
         <div className={styles.logo} key="logo">
           <Link to="/">
@@ -241,7 +245,7 @@ export default class SiderMenu extends PureComponent {
         </div>
         <Menu
           key="Menu"
-          theme="dark"
+          theme={theme}
           mode="inline"
           {...menuProps}
           onOpenChange={this.handleOpenChange}
diff --git a/src/components/SiderMenu/index.less b/src/components/SiderMenu/index.less
index 9fa1a91a0fedaf2f8adb20965f7b51b08565b2b8..321c898978fd91106c65d6dbc4954cc0412ea426 100644
--- a/src/components/SiderMenu/index.less
+++ b/src/components/SiderMenu/index.less
@@ -29,7 +29,7 @@
   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
   position: relative;
   z-index: 10;
-  &.ligth {
+  &.light {
     background-color: white;
     .logo {
       background: white;