diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id
index 78c25b93..ce9131f8 100644
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-a1a3e79f27ccd26f49976f98524ecb53a980da5e
\ No newline at end of file
+bb297fb7228fc3fc2f78d50a734fc279a0d04e7e
\ No newline at end of file
diff --git a/src/components/core/d2-container/index.vue b/src/components/core/d2-container/index.vue
index 0844638b..07e80a81 100644
--- a/src/components/core/d2-container/index.vue
+++ b/src/components/core/d2-container/index.vue
@@ -43,7 +43,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .container-component {
   position: absolute;
diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue
index fba1c53f..60457d61 100644
--- a/src/components/core/d2-layout-main/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-main-group" :style="styleLayoutMainGroup">
+  <div class="layout-main-group" :style="styleLayoutMainGroup" :class="{grayMode: isGrayMode}">
     <div class="layout-main-mask"></div>
     <el-container class="layout-main">
       <!-- 顶栏 -->
@@ -65,7 +65,8 @@ export default {
   },
   computed: {
     ...mapState({
-      themeActive: state => state.d2admin.themeActive
+      themeActive: state => state.d2admin.themeActive,
+      isGrayMode: state => state.d2admin.isGrayMode
     }),
     styleLayoutMainGroup () {
       return {
diff --git a/src/menu/index.js.REMOVED.git-id b/src/menu/index.js.REMOVED.git-id
index 748c173f..b1c5f226 100644
--- a/src/menu/index.js.REMOVED.git-id
+++ b/src/menu/index.js.REMOVED.git-id
@@ -1 +1 @@
-6759c8ee3afc4da0d88a768285fbd8cc4704cfda
\ No newline at end of file
+7562f0a732bab9f663056b29032ad38a3cfcae86
\ No newline at end of file
diff --git a/src/pages/demo/playground/fullscreen/index.vue b/src/pages/demo/playground/fullscreen/index.vue
index c1ae13ca..5826a15b 100644
--- a/src/pages/demo/playground/fullscreen/index.vue
+++ b/src/pages/demo/playground/fullscreen/index.vue
@@ -1,12 +1,9 @@
 <template>
   <d2-container class="page-demo-playground-fullscreen">
     <template slot="header">全屏</template>
-    <el-switch
-      v-model="isFullScreen"
-      active-text="全屏"
-      inactive-text="正常"
-      @change="d2adminFullScreenToggle">
-    </el-switch>
+    <el-button type="primary" @click="d2adminFullScreenToggle">
+      d2adminFullScreenToggle 切换全屏
+    </el-button>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/playground/gray/index.vue b/src/pages/demo/playground/gray/index.vue
new file mode 100644
index 00000000..275b09e3
--- /dev/null
+++ b/src/pages/demo/playground/gray/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <d2-container type="full" class="page-demo-playground-gray">
+    <template slot="header">灰度模式</template>
+    <div class="colorful">{{isGrayMode ? 'GRAY' : 'COLORFUL'}}</div>
+    <el-button-group class="d2-mt">
+      <el-button @click="d2adminGrayModeToggle">切换灰度模式</el-button>
+      <el-button @click="d2adminGrayModeSet(true)">打开灰度模式</el-button>
+      <el-button @click="d2adminGrayModeSet(false)">关闭灰度模式</el-button>
+      <el-button @click="dialogVisible = true">模拟报错提示框</el-button>
+    </el-button-group>
+    <el-dialog
+      title="错误"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="30%"
+      @open="handleDialogOpen"
+      @closed="handleDialogClosed">
+      <div
+        style="
+          text-align: center;
+          line-height: 100px;
+          color: #FFF;
+          font-size: 64px;
+          font-weight: bold;
+          border-radius: 4px;
+          background-color: #F56C6C;
+          margin: -20px 0px;
+          ">
+        Error
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false" style="width: 100%;">
+          我看到后面的内容已经变为灰度模式
+        </el-button>
+      </span>
+    </el-dialog>
+  </d2-container>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  data () {
+    return {
+      dialogVisible: false
+    }
+  },
+  computed: {
+    ...mapState({
+      isGrayMode: state => state.d2admin.isGrayMode
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminGrayModeToggle',
+      'd2adminGrayModeSet'
+    ]),
+    handleDialogOpen () {
+      this.d2adminGrayModeSet(true)
+    },
+    handleDialogClosed () {
+      this.d2adminGrayModeSet(false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.page-demo-playground-gray {
+  .colorful {
+    @extend %unable-select;
+    line-height: 300px;
+    font-size: 100px;
+    font-weight: bold;
+    color: #FFF;
+    text-align: center;
+    border-radius: 4px;
+    border: 1px solid #333;
+    background-color: #ffff00;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center;
+  }
+}
+</style>
diff --git a/src/router/index.js.REMOVED.git-id b/src/router/index.js.REMOVED.git-id
index 72b52366..2b0924e1 100644
--- a/src/router/index.js.REMOVED.git-id
+++ b/src/router/index.js.REMOVED.git-id
@@ -1 +1 @@
-0d67caa915a29a86ed9d0443090a122d2e676988
\ No newline at end of file
+606766b63bfb19d2bc7fc5a4885a8428c20971a0
\ No newline at end of file
diff --git a/src/store/modules/d2admin.js b/src/store/modules/d2admin.js
index b84ee63d..9ff32a3a 100644
--- a/src/store/modules/d2admin.js
+++ b/src/store/modules/d2admin.js
@@ -7,7 +7,7 @@ export default {
     // 全屏
     isFullScreen: false,
     // 灰度
-    isGrayView: false,
+    isGrayMode: false,
     // 主题
     themeList,
     themeActive: themeList[1]
@@ -30,8 +30,16 @@ export default {
      * 切换灰度状态
      * @param {state} state vuex state
      */
-    d2adminGrayViewToggle (state) {
-      state.isGray = !state.isGray
+    d2adminGrayModeToggle (state) {
+      state.isGrayMode = !state.isGrayMode
+    },
+    /**
+     * 设置灰度模式
+     * @param {state} state vuex state
+     * @param {boolean} value new value
+     */
+    d2adminGrayModeSet (state, value) {
+      state.isGrayMode = value
     },
     /**
      * 激活一个主题（应用到dom上）