diff --git a/public/image/theme/element/logo/all.png b/public/image/theme/element/logo/all.png
new file mode 100644
index 00000000..cd7af8c5
Binary files /dev/null and b/public/image/theme/element/logo/all.png differ
diff --git a/public/image/theme/element/logo/icon-only.png b/public/image/theme/element/logo/icon-only.png
new file mode 100644
index 00000000..8258393a
Binary files /dev/null and b/public/image/theme/element/logo/icon-only.png differ
diff --git a/public/image/theme/element/preview@2x.png b/public/image/theme/element/preview@2x.png
new file mode 100644
index 00000000..7cdeda2a
Binary files /dev/null and b/public/image/theme/element/preview@2x.png differ
diff --git a/src/assets/style/theme/element/index.scss b/src/assets/style/theme/element/index.scss
new file mode 100644
index 00000000..7b69d576
--- /dev/null
+++ b/src/assets/style/theme/element/index.scss
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
diff --git a/src/assets/style/theme/element/setting.scss b/src/assets/style/theme/element/setting.scss
new file mode 100644
index 00000000..93dc8c9f
--- /dev/null
+++ b/src/assets/style/theme/element/setting.scss
@@ -0,0 +1,64 @@
+// 主题名称
+$theme-name: 'element';
+// 主题背景颜色
+$theme-bg-color: #314255;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// 消息提示
+$theme-message-info-background-color: #FFFFFF;
+$theme-message-info-text-color: #202D3D;
+$theme-message-info-border-color: #202D3D;
+
+// container组件
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid #CFD7E5;
+$theme-container-border-outer: 1px solid #011527;
+
+$theme-multiple-page-control-color: #BFCBD9;
+$theme-multiple-page-control-color-active: #46A0FC;
+$theme-multiple-page-control-nav-prev-color: #BFCBD9;
+$theme-multiple-page-control-nav-next-color: #BFCBD9;
+$theme-multiple-page-control-border-color: #011527;
+$theme-multiple-page-control-border-color-active: #FFFFFF;
+$theme-multiple-page-control-background-color: #212D3D;
+$theme-multiple-page-control-background-color-active: #FFFFFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #BFCBD9;
+$theme-menu-item-background-color-hover: #011527;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #BFCBD9;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #BFCBD9;
+$theme-header-item-background-color-hover: #011527;
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #BFCBD9;
+$theme-header-item-background-color-focus: #202D3D;
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #46A0FC;
+$theme-header-item-background-color-active: #202D3D;
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #BFCBD9;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #BFCBD9;
+$theme-aside-item-background-color-hover: #011527;
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #BFCBD9;
+$theme-aside-item-background-color-focus: #202D3D;
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #46A0FC;
+$theme-aside-item-background-color-active: #202D3D;
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #BFCBD9;
+$theme-aside-menu-empty-text-color: #BFCBD9;
+$theme-aside-menu-empty-background-color: #202D3D;
+$theme-aside-menu-empty-icon-color-hover: #46A0FC;
+$theme-aside-menu-empty-text-color-hover: #46A0FC;
+$theme-aside-menu-empty-background-color-hover: #202D3D;
\ No newline at end of file
diff --git a/src/assets/style/theme/register.scss b/src/assets/style/theme/register.scss
index b9449115..e2c76f4c 100644
--- a/src/assets/style/theme/register.scss
+++ b/src/assets/style/theme/register.scss
@@ -2,6 +2,7 @@
 
 @import '~@/assets/style/theme/d2/index.scss';
 @import '~@/assets/style/theme/chester/index.scss';
+@import '~@/assets/style/theme/element/index.scss';
 @import '~@/assets/style/theme/line/index.scss';
 @import '~@/assets/style/theme/star/index.scss';
 @import '~@/assets/style/theme/tomorrow-night-blue/index.scss';
diff --git a/src/setting.js b/src/setting.js
index bca1d15e..ca456ffa 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -42,6 +42,11 @@ export default {
         name: 'chester',
         preview: 'image/theme/chester/preview@2x.png'
       },
+      {
+        title: 'Element',
+        name: 'element',
+        preview: 'image/theme/element/preview@2x.png'
+      },
       {
         title: '紫罗兰',
         name: 'violet',