diff --git a/src/styles/index.scss b/src/styles/index.scss
index 574d7637..3d5fce28 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,7 +2,7 @@
 @import "variables.css";
 // Transition
 @import "./transition.scss";
-// 注册主题
+// 注册多主题
 @import "./theme/register.scss";
 
 // 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
diff --git a/src/styles/theme/core/element-plus.scss b/src/styles/theme/core/element-plus.scss
new file mode 100644
index 00000000..cb28a289
--- /dev/null
+++ b/src/styles/theme/core/element-plus.scss
@@ -0,0 +1,20 @@
+/** Element-Plus 相关 */
+
+// 侧边栏的 item 的 popper
+.el-popper {
+  border: none !important;
+  .el-menu {
+    background-color: lighten($theme-bg-color, 4%) !important;
+    .el-menu-item {
+      background-color: lighten($theme-bg-color, 4%) !important;
+      &.is-active,
+      &:hover {
+        background-color: lighten($theme-bg-color, 8%) !important;
+        color: $active-font-color !important;
+      }
+    }
+    .el-sub-menu__title {
+      background-color: lighten($theme-bg-color, 4%) !important;
+    }
+  }
+}
diff --git a/src/styles/theme/core/error-page.scss b/src/styles/theme/core/error-page.scss
new file mode 100644
index 00000000..75770036
--- /dev/null
+++ b/src/styles/theme/core/error-page.scss
@@ -0,0 +1,5 @@
+/** Error-Page 页面相关 */
+
+.error-page {
+  background-color: $theme-bg-color;
+}
diff --git a/src/styles/theme/core/index.scss b/src/styles/theme/core/index.scss
new file mode 100644
index 00000000..ab3233e5
--- /dev/null
+++ b/src/styles/theme/core/index.scss
@@ -0,0 +1,7 @@
+.#{$theme-name} {
+  @import "./layout.scss";
+  @import "./login.scss";
+  @import "./error-page.scss";
+  @import "./element-plus.scss";
+  @import "./other.scss";
+}
diff --git a/src/styles/theme/core/layout.scss b/src/styles/theme/core/layout.scss
new file mode 100644
index 00000000..0dec9d1a
--- /dev/null
+++ b/src/styles/theme/core/layout.scss
@@ -0,0 +1,67 @@
+/** Layout 相关 */
+
+.app-wrapper {
+  background-color: $theme-bg-color;
+  color: $font-color;
+
+  // 侧边栏
+  .sidebar-container {
+    .sidebar-logo-container {
+      background-color: lighten($theme-bg-color, 2%) !important;
+    }
+    .el-menu {
+      background-color: lighten($theme-bg-color, 4%) !important;
+      .el-menu-item {
+        background-color: lighten($theme-bg-color, 4%) !important;
+        &.is-active,
+        &:hover {
+          background-color: lighten($theme-bg-color, 8%) !important;
+          color: $active-font-color !important;
+        }
+      }
+    }
+    .el-sub-menu__title {
+      background-color: lighten($theme-bg-color, 4%) !important;
+    }
+  }
+
+  // 顶部导航栏
+  .navigation-bar {
+    background-color: $theme-bg-color;
+    .right-menu {
+      .svg-icon {
+        color: $font-color;
+      }
+    }
+  }
+
+  // TagsView
+  .tags-view-container {
+    background-color: $theme-bg-color !important;
+    border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
+    .tags-view-item {
+      background-color: $theme-bg-color !important;
+      color: $font-color !important;
+      border: 1px solid $border-color !important;
+      &.active {
+        background-color: $active-theme-bg-color !important;
+        color: $active-font-color !important;
+        border-color: $border-color !important;
+      }
+    }
+    // 右键菜单
+    .contextmenu {
+      background-color: lighten($theme-bg-color, 8%);
+      color: $font-color;
+      li:hover {
+        background-color: lighten($theme-bg-color, 16%);
+        color: $active-font-color;
+      }
+    }
+  }
+
+  // 右侧设置面板
+  .handle-button {
+    background-color: lighten($theme-bg-color, 20%) !important;
+  }
+}
diff --git a/src/styles/theme/core/login.scss b/src/styles/theme/core/login.scss
new file mode 100644
index 00000000..2b1a1806
--- /dev/null
+++ b/src/styles/theme/core/login.scss
@@ -0,0 +1,9 @@
+/** Login 页面相关 */
+
+.login-container {
+  background-color: $theme-bg-color;
+  color: $font-color;
+  .login-card {
+    background-color: lighten($theme-bg-color, 4%) !important;
+  }
+}
diff --git a/src/styles/theme/core/other.scss b/src/styles/theme/core/other.scss
new file mode 100644
index 00000000..cbb15b3e
--- /dev/null
+++ b/src/styles/theme/core/other.scss
@@ -0,0 +1,8 @@
+/** 这里可以写业务页面的黑暗样式 */
+
+.app-main {
+  // 指令权限页面 @/views/permission/directive.vue
+  .permission-alert {
+    background-color: lighten($theme-bg-color, 8%);
+  }
+}
diff --git a/src/styles/theme/dark/index.scss b/src/styles/theme/dark/index.scss
index 8ee20c99..d39200d8 100644
--- a/src/styles/theme/dark/index.scss
+++ b/src/styles/theme/dark/index.scss
@@ -1,2 +1,2 @@
-@import "./setting.scss";
-@import "../theme.scss";
+@import "./variables.scss";
+@import "../core/index.scss";
diff --git a/src/styles/theme/dark/setting.scss b/src/styles/theme/dark/variables.scss
similarity index 91%
rename from src/styles/theme/dark/setting.scss
rename to src/styles/theme/dark/variables.scss
index 93be2564..bb8b3058 100644
--- a/src/styles/theme/dark/setting.scss
+++ b/src/styles/theme/dark/variables.scss
@@ -1,3 +1,5 @@
+/** dark 主题下的变量 */
+
 // 主题名称
 $theme-name: "dark";
 // 主题背景颜色
diff --git a/src/styles/theme/register.scss b/src/styles/theme/register.scss
index de606569..fb1aef40 100644
--- a/src/styles/theme/register.scss
+++ b/src/styles/theme/register.scss
@@ -1,2 +1,2 @@
-// 注册的主题
+// 注册多主题
 @import "@/styles/theme/dark/index.scss";
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
deleted file mode 100644
index d81b54ee..00000000
--- a/src/styles/theme/theme.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-.#{$theme-name} {
-  /** Layout */
-
-  .app-wrapper {
-    background-color: $theme-bg-color;
-    color: $font-color;
-
-    // 侧边栏
-    .sidebar-container {
-      .sidebar-logo-container {
-        background-color: lighten($theme-bg-color, 2%) !important;
-      }
-      .el-menu {
-        background-color: lighten($theme-bg-color, 4%) !important;
-        .el-menu-item {
-          background-color: lighten($theme-bg-color, 4%) !important;
-          &.is-active,
-          &:hover {
-            background-color: lighten($theme-bg-color, 8%) !important;
-            color: $active-font-color !important;
-          }
-        }
-      }
-      .el-sub-menu__title {
-        background-color: lighten($theme-bg-color, 4%) !important;
-      }
-    }
-
-    // 顶部导航栏
-    .navigation-bar {
-      background-color: $theme-bg-color;
-      .right-menu {
-        .svg-icon {
-          color: $font-color;
-        }
-      }
-    }
-
-    // TagsView
-    .tags-view-container {
-      background-color: $theme-bg-color !important;
-      border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
-      .tags-view-item {
-        background-color: $theme-bg-color !important;
-        color: $font-color !important;
-        border: 1px solid $border-color !important;
-        &.active {
-          background-color: $active-theme-bg-color !important;
-          color: $active-font-color !important;
-          border-color: $border-color !important;
-        }
-      }
-      // 右键菜单
-      .contextmenu {
-        background-color: lighten($theme-bg-color, 8%);
-        color: $font-color;
-        li:hover {
-          background-color: lighten($theme-bg-color, 16%);
-          color: $active-font-color;
-        }
-      }
-    }
-
-    // 右侧设置面板
-    .handle-button {
-      background-color: lighten($theme-bg-color, 20%) !important;
-    }
-  }
-
-  /** AppMain 主要写 View 页面的黑暗样式 */
-
-  .app-main {
-    // 指令权限页面 /permission/directive
-    .permission-alert {
-      background-color: lighten($theme-bg-color, 8%);
-    }
-  }
-
-  /** Login 页面 */
-
-  .login-container {
-    background-color: $theme-bg-color;
-    color: $font-color;
-    .login-card {
-      background-color: lighten($theme-bg-color, 4%) !important;
-    }
-  }
-
-  /** Error-Page 页面 */
-
-  .error-page {
-    background-color: $theme-bg-color;
-  }
-
-  /** Element-Plus */
-
-  // 侧边栏的 item 的 popper
-  .el-popper {
-    border: none !important;
-    .el-menu {
-      background-color: lighten($theme-bg-color, 4%) !important;
-      .el-menu-item {
-        background-color: lighten($theme-bg-color, 4%) !important;
-        &.is-active,
-        &:hover {
-          background-color: lighten($theme-bg-color, 8%) !important;
-          color: $active-font-color !important;
-        }
-      }
-      .el-sub-menu__title {
-        background-color: lighten($theme-bg-color, 4%) !important;
-      }
-    }
-  }
-}