diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md
index 85bd8885..b5583001 100644
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@@ -31,6 +31,7 @@ export default {
 ### top
 <!-- ![top](/top.png) -->
 <img :src="$withBase('top.png')" alt="top">
+
 ### mixin
 <!-- ![mixin](/mixin.png) -->
 <img :src="$withBase('mixin.png')" alt="mixin">
@@ -69,6 +70,8 @@ export default {
         title: "Fes.js",
         // 底部文字
         footer: 'Created by MumbelFe',
+        // 主题light
+        theme: 'dark'
         // 是否开启 tabs
         multiTabs: false,
         // 布局类型
@@ -98,6 +101,13 @@ export default {
 
 - **详情**：页面底部的文字。
 
+### theme
+- **类型**：`String`
+  
+- **默认值**：`dark`
+
+- **详情**：主题，可选有 `dark`、`light`
+
 ### navigation
 - **类型**：`String`
   
diff --git a/docs/zh/reference/plugin/plugins/layout.md b/docs/zh/reference/plugin/plugins/layout.md
index 85bd8885..b5583001 100644
--- a/docs/zh/reference/plugin/plugins/layout.md
+++ b/docs/zh/reference/plugin/plugins/layout.md
@@ -31,6 +31,7 @@ export default {
 ### top
 <!-- ![top](/top.png) -->
 <img :src="$withBase('top.png')" alt="top">
+
 ### mixin
 <!-- ![mixin](/mixin.png) -->
 <img :src="$withBase('mixin.png')" alt="mixin">
@@ -69,6 +70,8 @@ export default {
         title: "Fes.js",
         // 底部文字
         footer: 'Created by MumbelFe',
+        // 主题light
+        theme: 'dark'
         // 是否开启 tabs
         multiTabs: false,
         // 布局类型
@@ -98,6 +101,13 @@ export default {
 
 - **详情**：页面底部的文字。
 
+### theme
+- **类型**：`String`
+  
+- **默认值**：`dark`
+
+- **详情**：主题，可选有 `dark`、`light`
+
 ### navigation
 - **类型**：`String`
   
diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index 501dbf88..9b0ef429 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@@ -3,7 +3,8 @@
         v-if="routeHasLayout"
         :class="[
             collapsed ? 'main-layout-collapsed' : '',
-            `main-layout-navigation-${navigation}`
+            `main-layout-navigation-${navigation}`,
+            `main-layout-theme-${siderTheme}`
         ]"
         class="main-layout"
     >
@@ -334,5 +335,21 @@ export default {
     .layout-footer {
         text-align: center;
     }
+    &.main-layout-theme-light{
+        .logo-name{
+            color: rgba(0, 0, 0, 0.65) !important;
+        }
+        &.main-layout-navigation-mixin{
+            .logo-name{
+                color: #fff !important;
+            }
+        }
+        &.main-layout-navigation-top{
+            .layout-header {
+                background: #fff;
+                color: rgba(0, 0, 0, 0.85);
+            }
+        }
+    }
 }
 </style>
diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js
index 2d02144c..d11dd6d1 100644
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@@ -33,6 +33,7 @@ export default {
         footer: "Created by MumbleFe",
         multiTabs: false,
         navigation: "mixin",
+        theme: 'light',
         menus: [
             {
                 name: "index",