diff --git a/package.json b/package.json
index c492312f..23daf694 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,12 @@
 		"cropperjs": "1.5.12",
 		"crypto-js": "4.0.0",
 		"echarts": "5.1.2",
-		"element-plus": "1.0.2-beta.54",
+		"element-plus": "1.0.2-beta.70",
 		"nprogress": "0.2.0",
 		"sortablejs": "1.13.0",
 		"tinymce": "5.8.2",
 		"vue": "3.1.4",
+		"vue-i18n": "9.1.7",
 		"vue-router": "4.0.10",
 		"vuedraggable": "4.0.3",
 		"vuex": "4.0.2"
@@ -31,8 +32,8 @@
 		"babel-eslint": "10.1.0",
 		"eslint": "6.8.0",
 		"eslint-plugin-vue": "7.12.1",
-		"less": "3.13.1",
-		"less-loader": "7.3.0"
+		"sass": "1.37.5",
+		"sass-loader": "10.1.1"
 	},
 	"eslintConfig": {
 		"root": true,
diff --git a/public/index.html b/public/index.html
index ebee01ee..29d0cdd9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,12 @@
 			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
 				enabled. Please enable it to continue.</strong>
 		</noscript>
+		<script type="text/javascript">
+			var theme = window.localStorage.getItem('APP_THEME');
+			if(theme){
+				document.body.setAttribute('data-theme',  JSON.parse(theme))
+			}
+		</script>
 		<div id="app" class="aminui">
 			<div class="app-loading">
 				<div class="app-loading__logo">
@@ -30,6 +36,9 @@
 				.app-loading__loader {box-sizing: border-box;width: 35px;height: 35px;border: 5px solid transparent;border-top-color: #000;border-radius: 50%;animation: .5s loader linear infinite;position: relative;}
 				.app-loading__loader:before {box-sizing: border-box;content: '';display: block;width: inherit;height: inherit;position: absolute;top: -5px;left: -5px;border: 5px solid #ccc;border-radius: 50%;opacity: .5;}
 				.app-loading__title {font-size: 24px;color: #333;margin-top: 30px;}
+				[data-theme='dark'] .app-loading {background: #222225;}
+				[data-theme='dark'] .app-loading__loader {border-top-color: #fff;}
+				[data-theme='dark'] .app-loading__title {color: #d0d0d0;}
 				@keyframes loader {
 				    0% {
 				        transform: rotate(0deg);
diff --git a/src/App.vue b/src/App.vue
index 92596380..dfb5041b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,16 @@
 <template>
-	<router-view></router-view>
+	<el-config-provider :i18n="$i18n.t">
+		<router-view></router-view>
+	</el-config-provider>
 </template>
 
 <script>
 	export default {
-		name: 'App',
-		setup() {
-			
-		}
+		name: 'App'
 	}
 </script>
 
-<style lang="less">
-	@import '@/style/style.less';
+<style lang="scss">
+	@import '@/style/style.scss';
+	@import '@/style/theme/dark.scss';
 </style>
diff --git a/src/components/scEcharts/echarts-theme-T.js b/src/components/scEcharts/echarts-theme-T.js
index 4fa164a6..41541616 100644
--- a/src/components/scEcharts/echarts-theme-T.js
+++ b/src/components/scEcharts/echarts-theme-T.js
@@ -14,11 +14,17 @@ const T = {
 		'top': '40',
 		'containLabel': true
 	},
+	"legend": {
+		"textStyle": {
+			"color": "#999"
+		},
+		"inactiveColor": "rgba(128,128,128,0.4)"
+	},
 	"categoryAxis": {
 		"axisLine": {
 			"show": true,
 			"lineStyle": {
-				"color": "#eee",
+				"color": "rgba(128,128,128,0.2)",
 				"width": 1
 			}
 		},
@@ -56,7 +62,12 @@ const T = {
 				"color": "#999"
 			}
 		},
-
+		"splitLine": {
+			"show": true,
+			"lineStyle": {
+				"color": "rgba(128,128,128,0.2)"
+			}
+		}
 	}
 }
 
diff --git a/src/components/scFilterBar/index.vue b/src/components/scFilterBar/index.vue
index 4faa8f15..abafd194 100644
--- a/src/components/scFilterBar/index.vue
+++ b/src/components/scFilterBar/index.vue
@@ -282,4 +282,8 @@
 	.root:deep(.el-tabs__header) {margin: 0;}
 	.root:deep(.el-tabs__content) {flex: 1;background: #f6f8f9;}
 	.root:deep(.el-tabs__content) .el-tab-pane{overflow: auto;height:100%;}
+
+	[data-theme='dark'] .root:deep(.el-tabs__content) {background: none;}
+	[data-theme='dark'] .sc-filter-main {background: none;border-color:var(--el-border-color-base) ;}
+	
 </style>
diff --git a/src/components/scFilterBar/my.vue b/src/components/scFilterBar/my.vue
index 20dfa3d4..c98bcc25 100644
--- a/src/components/scFilterBar/my.vue
+++ b/src/components/scFilterBar/my.vue
@@ -104,4 +104,6 @@
 	.sc-filter-my-list li label span {color: #999;margin-right: 10px;}
 	.sc-filter-my-list li .del {position: absolute;right:20px;top:8px;border-radius:50%;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;color: #999;}
 	.sc-filter-my-list li .del:hover {background: #F56C6C;color: #fff;}
+
+	[data-theme='dark'] .sc-filter-my .el-empty h2 {color: #fff;}
 </style>
diff --git a/src/components/scSelect/index.vue b/src/components/scSelect/index.vue
index d180b183..7afdeae1 100644
--- a/src/components/scSelect/index.vue
+++ b/src/components/scSelect/index.vue
@@ -75,4 +75,6 @@
 	.sc-select {display: inline-block;position: relative;}
 	.sc-select-loading {position: absolute;top:0;left:0;right:0;bottom:0;background: #fff;z-index: 100;border-radius: 5px;border: 1px solid #EBEEF5;display: flex;align-items: center;padding-left:10px;}
 	.sc-select-loading i {font-size: 14px;}
+
+	[data-theme='dark'] .sc-select-loading {background: var(--el-color-white);border-color: var(--el-border-color-base) ;}
 </style>
diff --git a/src/components/scStatistic/index.vue b/src/components/scStatistic/index.vue
index b3ef1c59..0f36d59a 100644
--- a/src/components/scStatistic/index.vue
+++ b/src/components/scStatistic/index.vue
@@ -65,4 +65,6 @@
 	.sc-statistic-content-prefix {margin-right: 5px;}
 	.sc-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
 	.sc-statistic-description {margin-top: 10px;color: #999;}
+
+	[data-theme='dark'] .sc-statistic-content {color: #d0d0d0;}
 </style>
diff --git a/src/config/index.js b/src/config/index.js
index 8c3a8caa..23b2fc91 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -27,6 +27,9 @@ const DEFAULT_CONFIG = {
 	//是否开启多标签
 	LAYOUT_TAGS: true,
 
+	//语言
+	LANG: 'zh-cn',
+
 	//控制台首页默认布局
 	DEFAULT_GRID: {
 		//默认分栏数量和宽度 例如 [24] [18,6] [8,8,8] [6,12,6]
diff --git a/src/locales/index.js b/src/locales/index.js
new file mode 100644
index 00000000..81b04bcc
--- /dev/null
+++ b/src/locales/index.js
@@ -0,0 +1,28 @@
+import sysConfig from "@/config"
+import tool from '@/utils/tool'
+import { createI18n } from 'vue-i18n'
+import elementLocale_zh_cn from 'element-plus/lib/locale/lang/zh-cn'
+import elementLocale_en from 'element-plus/lib/locale/lang/en'
+
+import zh_cn from './lang/zh-cn.js'
+import en from './lang/en.js'
+
+const messages = {
+	'zh-cn': {
+		el: elementLocale_zh_cn.el,
+		...zh_cn
+	},
+	'en': {
+		el: elementLocale_en.el,
+		...en
+	}
+}
+
+const i18n = createI18n({
+	locale: tool.data.get("APP_LANG") || sysConfig.LANG,
+	fallbackLocale: 'zh-cn',
+	globalInjection: true,
+	messages,
+})
+
+export default i18n;
diff --git a/src/locales/lang/en.js b/src/locales/lang/en.js
new file mode 100644
index 00000000..3c48b9d1
--- /dev/null
+++ b/src/locales/lang/en.js
@@ -0,0 +1,11 @@
+export default {
+	user: {
+		dynamic: 'Dynamic',
+		info: 'User Info',
+		settings: 'Settings',
+		nightmode: 'night mode',
+		nightmode_msg: 'Suitable for low light environment,The current night mode is beta',
+		language: 'language',
+		language_msg: 'Translation in progress,Temporarily translated the text of this view',
+	}
+}
diff --git a/src/locales/lang/zh-cn.js b/src/locales/lang/zh-cn.js
new file mode 100644
index 00000000..a1162c26
--- /dev/null
+++ b/src/locales/lang/zh-cn.js
@@ -0,0 +1,11 @@
+export default {
+	user: {
+		dynamic: '近期动态',
+		info: '个人信息',
+		settings: '设置',
+		nightmode: '黑夜模式',
+		nightmode_msg: '适合光线较弱的环境，当前黑暗模式为beta版本',
+		language: '语言',
+		language_msg: '翻译进行中，暂翻译了本视图的文本',
+	}
+}
diff --git a/src/main.js b/src/main.js
index a2e6d2af..31d7e3bb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import ElementPlus from 'element-plus'
-import locale from 'element-plus/lib/locale/lang/zh-cn'
+import i18n from './locales'
 import 'element-plus/lib/theme-chalk/index.css'
 import 'element-plus/lib/theme-chalk/display.css'
 import { createApp } from 'vue'
@@ -35,7 +35,9 @@ app.config.globalProperties.$ROLE = rolePermission;
 
 app.use(store);
 app.use(router);
-app.use(ElementPlus, {size: 'small', locale: locale});
+
+app.use(ElementPlus, {size: 'small'});
+app.use(i18n);
 
 //注册全局组件
 app.component('scTable', scTable);
diff --git a/src/store/modules/global.js b/src/store/modules/global.js
index b053d91c..53ae8643 100644
--- a/src/store/modules/global.js
+++ b/src/store/modules/global.js
@@ -10,6 +10,8 @@ export default {
 		menuIsCollapse: config.MENU_IS_COLLAPSE,
 		//多标签栏
 		layoutTags: config.LAYOUT_TAGS,
+		//主题
+		theme: config.THEME,
 	},
 	mutations: {
 		SET_ismobile(state, key){
@@ -18,6 +20,9 @@ export default {
 		SET_layout(state, key){
 			state.layout = key
 		},
+		SET_theme(state, key){
+			state.theme = key
+		},
 		TOGGLE_menuIsCollapse(state){
 			state.menuIsCollapse = !state.menuIsCollapse
 		},
diff --git a/src/style/app.less b/src/style/app.scss
similarity index 95%
rename from src/style/app.less
rename to src/style/app.scss
index f4d1b6e2..b41eae17 100644
--- a/src/style/app.less
+++ b/src/style/app.scss
@@ -1,5 +1,5 @@
 /* 全局 */
-#app, body, html {width: 100%;height: 100%;background-color: @--color-background;font-size: 12px;}
+#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
 a {color: #333;text-decoration: none;}
 a:hover, a:focus {color: #000;text-decoration: none;}
 a:link {text-decoration: none;}
@@ -51,7 +51,7 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .aminui-side-split li i {font-size: 18px;}
 .aminui-side-split li p {margin-top:5px;}
 .aminui-side-split li:hover {background: rgba(255, 255, 255, 0.1);}
-.aminui-side-split li.active {background: @--color-primary;}
+.aminui-side-split li.active {background: #409EFF;}
 
 .adminui-side-split-scroll::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.4);border-radius:5px;}
 .adminui-side-split-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.5);}
@@ -86,8 +86,8 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-tags li i {margin-left:10px;padding:3px;border-radius: 3px;}
 .adminui-tags li i:hover {background: rgba(0,0,0,.2);color: #fff;}
 .adminui-tags li:hover {background: #ecf5ff;}
-.adminui-tags li.active {background: @--color-primary;}
+.adminui-tags li.active {background: #409EFF;}
 .adminui-tags li.active a {color: #fff;}
 .adminui-tags li.sortable-ghost {opacity: 0;}
 
-.adminui-main {overflow: auto;background-color: @--color-background;flex: 1;}
+.adminui-main {overflow: auto;background-color: #f6f8f9;flex: 1;}
diff --git a/src/style/fix.less b/src/style/fix.scss
similarity index 96%
rename from src/style/fix.less
rename to src/style/fix.scss
index 73c27c99..3e406d57 100644
--- a/src/style/fix.less
+++ b/src/style/fix.scss
@@ -35,6 +35,8 @@
 .el-table th.is-sortable {transition: .1s;}
 .el-table th.is-sortable:hover {background: #eee;}
 .el-col .el-card {margin-bottom: 15px;}
+.el-button--small.is-circle {padding:9px;}
+.el-button--mini.is-circle {padding:7px;}
 
 /* 覆盖tinymce样式 */
 .sceditor .tox-tinymce {border: 1px solid #DCDFE6;}
diff --git a/src/style/media.less b/src/style/media.scss
similarity index 90%
rename from src/style/media.less
rename to src/style/media.scss
index 3721c5b8..cd20f2ea 100644
--- a/src/style/media.less
+++ b/src/style/media.scss
@@ -31,8 +31,8 @@
 	.adminui-main > .el-container >*:first-child:not(.el-aside):not(.el-header) + .el-aside {margin-top: 0;}
 	.adminui-main > .el-container > .el-aside {border-bottom: 1px solid #ebeef5!important;}
 	.adminui-main > .el-container > .el-container {border-top: 1px solid #ebeef5;border-bottom: 1px solid #ebeef5;margin-top: 15px;}
-	.adminui-main > .el-container > .el-header {.headerPublic;border-bottom: 1px solid #ebeef5;}
+	.adminui-main > .el-container > .el-header {@extend .headerPublic;border-bottom: 1px solid #ebeef5;}
 	.adminui-main > .el-container > .el-main {border-top: 1px solid #ebeef5;border-bottom: 1px solid #ebeef5;margin-top: 15px;}
 	.adminui-main > .el-container > .el-main + .el-aside {border-left: 0!important;border-top: 1px solid #ebeef5;margin-top: 15px;}
-	.adminui-main > .el-container > .el-container > .el-header {.headerPublic}
+	.adminui-main > .el-container > .el-container > .el-header {@extend .headerPublic}
 }
diff --git a/src/style/pages.less b/src/style/pages.scss
similarity index 100%
rename from src/style/pages.less
rename to src/style/pages.scss
diff --git a/src/style/style.less b/src/style/style.less
deleted file mode 100644
index c25a4c60..00000000
--- a/src/style/style.less
+++ /dev/null
@@ -1,8 +0,0 @@
-@--color-primary: #409EFF;
-@--color-background: #f6f8f9;
-
-@import 'app.less';
-@import 'fix.less';
-@import 'pages.less';
-@import 'media.less';
-@import '~@/assets/font/scicon/iconfont.css';
diff --git a/src/style/style.scss b/src/style/style.scss
new file mode 100644
index 00000000..6def9dc5
--- /dev/null
+++ b/src/style/style.scss
@@ -0,0 +1,5 @@
+@import 'app.scss';
+@import 'fix.scss';
+@import 'pages.scss';
+@import 'media.scss';
+@import '~@/assets/font/scicon/iconfont.css';
diff --git a/src/style/theme/dark.scss b/src/style/theme/dark.scss
new file mode 100644
index 00000000..d1acb613
--- /dev/null
+++ b/src/style/theme/dark.scss
@@ -0,0 +1,213 @@
+[data-theme='dark'] {
+
+	$--color: #409EFF;
+	$--background: #222225;
+	$--background-translucent: rgba(0,0,0,0.2);
+	$--card-background: #2b2b2b;
+	$--text-color: #d0d0d0;
+	$--border-color: #434343;
+
+	--el-color-white: #383838;
+	--el-border-base: 1px solid #434343;
+	--el-border-color-base: #434343;
+	--el-border-color-light: #434343;
+	--el-border-color-lighter: #434343;
+	--el-border-color-hover: #6d6d6d;
+	--el-text-color-primary: #fff;
+	--el-text-color-placeholder: #5c5c5c;
+	--el-text-color-regular: #d0d0d0;
+	--el-disabled-border-base: #434343;
+	--el-disabled-fill-base: #383838;
+	--el-background-color-base: #3f3f3f;
+	--el-datepicker-inner-border-color: #434343;
+	--el-datepicker-inrange-background-color: #383838;
+	--el-datepicker-inrange-hover-background-color: #434343;
+	--el-dropdown-menuItem-hover-fill: #434343;
+	--el-dropdown-menuItem-hover-color: #fff;
+	--el-datepicker-border-color: #434343;
+	--el-svg-monochrome-grey: #434343;
+
+	/* APP背景 */
+	#app {background: $--background;color: $--text-color;}
+
+	/* 登录 */
+	.login_bg {background: $--background !important;}
+	.login-form {background: $--card-background !important;}
+	.login-sidebox  {background: #224f7e !important;}
+	.login-logo h2 {color: $--text-color !important;}
+	@media (max-width: 1000px){
+		.login_bg {background: $--card-background !important;}
+		.login_container {background: $--card-background !important;}
+	}
+
+	.el-menu {
+		--el-menu-item-hover-fill: rgba(0,0,0,0.2);
+	}
+	.el-input__inner {
+		--el-input-font-color: #d0d0d0;
+		--el-disabled-color-base: #5c5c5c;
+		--el-disabled-fill-base: $--card-background;
+	}
+	.el-input-group__append, .el-input-group__prepend {
+		--el-background-color-base: #383838;
+		--el-color-info: $--text-color;
+		border-color: $--border-color;
+	}
+	.el-radio {
+		--el-radio-font-color: #d0d0d0;
+	}
+	.el-radio-button {
+		--el-radio-button-checked-font-color: #fff;
+	}
+	.el-checkbox {
+		--el-checkbox-font-color: #d0d0d0;
+		--el-checkbox-checked-icon-color: #fff;
+		--el-checkbox-disabled-input-fill: #383838;
+		--el-checkbox-disabled-border-color: #383838;
+		--el-checkbox-disabled-checked-input-fill: #383838;
+	}
+	.el-checkbox-button {
+		--el-checkbox-button-checked-font-color: #fff;
+	}
+	.el-select {
+		--el-select-input-color: #d0d0d0;
+	}
+	.el-switch {
+		--el-switch-off-color: #383838;
+	}
+	.el-cascader__dropdown {
+		--el-cascader-menu-fill: #383838;
+	}
+	.el-button {
+		--el-button-default-background-color: none;
+	}
+	.el-dialog {
+		--el-dialog-background-color: #2b2b2b;
+	}
+	.el-drawer {
+		--el-drawer-background-color: #2b2b2b;
+	}
+	.el-table {
+		--el-table-font-color: #d0d0d0;
+		--el-table-header-background-color: #2b2b2b;
+		--el-table-current-row-background-color: #3f3f3f;
+		--el-table-row-hover-background-color: #373737;
+		--el-table-border-color: #434343;
+	}
+	.el-descriptions {
+		--el-descriptions-item-bordered-label-background: #222225;
+	}
+	.el-skeleton {
+		--el-skeleton-color: #434343;
+	}
+	.el-collapse {
+		--el-collapse-header-background-color: none;
+		--el-collapse-content-background-color: none;
+	}
+	.el-calendar {
+		--el-calendar-selected-background-color: #222225;
+	}
+
+	/* 布局 */
+	.adminui-header {background: $--background;}
+	.aminui-side-split {background: $--background;}
+	.aminui-side-split li {color: $--text-color;}
+	.aminui-side-split li.active {color: #fff;}
+	.aminui-side {background: $--card-background;border-color: $--border-color;}
+	.adminui-side-top {border-color: $--border-color;}
+	.adminui-side-top h2 {color: $--text-color;}
+	.adminui-main {background: $--background;}
+	.adminui-topbar {background: $--card-background;border-color: $--border-color;color: $--text-color;}
+	.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, $--background, transparent);}
+	.adminui-tags {background: $--card-background;border-color: $--border-color;}
+	.adminui-tags li::after {display: none;}
+	.adminui-tags li:hover {background: $--background-translucent;}
+	.adminui-tags li.active {background: $--color;}
+	.drawerBG {background: $--background;}
+
+	.el-card {background: $--card-background;border-color: $--card-background;color: $--text-color;}
+	.el-card__header {color: $--text-color;}
+
+	.el-main.nopadding {background: $--card-background !important;border-color: $--border-color;}
+	.el-header {background: $--card-background;border-color: $--border-color;}
+	.el-aside {background: $--card-background;border-color: $--border-color !important;}
+	.el-footer {background: $--card-background;border-color: $--border-color;}
+
+	.el-tree {background: none;color: $--text-color;}
+	.el-tree-node:focus>.el-tree-node__content {background: $--background-translucent}
+	.el-tree-node__content:hover {background: $--background-translucent;}
+	.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {background: $--background-translucent;}
+
+	.el-table {background: $--card-background;color: $--text-color;}
+	.el-table thead.is-group th {background: $--background-translucent}
+	.el-table th.is-sortable:hover {background: $--background-translucent}
+	.el-table tr {background: #2e2e2e;}
+	.el-table--striped .el-table__body tr.el-table__row--striped td {background: #2b2b2b;}
+
+	.el-menu {background: $--card-background;}
+	.el-menu-item {color: $--text-color;}
+	.el-menu-item:hover {background: $--background-translucent;}
+	.el-menu-item.is-active {background: $--background;color: $--color;}
+
+	.el-loading-mask {background-color: rgba(0,0,0,0.5);}
+
+	.el-tabs__item {color: $--text-color;}
+	.el-tabs__nav-wrap::after {background: $--border-color;}
+
+	.el-radio-button__inner {border-color: $--border-color;color: $--text-color;}
+	.el-radio-button:first-child .el-radio-button__inner {border-left-color: $--border-color;}
+
+	.el-checkbox-button__inner {border-color: $--border-color;color: $--text-color;}
+	.el-checkbox-button:first-child .el-checkbox-button__inner {border-left-color: $--border-color;}
+
+	.el-input-number__decrease, .el-input-number__increase {background: #383838;color: $--text-color;}
+	.el-input-number.is-disabled .el-input-number__decrease, .el-input-number.is-disabled .el-input-number__increase {background: $--card-background;}
+
+	.el-select .el-select__tags .el-tag {background: $--background-translucent;}
+	.el-switch__core .el-switch__action {background: $--text-color;}
+
+	.el-picker__popper.el-popper[role=tooltip] {background: $--card-background;}
+	.el-picker-panel {background: $--card-background;}
+	.el-picker-panel__footer {background: $--card-background;}
+	.el-picker-panel .el-time-panel {background: $--card-background;}
+	.el-time-spinner__item:hover:not(.disabled):not(.active) {background: $--background-translucent;}
+	.el-date-editor .el-range-input {background: none;}
+
+	.el-dropdown__popper.el-popper[role=tooltip] {background: $--card-background;}
+	.el-dropdown-menu {background: $--card-background;}
+	.el-dropdown-menu__item--divided:before {background: $--card-background;}
+
+	.el-tag.el-tag--light {background: none;border-color: $--border-color;}
+	.el-button--default:hover,.el-button--default:focus {background: #383838;border-color: $--color;}
+	.el-button.is-plain {background: none;border-color: $--border-color;}
+	.el-button.is-plain.is-disabled,.el-button.is-plain.is-disabled:hover {background: #383838;border-color: $--border-color;}
+
+	.el-badge__content {color: #fff;}
+
+	.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {background: #383838;}
+
+	.el-descriptions__body {background: none;}
+
+	.el-alert--info.is-light {background: $--card-background;}
+	.el-alert--success.is-light {background: #273a1d;}
+	.el-alert--warning.is-light {background: #3e2e15;}
+	.el-alert--error.is-light {background: #3a2323;}
+
+	.el-divider__text {background: $--card-background;}
+
+	.el-calendar {background: $--card-background;}
+	.el-calendar__title {color: $--text-color;}
+
+	.el-empty__image svg {
+		#Rectangle-Copy {fill: #111;}
+		#Rectangle-Copy-10 {fill: #555;}
+		#Rectangle-Copy-11 {fill: #333;}
+		#Rectangle-Copy-12 {fill: #424242;}
+		#Rectangle-Copy-13 {fill: #555;}
+		#Rectangle-Copy-14 {fill: #555;}
+		#Rectangle-Copy-15 {fill: #2b2b2b;}
+		#Rectangle-Copy-18 {fill: #555;}
+		#Mask {fill: #222;}
+		#Oval-Copy-2 {fill: #1d1d1d;}
+	}
+}
diff --git a/src/views/home/stats/index.vue b/src/views/home/stats/index.vue
index 768284e2..01e87486 100644
--- a/src/views/home/stats/index.vue
+++ b/src/views/home/stats/index.vue
@@ -133,4 +133,6 @@
 	.data-box .item .icon i {font-size: 18px;background: #409EFF;color: #fff;border-radius: 50%;width:32px;height: 32px;display: flex;align-items: center;justify-content: center;}
 	.data-box .item p span.up {color: #F56C6C;}
 	.data-box .item p span.down {color: #67C23A;}
+	
+	[data-theme='dark'] .welTop .main h2 {color: var(--el-text-color-regular);}
 </style>
diff --git a/src/views/home/work/components/myapp.vue b/src/views/home/work/components/myapp.vue
index fea7035e..06b6e836 100644
--- a/src/views/home/work/components/myapp.vue
+++ b/src/views/home/work/components/myapp.vue
@@ -122,7 +122,7 @@
 	.myMods li i {font-size: 26px;color: #fff;}
 	.myMods li p {font-size: 12px;color: #fff;margin-top: 10px;width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
 
-	.modItem-add {background: #fff;border: 1px dashed #ddd;cursor: pointer;}
+	.modItem-add {border: 1px dashed #ddd;cursor: pointer;}
 	.modItem-add i {font-size: 30px;color: #999!important;}
 	.modItem-add:hover,.modItem-add:hover i {border-color: #409EFF;color: #409EFF!important;}
 
diff --git a/src/views/template/chartlist.vue b/src/views/template/chartlist.vue
index 281c1961..7f7dbb22 100644
--- a/src/views/template/chartlist.vue
+++ b/src/views/template/chartlist.vue
@@ -215,4 +215,8 @@
 	.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}
 
 	.chart {border-top: 1px solid #f0f0f0;margin-top: 20px;padding-top: 20px;}
+
+	[data-theme='dark'] .number-data .item {border-color: var(--el-border-color-base);}
+	[data-theme='dark'] .number-data .item p {color: #d0d0d0;}
+	[data-theme='dark'] .chart {border-color: var(--el-border-color-base);}
 </style>
diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue
index 57f402c7..5b42d429 100644
--- a/src/views/userCenter/index.vue
+++ b/src/views/userCenter/index.vue
@@ -37,7 +37,7 @@
 			<el-col :lg="16">
 				<el-card shadow="never">
 					<el-tabs tab-position="top">
-						<el-tab-pane label="近期动态">
+						<el-tab-pane :label="$t('user.dynamic')">
 							<el-timeline style="margin-top:20px;padding-left:10px;">
 								<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" placement="top">
 									<div class="activity-item">
@@ -47,7 +47,7 @@
 								</el-timeline-item>
 							</el-timeline>
 						</el-tab-pane>
-						<el-tab-pane label="基本信息">
+						<el-tab-pane :label="$t('user.info')">
 							<el-form ref="form" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
 								<el-form-item label="账号">
 									<el-input v-model="form.user" disabled></el-input>
@@ -71,25 +71,18 @@
 								</el-form-item>
 							</el-form>
 						</el-tab-pane>
-						<el-tab-pane label="个人设置">
-							<el-form ref="form" :model="form" label-width="120px" style="width: 460px;margin-top:20px;">
-								<el-form-item label="布局">
-									<el-select v-model="config.theme" placeholder="请选择">
-										<el-option label="常规" value="0"></el-option>
-										<el-option label="分栏" value="1"></el-option>
+						<el-tab-pane :label="$t('user.settings')">
+							<el-form ref="form" :model="form" label-width="120px" style="margin-top:20px;">
+								<el-form-item :label="$t('user.nightmode')">
+									<el-switch v-model="config.theme" active-value="dark" inactive-value="default"></el-switch>
+									<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
+								</el-form-item>
+								<el-form-item :label="$t('user.language')">
+									<el-select v-model="config.lang">
+										<el-option label="简体中文" value="zh-cn"></el-option>
+										<el-option label="English" value="en"></el-option>
 									</el-select>
-								</el-form-item>
-								<el-form-item label="控制台自由布局">
-									<el-switch v-model="config.diy"></el-switch>
-								</el-form-item>
-								<el-form-item label="多标签">
-									<el-switch v-model="config.tags"></el-switch>
-								</el-form-item>
-								<el-form-item label="系统通知">
-									<el-switch v-model="config.msg"></el-switch>
-								</el-form-item>
-								<el-form-item>
-									<el-button type="primary">保存</el-button>
+									<div class="el-form-item-msg">{{ $t('user.language_msg') }}</div>
 								</el-form-item>
 							</el-form>
 						</el-tab-pane>
@@ -156,12 +149,23 @@
 					about: "正所谓富贵险中求"
 				},
 				config: {
-					theme: '1',
-					diy: true,
-					tags: true,
-					msg: true
+					lang: this.$TOOL.data.get('APP_LANG')||this.$CONFIG.LANG,
+					theme: this.$TOOL.data.get('APP_THEME')
 				}
 			}
+		},
+		watch:{
+			'config.theme'(val){
+				document.body.setAttribute('data-theme', val)
+				this.$TOOL.data.set("APP_THEME", val);
+			},
+			'config.lang'(val){
+				this.$i18n.locale = val
+				this.$TOOL.data.set("APP_LANG", val);
+			}
+		},
+		methods: {
+
 		}
 	}
 </script>
@@ -172,4 +176,7 @@
 	.activity-item label {color: #333;margin-right:10px;}
 	.activity-item .el-avatar {margin-right:10px;}
 	.activity-item .el-tag {margin-right:10px;}
+
+	[data-theme='dark'] .user-info-bottom {border-color: var(--el-border-color-base);}
+	[data-theme='dark'] .activity-item label {color: #999;}
 </style>
diff --git a/src/views/userCenter/login.vue b/src/views/userCenter/login.vue
index 4c648b48..d21b5ce7 100644
--- a/src/views/userCenter/login.vue
+++ b/src/views/userCenter/login.vue
@@ -1,87 +1,89 @@
 <template>
+	<div class="login_bg">
+		<div class="login_container">
+			<div class="login_body">
 
-	<div class="login_container">
-		<div class="login_body">
+				<div class="login-form">
+					<div class="login-logo">
+						<img class="logo" :alt="appName" src="img/logo.png">
+						<h2>用户登录</h2>
+					</div>
+					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" size="large">
+						<el-form-item prop="user">
+							<el-input v-model="ruleForm.user" prefix-icon="el-icon-user" clearable placeholder="用户名 / 手机 / 邮箱"></el-input>
+						</el-form-item>
+						<el-form-item prop="password">
+							<el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" clearable show-password placeholder="请输入密码"></el-input>
+						</el-form-item>
+						<el-form-item style="margin-bottom: 10px;">
+							<el-row>
+								<el-col :span="12">
+									<el-checkbox label="记住我" v-model="ruleForm.autologin"></el-checkbox>
+								</el-col>
+								<el-col :span="12" style="text-align: right;">
+									<el-button type="text">忘记密码？</el-button>
+								</el-col>
+							</el-row>
+						</el-form-item>
+						<el-form-item>
+							<el-dropdown  style="width: 100%;">
+								<el-button type="primary" style="width: 100%;" :loading="islogin" round>登 录<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+								<template #dropdown>
+									<el-dropdown-menu>
+										<el-dropdown-item @click="submitForm('ruleForm', 'admin')">
+											<div class="demo-user-item">
+												<div class="icon">
+													<el-avatar src="img/avatar.jpg"></el-avatar>
+												</div>
+												<div class="info">
+													<h2>Sakuya</h2>
+													<p>超级管理员(Administrator)</p>
+												</div>
+											</div>
+										</el-dropdown-item>
+										<el-dropdown-item @click="submitForm('ruleForm', 'user')">
+											<div class="demo-user-item">
+												<div class="icon">
+													<el-avatar src="img/avatar2.gif"></el-avatar>
+												</div>
+												<div class="info">
+													<h2>Lolowan</h2>
+													<p>普通用户(User)</p>
+												</div>
+											</div>
+										</el-dropdown-item>
+									</el-dropdown-menu>
+								</template>
+							</el-dropdown>
+						</el-form-item>
+					</el-form>
 
-			<div class="login-form">
-				<div class="login-logo">
-					<img class="logo" :alt="appName" src="img/logo.png">
-					<h2>用户登录</h2>
+					<el-divider>其他登录方式</el-divider>
+
+					<div class="login-oauth">
+						<el-button size="small" type="primary" icon="el-icon-platform-eleme" circle></el-button>
+						<el-button size="small" type="success" icon="el-icon-s-goods" circle></el-button>
+						<el-button size="small" type="info" icon="el-icon-s-promotion" circle></el-button>
+						<el-button size="small" type="warning" icon="el-icon-menu" circle></el-button>
+					</div>
 				</div>
-				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" size="large">
-					<el-form-item prop="user">
-						<el-input v-model="ruleForm.user" prefix-icon="el-icon-user" clearable placeholder="用户名 / 手机 / 邮箱"></el-input>
-					</el-form-item>
-					<el-form-item prop="password">
-						<el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" clearable show-password placeholder="请输入密码"></el-input>
-					</el-form-item>
-					<el-form-item style="margin-bottom: 10px;">
-						<el-row>
-							<el-col :span="12">
-								<el-checkbox label="记住我" v-model="ruleForm.autologin"></el-checkbox>
-							</el-col>
-							<el-col :span="12" style="text-align: right;">
-								<el-button type="text">忘记密码？</el-button>
-							</el-col>
-						</el-row>
-					</el-form-item>
-					<el-form-item>
-						<el-dropdown  style="width: 100%;">
-							<el-button type="primary" style="width: 100%;" :loading="islogin" round>登 录<i class="el-icon-arrow-down el-icon--right"></i></el-button>
-							<template #dropdown>
-								<el-dropdown-menu>
-									<el-dropdown-item @click="submitForm('ruleForm', 'admin')">
-										<div class="demo-user-item">
-											<div class="icon">
-												<el-avatar src="img/avatar.jpg"></el-avatar>
-											</div>
-											<div class="info">
-												<h2>Sakuya</h2>
-												<p>超级管理员(Administrator)</p>
-											</div>
-										</div>
-									</el-dropdown-item>
-									<el-dropdown-item @click="submitForm('ruleForm', 'user')">
-										<div class="demo-user-item">
-											<div class="icon">
-												<el-avatar src="img/avatar2.gif"></el-avatar>
-											</div>
-											<div class="info">
-												<h2>Lolowan</h2>
-												<p>普通用户(User)</p>
-											</div>
-										</div>
-									</el-dropdown-item>
-								</el-dropdown-menu>
-							</template>
-						</el-dropdown>
-					</el-form-item>
-				</el-form>
-
-				<el-divider>其他登录方式</el-divider>
-
-				<div class="login-oauth">
-					<el-button size="medium" type="primary" icon="el-icon-platform-eleme" circle></el-button>
-					<el-button size="medium" type="success" icon="el-icon-s-goods" circle></el-button>
-					<el-button size="medium" type="info" icon="el-icon-s-promotion" circle></el-button>
-					<el-button size="medium" type="warning" icon="el-icon-menu" circle></el-button>
+				<div class="login-sidebox">
+					<div class="login-sidebox__title">
+						<h2>SCUI</h2>
+						<h4>高性能 / 精致 / 优雅</h4>
+						<p>基于Vue3 + Element-Plus 的中后台前端解决方案。</p>
+					</div>
+					<img src="img/loginbg.svg"/>
 				</div>
 			</div>
-			<div class="login-sidebox">
-				<div class="login-sidebox__title">
-					<h2>SCUI</h2>
-					<h4>高性能 / 精致 / 优雅</h4>
-					<p>基于Vue3 + Element-Plus 的中后台前端解决方案。</p>
-				</div>
-				<img src="img/loginbg.svg"/>
-			</div>
+			<div class="login-footer">© {{appName}} {{appVar}}</div>
 		</div>
-		<div class="login-footer">© {{appName}} {{appVar}}</div>
 	</div>
-
 </template>
 
 <style scoped>
+
+	.login_bg {position: absolute;top:0px;left:0px;right:0px;bottom:0px;}
 	.login_container {position: absolute;top:50%;left:50%;width: 1100px;margin: 0 auto;z-index: 1;transform: translate(-50%, -50%);}
 	.login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
 	.login-sidebox {width: 50%;padding: 60px;color: #fff;background:#3887e5;position: relative;overflow: hidden;}
@@ -110,6 +112,7 @@
 	.demo-user-item .info p {color: #666;margin-top: 6px;}
 
 	@media (max-height: 650px){
+	.login_bg {position: static;}
 	.login_container {position: static;transform: none;margin:50px auto;}
 	.login-footer {margin-bottom: 50px;}
 	}
diff --git a/vue.config.js b/vue.config.js
index 644197e8..510767cb 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -26,6 +26,7 @@ module.exports = {
 		// 移除 prefetch 插件
 		config.plugins.delete('preload');
 		config.plugins.delete('prefetch');
+		config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js');
 	},
 
 	configureWebpack: config => {