diff --git a/src/App.vue b/src/App.vue
index e7ac112..d351d10 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,8 @@
 <style lang="scss">
 @import './style/main';
 @import './style/font';
+@import "~vue-material/dist/theme/engine";
+@import "~vue-material/dist/theme/all";
 body,
 h1,
 h2,
@@ -107,12 +109,23 @@ button {
 	border: none;
 	outline: none;
 }
+html[data-theme="dark"] {
+	@include set-theme-dark();
+	@import '~vue-material/dist/theme/all';
+	.md-caption {
+		color: rgba(255, 255, 255, 0.7);
+	}
+}
+html[data-theme="light"] {
+	@include set-theme-light();
+	@import '~vue-material/dist/theme/all';
+}
 #app {
 	font-family: 'Roboto', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	/* text-align: center; */
-	color: #2c3e50;
+	// color: #2c3e50;
 	position: absolute;
 	top: 0;
 	left: 0;
diff --git a/src/main.js b/src/main.js
index 9303cc1..d7f290b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ Vue.component('icon', Icon);
 import VueMaterial from 'vue-material'
 import 'vue-material/dist/vue-material.min.css'
 import 'vue-material/dist/theme/default.css'
+// import 'vue-material/dist/theme/default-dark.css'
 import 'material-design-icons/iconfont/material-icons.css'
 Vue.use(VueMaterial)
 
diff --git a/src/style/main.scss b/src/style/main.scss
index 0ee39e1..9960a3b 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1 +1,30 @@
-$main-color: #448aff;
\ No newline at end of file
+$main-color: #448aff;
+
+@import '~vue-material/dist/theme/engine'; // Import the theme engine
+
+@mixin set-theme-light() {
+		@include md-register-theme(
+			'default',
+			(
+				primary: md-get-palette-color(blue, A200),
+				// The primary color of your application

+					accent: md-get-palette-color(red, A200),
+				// The accent or secondary color

+					theme: light// This can be dark or light

+			)
+		);
+}
+
+@mixin set-theme-dark() {
+		@include md-register-theme(
+			'default',
+			(
+				primary: md-get-palette-color(blue, A200),
+				// The primary color of your application

+					accent: md-get-palette-color(red, A200),
+				// The accent or secondary color

+					theme: dark// This can be dark or light

+			)
+		);
+}
+@import '~vue-material/dist/theme/all'; // Apply the theme
diff --git a/src/views/Account/Account.vue b/src/views/Account/Account.vue
index 8dfebf5..ad6f7d7 100644
--- a/src/views/Account/Account.vue
+++ b/src/views/Account/Account.vue
@@ -9,6 +9,7 @@
 			</md-app-toolbar>
 
 			<md-app-content>
+				<div style="height: 54px;"></div>
 				<icon class="logo" name="canary"></icon>
 				<template v-if="page_type == 'login'">
 					<md-field :class="mail_addr_verify ? '' : 'md-invalid'">
@@ -104,7 +105,8 @@ export default {
 			activation_loading: false,
 			show_snackbar: false,
 			snakebar_msg:'',
-			lang:''
+			lang:'',
+			clientHeight:''
 		};
 	},
 	computed: {
@@ -115,7 +117,13 @@ export default {
 	},
 	methods: {
 		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']),
-
+		// 修改md-app的最小高度
+		changeFixed(clientHeight) {
+			//动态修改样式
+			// console.log(clientHeight);
+			window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
+			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
+		},
 		// 初始化
 		init() {
 			// 刷新vuex
@@ -419,8 +427,19 @@ export default {
 		console.log('临时语言系统加载完成')
 		this.init()
 	},
-	mounted() {},
+	mounted() {
+		// 获取浏览器可视区域高度
+		this.clientHeight = `${document.documentElement.clientHeight}`;
+		//document.body.clientWidth;
+		window.onresize = function temp() {
+			this.clientHeight = `${document.documentElement.clientHeight}`;
+		};
+	},
 	watch: {
+		// 如果 `clientHeight` 发生改变，这个函数就会运行
+		clientHeight: function() {
+			this.changeFixed(this.clientHeight);
+		},
 		// 如果 `mail_addr` 发生改变，就会清空错误状态
 		mail_addr: function() {
 			this.mail_addr_verify = true
@@ -467,5 +486,8 @@ export default {
 		margin-right: -11px;
 		margin-top: -11px;
 	}
+	.toolbar {
+		position: fixed !important;
+	}
 }
 </style>
diff --git a/src/views/Add/Add.vue b/src/views/Add/Add.vue
index 2045c10..ffd0901 100644
--- a/src/views/Add/Add.vue
+++ b/src/views/Add/Add.vue
@@ -7,8 +7,8 @@
 					<h3 class="md-title" style="flex: 1">{{id_cache?lang.title[1]:lang.title[0]}}</h3>
 				</div>
 			</md-app-toolbar>
-
 			<md-app-content>
+				<div style="height: 54px;"></div>
 				<md-field :class="title_verify? '':'md-invalid'">
 					<label>{{lang.subheader[0]}}</label>
 					<md-input v-model="title" required></md-input>
@@ -53,6 +53,7 @@ export default {
 	name: 'Add',
 	data() {
 		return {
+			clientHeight: '',
 			title: '',
 			user_name: '',
 			password: '',
@@ -71,7 +72,13 @@ export default {
 	},
 	methods: {
 		...mapActions(['setRowData', 'setRowPwd']),
-		
+		// 修改md-app的最小高度
+		changeFixed(clientHeight) {
+			//动态修改样式
+			// console.log(clientHeight);
+			window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
+			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
+		},
 		// 初始化
 		init() {
 			// 刷新vuex
@@ -239,8 +246,20 @@ export default {
 		console.log('临时语言系统加载完成')
 		this.init()
 	},
-	mounted() {},
-	watch: {},
+	mounted() {
+		// 获取浏览器可视区域高度
+		this.clientHeight = `${document.documentElement.clientHeight}`;
+		//document.body.clientWidth;
+		window.onresize = function temp() {
+			this.clientHeight = `${document.documentElement.clientHeight}`;
+		};
+	},
+	watch: {
+		// 如果 `clientHeight` 发生改变，这个函数就会运行
+		clientHeight: function() {
+			this.changeFixed(this.clientHeight);
+		},
+	},
 	beforeDestroy() {},
 	components: {}
 };
@@ -257,5 +276,8 @@ export default {
 		margin: 0 !important;
 		min-height: 1.2rem !important;
 	}
+	.toolbar {
+		position: fixed !important;
+	}
 }
 </style>
diff --git a/src/views/Detail/Detail.vue b/src/views/Detail/Detail.vue
index 9e94fb1..8a10255 100644
--- a/src/views/Detail/Detail.vue
+++ b/src/views/Detail/Detail.vue
@@ -13,12 +13,13 @@
 			</md-app-toolbar>
 
 			<md-app-content>
+				<div style="height: 54px;"></div>
 				<md-list class="md-double-line">
 					<md-list-item>
 						<label class="md-caption">{{lang.label[0]}}</label>
 						<div class="msg-box">
 							<p>{{content.user_name}}</p>
-							<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy"></icon></md-button>
+							<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy" :class="settings.is_dark_mode? 'dark-theme-icon': ''"></icon></md-button>
 						</div>
 					</md-list-item>
 					<md-list-item>
@@ -26,7 +27,7 @@
 						<div class="msg-box">
 							<p class="password">{{show_password? content.password : doitPassword}}</p>
 							<md-button class="md-icon-button" @click="show_password = !show_password"><md-icon>remove_red_eye</md-icon></md-button>
-							<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy"></icon></md-button>
+							<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy" :class="settings.is_dark_mode? 'dark-theme-icon': ''"></icon></md-button>
 						</div>
 					</md-list-item>
 					<md-list-item>
@@ -75,7 +76,8 @@ export default {
 			content: {},
 			show_password: false,
 			show_dialog: false,
-			lang:''
+			lang:'',
+			clientHeight:''
 		};
 	},
 	computed: {
@@ -92,7 +94,12 @@ export default {
 	},
 	methods: {
 		...mapActions(['setRowData', 'setRowPwd']),
-		
+		// 修改md-app的最小高度
+		changeFixed(clientHeight) {
+			//动态修改样式
+			window.document.getElementsByClassName('md-app-content')[0].style.minHeight = clientHeight + 'px';
+			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
+		},
 		// 初始化
 		init() {
 			// 刷新vuex
@@ -229,8 +236,20 @@ export default {
 		console.log('临时语言系统加载完成')
 		this.init()
 	},
-	mounted() {},
-	watch: {},
+	mounted() {
+		// 获取浏览器可视区域高度
+		this.clientHeight = `${document.documentElement.clientHeight}`;
+		//document.body.clientWidth;
+		window.onresize = function temp() {
+			this.clientHeight = `${document.documentElement.clientHeight}`;
+		};
+	},
+	watch: {
+		// 如果 `clientHeight` 发生改变，这个函数就会运行
+		clientHeight: function() {
+			this.changeFixed(this.clientHeight);
+		},
+	},
 	beforeDestroy() {},
 	components: {}
 };
@@ -242,6 +261,9 @@ export default {
 	width: 100%;
 	min-height: 100%;
 	background: #fff;
+	.md-toolbar {
+		position: fixed !important;
+	}
 	.md-list-item-content {
 		position: relative;
 		label {
@@ -266,7 +288,10 @@ export default {
 			.icon {
 				height: 24px;
 				width: 24px;
-				color: grey;
+				color: gray;
+			}
+			.dark-theme-icon {
+				color: #fff !important;
 			}
 			.node {
 				width: 100%;
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index ec83ab9..e403f43 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -23,7 +23,7 @@
 			
 			<md-app-drawer :md-active.sync="menuVisible">
 				<div class="drawer-banner">
-					<md-icon class="default-avatar md-size-2x">face</md-icon>
+					<md-icon class="default-avatar md-size-2x face">face</md-icon>
 					<p class="md-title">Canary Codebook</p>
 					<p class="md-caption">{{ user_infos.mail_addr }}</p>
 				</div>
@@ -72,7 +72,7 @@
 					md-icon="devices_other"
 					:md-label="lang.empty_state.label"
 					:md-description="lang.empty_state.description"
-					v-if="show_list.length == 0"
+					v-if="show_list.length == 0 && !search_start"
 				>
 					<md-button class="md-primary md-raised" @click="turnToAdd()">{{lang.empty_state.button}}</md-button>
 				</md-empty-state>
@@ -82,7 +82,7 @@
 					<p class="md-caption">{{ code.user_name }}</p>
 				</div>
 
-				<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0">
+				<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0 || search_start">
 					<md-speed-dial-target class="md-primary" @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target>
 				</md-speed-dial>
 				<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
@@ -132,6 +132,7 @@ export default {
 			// console.log(clientHeight);
 			this.$refs.home.children[0].style.minHeight = clientHeight + 'px';
 			this.$refs.list_placeholder.parentNode.style.maxHeight = clientHeight + 'px';
+			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
 		},
 
 		// 初始化
@@ -429,4 +430,7 @@ export default {
 .md-app-scroller > div {
 	overflow-y:scroll!important;
 }
+.face {
+	color: #fff !important;
+}
 </style>
diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue
index fb63837..41cdb5d 100644
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -9,6 +9,7 @@
 			</md-app-toolbar>
 
 			<md-app-content>
+				<div style="height: 54px;"></div>
 				<md-list>
 					<md-subheader class="md-primary">{{lang.subheader[0]}}</md-subheader>
 					<md-list-item @click="resetAccount()">
@@ -45,7 +46,7 @@
 					<md-list-item>
 						<md-icon>brightness_6</md-icon>
 						<span class="md-list-item-text">{{lang.option_list[1]}}</span>
-						<md-switch v-model="is_dark_mode" class="md-primary" disabled></md-switch>
+						<md-switch v-model="is_dark_mode" class="md-primary"></md-switch>
 					</md-list-item>
 
 					<md-list-item>
@@ -109,7 +110,8 @@ export default {
 			snakebar_msg: '',
 			// 初始化完成状态
 			has_init: false,
-			lang: ''
+			lang: '',
+			clientHeight:''
 		};
 	},
 	computed: {
@@ -117,7 +119,14 @@ export default {
 	},
 	methods: {
 		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
-
+		
+		// 修改md-app的最小高度
+		changeFixed(clientHeight) {
+			//动态修改样式
+			// console.log(clientHeight);
+			window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
+			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
+		},
 		// 初始化
 		init() {
 			// 刷新vuex
@@ -255,6 +264,7 @@ export default {
 			} else {
 				this.lang = lang().settings.EN
 			}
+			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
 			console.log('语言配置完成')
 			this.snakebar_msg = this.lang.snakebar_msg.reset_settings;
 			this.show_snackbar = true;
@@ -285,8 +295,19 @@ export default {
 		console.log('临时语言系统加载完成')
 		this.init();
 	},
-	mounted() {},
+	mounted() {
+		// 获取浏览器可视区域高度
+		this.clientHeight = `${document.documentElement.clientHeight}`;
+		//document.body.clientWidth;
+		window.onresize = function temp() {
+			this.clientHeight = `${document.documentElement.clientHeight}`;
+		};
+	},
 	watch: {
+		// 如果 `clientHeight` 发生改变，这个函数就会运行
+		clientHeight: function() {
+			this.changeFixed(this.clientHeight);
+		},
 		// 如果 `is_chinese` 发生改变，就会执行设置函数
 		is_chinese: function() {
 			if (this.has_init) this.resetSettings();
@@ -327,6 +348,9 @@ export default {
 		margin-right: -11px;
 		margin-top: -11px;
 	}
+	.toolbar {
+		position: fixed !important;
+	}
 }
 </style>
 <!-- 
diff --git a/src/views/Unlock/Unlock.vue b/src/views/Unlock/Unlock.vue
index e722cc4..ffa2d8d 100644
--- a/src/views/Unlock/Unlock.vue
+++ b/src/views/Unlock/Unlock.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="unlock">
+	<div class="unlock" :class="settings.is_dark_mode? 'dark-theme-unlock':''">
 		<md-toolbar class="md-primary">
 			<h3 class="md-title" style="flex: 1">{{ is_create ? lang.title[0] : lang.title[1] }}</h3>
 		</md-toolbar>
@@ -199,4 +199,10 @@ export default {
 		margin-top: 1rem;
 	}
 }
+.dark-theme-unlock {
+	background: #424242;
+	.center {
+		color: #fff !important;
+	}
+}
 </style>