diff --git a/examples/routers/menu.vue b/examples/routers/menu.vue
index d1d62ce7..67461bca 100644
--- a/examples/routers/menu.vue
+++ b/examples/routers/menu.vue
@@ -1,51 +1,40 @@
 <template>
     <div>
-        <Menu :theme="theme2" accordion @on-open-change="handleChange">
-            <Submenu name="1">
-                <template slot="title">
-                    <Icon type="ios-paper"></Icon>
-                    内容管理
-                </template>
-                <Menu-item name="1-1">文章管理</Menu-item>
-                <Menu-item name="1-2">评论管理</Menu-item>
-                <Menu-item name="1-3">举报管理</Menu-item>
-            </Submenu>
-            <Submenu name="2">
-                <template slot="title">
-                    <Icon type="ios-people"></Icon>
-                    用户管理
-                </template>
-                <Menu-item name="2-1">新增用户</Menu-item>
-                <Menu-item name="2-2">活跃用户</Menu-item>
-            </Submenu>
-            <Submenu name="3">
-                <template slot="title">
-                    <Icon type="stats-bars"></Icon>
-                    统计分析
-                </template>
-                <Menu-group title="使用">
-                    <Menu-item name="3-1">新增和启动</Menu-item>
-                    <Menu-item name="3-2">活跃分析</Menu-item>
-                    <Menu-item name="3-3">时段分析</Menu-item>
-                </Menu-group>
-                <Menu-group title="留存">
-                    <Menu-item name="3-4">用户留存</Menu-item>
-                    <Menu-item name="3-5">流失用户</Menu-item>
-                </Menu-group>
-            </Submenu>
+        <Menu :theme="theme3" active-name="1">
+            <Menu-group title="内容管理">
+                <Menu-item name="1">
+                    <Icon type="document-text"></Icon>
+                    文章管理
+                </Menu-item>
+                <Menu-item name="2">
+                    <Icon type="chatbubbles"></Icon>
+                    评论管理
+                </Menu-item>
+            </Menu-group>
+            <Menu-group title="统计分析">
+                <Menu-item name="3">
+                    <Icon type="heart"></Icon>
+                    用户留存
+                </Menu-item>
+                <Menu-item name="4">
+                    <Icon type="heart-broken"></Icon>
+                    流失用户
+                </Menu-item>
+            </Menu-group>
         </Menu>
+        <br>
+        <p>切换主题</p>
+        <Radio-group v-model="theme3">
+            <Radio label="light"></Radio>
+            <Radio label="dark"></Radio>
+        </Radio-group>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                theme2: 'light'
-            }
-        },
-        methods: {
-            handleChange (val) {
-                console.log(val);
+                theme3: 'light'
             }
         }
     }
diff --git a/src/styles/components/menu.less b/src/styles/components/menu.less
index dc5affc2..0dde7c55 100644
--- a/src/styles/components/menu.less
+++ b/src/styles/components/menu.less
@@ -49,7 +49,7 @@
         background: #fff;
     }
     &-dark{
-        background: @title-color;
+        background: @menu-dark-title;
     }
     &-primary{
         background: @primary-color;
@@ -95,7 +95,7 @@
     }
 
     &-dark&-horizontal &-item, &-dark&-horizontal &-submenu{
-        color: @subsidiary-color;
+        color: @menu-dark-subsidiary-color;
         &-active, &:hover{
             color: #fff;
         }
@@ -176,7 +176,7 @@
     }
     &-dark&-vertical &-item-group{
         &-title{
-            color: @text-color;
+            color: @menu-dark-group-title-color;
         }
     }
 
@@ -190,7 +190,7 @@
     }
 
     &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{
-        color: @subsidiary-color;
+        color: @menu-dark-subsidiary-color;
         &-active:not(.@{menu-prefix-cls}-submenu),
         &-active:not(.@{menu-prefix-cls}-submenu):hover
         {
@@ -198,7 +198,7 @@
         }
         &:hover{
             color: #fff;
-            background: @title-color;
+            background: @menu-dark-title;
         }
         &-active:not(.@{menu-prefix-cls}-submenu){
             color: @primary-color;
@@ -223,7 +223,7 @@
     &-dark&-vertical &-opened{
         background: @menu-dark-active-bg;
         .@{menu-prefix-cls}-submenu-title{
-            background: @title-color;
+            background: @menu-dark-title;
         }
     }
 }
diff --git a/src/styles/custom.less b/src/styles/custom.less
index 3ff9d739..e197f9ed 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -43,7 +43,10 @@
 @table-td-stripe-bg           : #f8f8f9;
 @table-td-hover-bg            : #ebf7ff;
 @table-td-highlight-bg        : #ebf7ff;
-@menu-dark-active-bg          : #313540;
+@menu-dark-title              : #495060;
+@menu-dark-active-bg          : #363e4f;
+@menu-dark-subsidiary-color   : rgba(255,255,255,.7);
+@menu-dark-group-title-color  : rgba(255,255,255,.36);
 @date-picker-cell-hover-bg    : #e1f0fe;
 
 // Shadow