添加主题色筛选功能

2019-04-14 20:33:52 +08:00 · 2019-04-14 20:33:52 +08:00 · 022a20ea02
commit 022a20ea02
parent 565ce70d81
20 changed files with 247 additions and 192 deletions
--- a/components/Home.vue
+++ b/components/Home.vue
@ -224,7 +224,6 @@ export default {
    load-end(0.56s)
  }
 }
-}

@media (max-width: $MQMobile) {
  .home {
--- a/components/Page.vue
+++ b/components/Page.vue
@ -219,7 +219,7 @@ function flatten (items, res) {

 <style lang="stylus">
@require '../styles/wrapper.styl'
-@require '../../styles/loadMixin.styl'
+@require '../styles/loadMixin.styl'

 .page
  padding-top 6rem
--- a/components/Theme/CogIcon.vue
+++ b/components/Theme/CogIcon.vue
@ -1,20 +0,0 @@
-<template>
-	<svg
-		aria-hidden="true"
-		data-prefix="fas"
-		data-icon="cog"
-		class="svg-inline--fa fa-cog fa-w-16"
-		role="img"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 512 512"
-	>
-		<!-- eslint-disable-next-line vue/html-self-closing -->
-		<path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path>
-	</svg>
-</template>
-
-<script>
-export default {
-	name: 'CogIcon',
-};
-</script>
--- a/components/Theme/ThemeOptions.vue
+++ b/components/Theme/ThemeOptions.vue
@ -1,81 +1,93 @@
 <template>
 	<div class="theme-options">
-		<ul v-if="yuu.hasThemes" class="color-theme-options">
+		<ul v-if="reco.hasThemes" class="color-theme-options">
 			<li>
 				<a href="#" class="default-theme" @click.prevent="setTheme()"></a>
 			</li>
-			<li v-for="color in yuu.themes" :key="color">
-				<a href="#" :class="`${color}-theme`" @click.prevent="setTheme(color)"></a>
+			<li v-for="color in reco.themes" :key="color">
+				<a href="#" :class="`${color}-theme`" :style="{background: colors[color]}" @click.prevent="setTheme(color)"></a>
 			</li>
 		</ul>
-		<div v-if="!yuu.disableDarkTheme" class="dark-theme-options toggle-option">
+		<div v-if="!reco.disableDarkTheme" class="dark-theme-options toggle-option">
 			<label for="dark-theme-toggle">Enable Dark Theme?</label>
 			<input id="dark-theme-toggle" v-model="darkTheme" type="checkbox" @change="toggleDarkTheme" />
 		</div>
-		<div v-if="yuu.hasThemes && !yuu.disableThemeIgnore" class="force-theme-options toggle-option">
-			<label for="force-theme-toggle">Ignore Forced Themes?</label>
-			<input id="force-theme-toggle" v-model="ignoreForcedThemes" type="checkbox" @change="toggleForcedThemes" />
-		</div>
 	</div>
 </template>

 <script>
-import yuuConfig from './yuuConfig.js';
-import themeHandler from './themeHandler.js';
+import recoConfig from './recoConfig.js';

 export default {
 	name: 'ThemeOptions',

-	mixins: [yuuConfig, themeHandler],
+	mixins: [recoConfig],

 	data() {
 		return {
-			darkTheme: false,
-			ignoreForcedThemes: false,
+			darkTheme: 'false'
 		};
 	},

 	mounted() {
-		if (this.yuu.disableDarkTheme !== true) {
-			this.darkTheme = localStorage.getItem('dark-theme') === 'true';
-			this.toggleDarkTheme();
-		}
+		const theme = localStorage.getItem('reco-theme')
+		const night = localStorage.getItem('reco-night')
+		const classes = document.body.classList;

-		if (this.yuu.disableThemeIgnore !== true) {
-			this.ignoreForcedThemes = localStorage.getItem('ignore-forced-themes') === 'true';
-		}
+		this.darkTheme = night === 'true' ? true : false
+		if (night === 'true') classes.add(`reco-theme-night`)
+		if (theme) this.setTheme(theme)
 	},

 	methods: {
 		toggleDarkTheme() {
+			console.log(123, this.darkTheme)
+			localStorage.setItem('reco-night', this.darkTheme)
+			console.log(456, localStorage.getItem('reco-night'))
+			const classes = document.body.classList;
 			if (this.darkTheme) {
-				document.body.classList.add('yuu-theme-dark');
-				return localStorage.setItem('dark-theme', true);
+				const oldColor = [...classes]
+				classes.value = ''
+				classes.add(`reco-theme-night`)
+				oldColor.forEach(item => {
+					classes.add(item)
+				})
+			}	
+			else {
+				classes.remove(`reco-theme-night`)
+			}	
+		},
+		setTheme(theme, moveClass = true) {
+			const colorThemes = this.reco.themes;
+
+			const classes = document.body.classList;
+			const themes = colorThemes.map(colorTheme => `reco-theme-${colorTheme}`);
+
+			if (!theme) {
+				if (moveClass) localStorage.removeItem('reco-theme');
+				classes.remove(...themes);
+				return 
 			}

-			document.body.classList.remove('yuu-theme-dark');
-			localStorage.removeItem('dark-theme');
-		},
+			classes.remove(...themes.filter(t => t !== `reco-theme-${theme}`));

-		toggleForcedThemes() {
-			if (this.ignoreForcedThemes) {
-				this.setTheme(localStorage.getItem('color-theme'));
-				return localStorage.setItem('ignore-forced-themes', true);
+			if (moveClass) {
+				classes.add(`reco-theme-${theme}`);
+				localStorage.setItem('reco-theme', theme);
+			} else {
+				localStorage.removeItem('reco-theme')
+				classes.remove(`reco-theme-${theme}`);
+			}
 		}
-
-			localStorage.removeItem('ignore-forced-themes');
-		},
 	},
 };
 </script>

 <style lang="stylus">
-@import '../../styles/config.styl';

 .color-theme-options {
 	display: flex;
 	justify-content: space-around;
-
 	li {
 		width: 33%;
 		text-align: center;
--- a/components/Theme/index.vue
+++ b/components/Theme/index.vue
@ -1,10 +1,10 @@
 <template>
-	<div v-if="showSettings" v-click-outside="hideMenu" class="user-settings">
-		<a class="settings-button" href="#" @click.prevent="showMenu = !showMenu">
-			<CogIcon class="settings-icon" />
+	<div v-if="showSettings" v-click-outside="hideMenu" class="color-picker">
+		<a class="color-button" href="#" @click.prevent="showMenu = !showMenu">
+			<i class="iconfont reco-color"></i>
 		</a>
 		<transition name="menu-transition" mode="out-in">
-			<div v-show="showMenu" class="user-settings-menu">
+			<div v-show="showMenu" class="color-picker-menu">
 				<ThemeOptions />
 			</div>
 		</transition>
@ -14,8 +14,7 @@
 <script>
 import ClickOutside from 'vue-click-outside';
 import ThemeOptions from './ThemeOptions.vue';
-import CogIcon from './CogIcon.vue';
-import yuuConfig from './yuuConfig.js';
+import recoConfig from './recoConfig.js';

 export default {
 	name: 'UserSettings',
@ -25,11 +24,10 @@ export default {
 	},

 	components: {
-		CogIcon,
-		ThemeOptions,
+		ThemeOptions
 	},

-	mixins: [yuuConfig],
+	mixins: [recoConfig],

 	data() {
 		return {
@ -39,8 +37,8 @@ export default {

 	computed: {
 		showSettings() {
-			const { yuu } = this;
-			return yuu.hasThemes || yuu.disableDarkTheme !== true || yuu.disableThemeIgnore !== true;
+			const { reco } = this;
+			return reco.hasThemes || reco.disableDarkTheme !== true || reco.disableThemeIgnore !== true;
 		},
 	},

@ -53,24 +51,26 @@ export default {
 </script>

 <style lang="stylus">
-@import '../../styles/config.styl';

-.user-settings {
+.color-picker {
 	position: relative;
 	margin-right: 1em;

-	.settings-button {
+	.color-button {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		height: 100%;
-
+		.iconfont {
+			font-size 1.4rem
+			color: $accentColor
+		}
 		.settings-icon {
 			width: 18px;
 		}
 	}

-	.user-settings-menu {
+	.color-picker-menu {
 		background-color: #fff;
 		position: absolute;
 		top: 40px;
@ -113,8 +113,8 @@ export default {
 	}
 }

-.yuu-theme-dark {
-	.user-settings-menu {
+.reco-theme-dark {
+	.color-picker-menu {
 		background-color: $darkPrimaryBg;
 		border-color: $darkBorderColor;

@ -125,10 +125,10 @@ export default {
 }

@media (max-width: $MQMobile) {
-	.user-settings {
+	.color-picker {
 		margin-right: 0;

-		.user-settings-menu {
+		.color-picker-menu {
 			left: calc(50% - 35px);

 			&::before {
--- a/components/Theme/recoConfig.js
+++ b/components/Theme/recoConfig.js
@ -0,0 +1,22 @@
+export default {
+	data() {
+		return {
+			reco: {},
+			colors: {
+				blue: '#2196f3',
+				red: '#f26d6d',
+				green: '#3eaf7c',
+				orange: '#fb9b5f'
+			}
+		};
+	},
+
+	mounted() {
+		this.reco = {
+			themes: ['blue', 'red', 'green', 'orange'],
+			disableDarkTheme: false
+		};
+
+		this.reco.hasThemes = this.$site.themeConfig.themePicker || true
+	},
+};
--- a/components/Theme/themeHandler.js
+++ b/components/Theme/themeHandler.js
@ -1,46 +0,0 @@
-export default {
-	mounted() {
-		this.setPageTheme();
-	},
-
-	beforeUpdate() {
-		this.setPageTheme();
-	},
-
-	methods: {
-		setTheme(theme, persist = true) {
-			const colorThemes = this.yuu.themes || {};
-
-			if (!Array.isArray(colorThemes) || !colorThemes.length) return;
-
-			const classes = document.body.classList;
-			const themes = colorThemes.map(colorTheme => `yuu-theme-${colorTheme}`);
-
-			if (!theme) {
-				if (persist) localStorage.removeItem('color-theme');
-				return classes.remove(...themes);
-			}
-
-			if (theme && !colorThemes.includes(theme)) {
-				const oldTheme = localStorage.getItem('color-theme');
-				return this.setTheme(colorThemes.includes(oldTheme) ? oldTheme : null);
-			}
-
-			classes.remove(...themes.filter(t => t !== `yuu-theme-${theme}`));
-			classes.add(`yuu-theme-${theme}`);
-
-			if (persist) {
-				localStorage.setItem('color-theme', theme);
-			}
-		},
-
-		setPageTheme() {
-			if (this.yuu.disableThemeIgnore !== true && localStorage.getItem('ignore-forced-themes') === 'true') {
-				return;
-			}
-
-			const theme = this.$page.frontmatter.forceTheme || localStorage.getItem('color-theme');
-			this.setTheme(theme, false);
-		},
-	},
-};
--- a/components/Theme/yuuConfig.js
+++ b/components/Theme/yuuConfig.js
@ -1,19 +0,0 @@
-export default {
-	data() {
-		return {
-			yuu: {},
-		};
-	},
-
-	mounted() {
-		const { yuu = {} } = this.$site.themeConfig;
-
-		this.yuu = {
-			themes: yuu.colorThemes || ['blue', 'red'],
-			disableDarkTheme: yuu.disableDarkTheme || false,
-			disableThemeIgnore: yuu.disableThemeIgnore || false,
-		};
-
-		this.yuu.hasThemes = Array.isArray(this.yuu.themes) && this.yuu.themes.length > 0;
-	},
-};
--- a/fonts/iconfont.css
+++ b/fonts/iconfont.css
@ -1,10 +1,10 @@
@font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1548606483811'); /* IE9 */
-  src: url('iconfont.eot?t=1548606483811#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1548606483811') format('woff'),
-  url('iconfont.ttf?t=1548606483811') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1548606483811#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1555230336940'); /* IE9 */
+  src: url('iconfont.eot?t=1555230336940#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1555230336940') format('woff'),
+  url('iconfont.ttf?t=1555230336940') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1555230336940#iconfont') format('svg'); /* iOS 4.1- */
 }

 .iconfont {
@ -15,6 +15,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.reco-color:before {
+  content: "\eae9";
+}
+
 .reco-message:before {
  content: "\e634";
 }
--- a/fonts/iconfont.eot
+++ b/fonts/iconfont.eot
--- a/fonts/iconfont.svg
+++ b/fonts/iconfont.svg
@ -20,6 +20,9 @@ Created by iconfont
  />
    <missing-glyph />
    
+    <glyph glyph-name="color" unicode="&#60137;" d="M778.22179555 384q29.56401778 0 51.21517 20.48606777t21.60260778 52.33171001-21.60260778 52.33171001-51.21517 20.48606776-51.21516998-20.48606776-21.60260779-52.33171001 21.60260779-52.33171001 51.21516998-20.48606777zM632.58624 577.40401778q29.56401778 0 51.21516999 21.60260779t21.60260779 51.21516998-21.60260779 51.21517-51.21516999 21.60260778-51.21516999-21.60260778-21.60260779-51.21517 21.60260779-51.21516998 51.21516999-21.60260779zM391.41376 577.40401778q29.56401778 0 51.21516999 21.60260779t21.60260779 51.21516998-21.60260779 51.21517-51.21516999 21.60260778-51.21516999-21.60260778-21.60260779-51.21517 21.60260779-51.21516998 51.21516999-21.60260779zM245.77820445 384q29.56401778 0 51.21516998 20.48606777t21.60260779 52.33171001-21.60260779 52.33171001-51.21516998 20.48606776-51.21517-20.48606776-21.60260778-52.33171001 21.60260778-52.33171001 51.21517-20.48606777zM512 820.90666667q179.76282112 0 308.35901667-113.78991446t128.54765-275.34828999q0-100.14871666-71.7012389-170.68487111t-171.80140999-70.53615445l-84.17735111 0q-31.8456411 0-52.33171001-21.60260779t-20.48606777-51.21516999q0-25.04931555 18.20444444-47.76846222t18.20444445-50.05008555q0-31.8456411-20.48606777-52.33171001t-52.33171001-20.48606777q-182.04444445 0-309.47555555 127.43111112t-127.43111112 309.47555555 127.43111112 309.47555555 309.47555555 127.43111112z"  horiz-adv-x="1024" />
+
+    
    <glyph glyph-name="message" unicode="&#58932;" d="M864.227 791.373h-702c-48.988 0-88.732-39.621-88.732-88.487v-519.688c0-48.866 42.607-84.866 91.616-84.866h218.638l122.113-106.65 122.134 106.65h233.366c48.988 0 91.596 36.021 91.596 84.866v519.688c0 48.866-39.763 88.487-88.732 88.487zM685.393 342.72299999999996h-309.702c-17.202 0-31.152 13.95-31.152 31.152s13.95 31.152 31.152 31.152h309.702c17.223 0 31.152-13.95 31.152-31.152s-13.95-31.152-31.152-31.152zM759.029 505.848h-484.343c-17.202 0-31.152 13.95-31.152 31.152 0 17.223 13.95 31.173 31.152 31.173h484.343c17.202 0 31.152-13.95 31.152-31.173 0.021-17.202-13.95-31.152-31.152-31.152z"  horiz-adv-x="1024" />

    
@ -80,7 +83,7 @@ Created by iconfont
    <glyph glyph-name="jianshu" unicode="&#58880;" d="M0 384v-512h1024V896H0v-512z m356.864 331.776c-1.024-6.656-4.096-15.872-6.144-20.48-3.584-8.704 2.048-9.216 78.848-9.216H512v-51.2h-43.52c-24.064 0-43.52-0.512-43.52-1.024 0-1.024 4.608-16.384 10.24-34.816 5.632-18.432 10.24-33.792 10.24-34.304 0-1.024-18.432-1.536-40.448-1.536h-40.448l-3.584 16.896c-9.216 45.056-13.824 54.784-27.136 54.784-7.68 0-21.504-8.192-35.328-20.992-22.016-19.968-71.168-46.592-99.84-53.76-14.336-3.072-14.336-3.072-14.336 22.528 0 23.552 1.024 26.112 19.968 38.4 25.088 16.384 41.984 38.912 59.392 76.8l13.312 29.184h41.472c39.936 0 40.96-0.512 38.4-11.264z m306.688-6.656l-3.584-17.92h179.712v-56.32h-96.768l10.24-29.184c14.848-43.008 15.36-42.496-28.16-42.496h-37.888l-3.584 16.896c-2.048 8.704-6.144 25.088-8.704 35.84-5.12 17.92-7.168 18.944-25.6 18.944-16.384 0-23.552-3.584-41.472-20.992-19.456-18.944-76.288-50.176-104.448-58.368-10.752-3.072-11.776-1.536-11.776 18.944 0 20.992 2.048 24.576 27.648 46.592 25.6 22.016 49.152 59.392 61.44 97.28 2.048 7.168 9.216 8.704 44.544 8.704h41.472l-3.072-17.92z m-317.44-162.304c4.608-8.704 13.824-32.256 20.48-51.2 13.824-41.472 14.336-40.96-36.352-38.912l-34.816 1.536-11.264 35.84c-6.144 19.968-14.848 43.52-19.968 52.736L255.488 563.2h40.96c40.96 0 41.472 0 49.664-16.384z m462.848-225.792c0-200.192-0.512-217.6-9.216-233.984-15.872-28.672-40.448-37.888-103.424-38.4h-53.76l-1.536 29.696-1.536 29.184h33.792c29.184 0 35.328 1.536 46.08 12.8l12.8 12.288V476.16H384V537.6h424.96v-216.576zM291.84 243.2v-202.24h-76.8V445.44h76.8V243.2z m363.52 57.344c0-182.784 4.608-177.664-167.424-177.664H373.76V424.96h281.6v-124.416zM450.56 335.36v-33.28h128V368.64h-128v-33.28zM450.56 215.04v-35.84h55.808c65.024 0 69.12 2.56 69.632 43.008v26.112l-62.464 1.536-62.976 1.536v-36.352z"  horiz-adv-x="1024" />

    
-    <glyph glyph-name="theme" unicode="&#59368;" d="M949.6 535.4s-0.1 0-0.1 0.1L755.1 729.4c-15.6 25.3-43.4 42.4-75.4 42.4h-55.5c-16.2 0-29.7-11.6-32.7-27l-0.6-0.9v1.2c-0.8-2-2-3.9-3.4-5.9-9.4-32.3-38.9-56-74.3-56-31 0-57.6 18.3-70.1 44.5l-0.4 0.3c-0.1 0.4-0.3 0.8-0.4 1.2-0.9 2-1.5 4.1-2.3 6.2-1.4 3.6-3 7.1-4.6 10.6v-5.3h-0.2c-0.2 3.6-1 7.1-2.2 10.3-0.7 1.5-1.5 3-2.3 4.5-5.8 9.8-16.3 16.4-28.5 16.4-2 0-3.9-0.3-5.9-0.7-1 0.5-2.1 0.7-3.2 0.7-0.7 0-1.4-0.2-2.1-0.4v0.4h-44.4c-28.9 0-54.3-14-70.6-35.3l-201.4-201s-0.1 0-0.1-0.1c-13-13-13-34 0-47l141.3-141c11.5-11.5 28.9-12.2 41.9-3.4v-325.6h2.2c4.6-12.9 16.6-22.2 31.1-22.2h444.2c14.5 0 26.5 9.3 31.1 22.2h2.2v324c12.7-7.2 28.9-5.9 39.7 4.9l141.3 141c13.1 13 13.1 34 0.1 47z"  horiz-adv-x="1024" />
+    <glyph glyph-name="theme" unicode="&#59368;" d="M978.77333333 545.49333333s-0.10666667 0-0.10666666 0.10666667L771.30666667 752.42666667c-16.64 26.98666667-46.29333333 45.22666667-80.42666667 45.22666666h-59.2c-17.28 0-31.68-12.37333333-34.88-28.8l-0.64-0.96v1.28c-0.85333333-2.13333333-2.13333333-4.16-3.62666667-6.29333333-10.02666667-34.45333333-41.49333333-59.73333333-79.25333333-59.73333333-33.06666667 0-61.44 19.52-74.77333333 47.46666666l-0.42666667 0.32c-0.10666667 0.42666667-0.32 0.85333333-0.42666667 1.28-0.96 2.13333333-1.6 4.37333333-2.45333333 6.61333334-1.49333333 3.84-3.2 7.57333333-4.90666667 11.30666666v-5.65333333h-0.21333333c-0.21333333 3.84-1.06666667 7.57333333-2.34666667 10.98666667-0.74666667 1.6-1.6 3.2-2.45333333 4.8-6.18666667 10.45333333-17.38666667 17.49333333-30.4 17.49333333-2.13333333 0-4.16-0.32-6.29333333-0.74666667-1.06666667 0.53333333-2.24 0.74666667-3.41333334 0.74666667-0.74666667 0-1.49333333-0.21333333-2.24-0.42666667v0.42666667h-47.36c-30.82666667 0-57.92-14.93333333-75.30666666-37.65333333l-214.82666667-214.4s-0.10666667 0-0.10666667-0.10666667c-13.86666667-13.86666667-13.86666667-36.26666667 0-50.13333333l150.72-150.4c12.26666667-12.26666667 30.82666667-13.01333333 44.69333334-3.62666667v-347.30666667h2.34666666c4.90666667-13.76 17.70666667-23.68 33.17333334-23.68h473.81333333c15.46666667 0 28.26666667 9.92 33.17333333 23.68h2.34666667v345.6c13.54666667-7.68 30.82666667-6.29333333 42.34666667 5.22666667l150.72 150.4c13.97333333 13.86666667 13.97333333 36.26666667 0.10666666 50.13333333z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="three" unicode="&#58948;" d="M861.798876 266.798732C835.998959 320.998557 830.598976 331.29852400000004 806.999052 385.398351c-12.59996 28.799907-38.399877 46.79985-61.899801 52.69983l62.499799 294.499054c9.29997 43.899859-18.299941 86.99972-61.699801 96.39969-43.399861 9.39997-86.099723-18.59994-95.399694-62.499799l-58.099813-273.79912-3.699988 322.598963C587.999756 860.296825 551.599873 896.396709 507.200015 895.99671c-44.499857-0.299999-79.999743-36.999881-79.499744-81.799737l3.499989-304.299022-66.199788 248.999199c-11.499963 43.299861-55.599821 68.999778-98.499683 57.399816-42.899862-11.599963-68.299781-56.199819-56.799818-99.49968L295.000697 395.898317c-62.899798-21.69993-92.899702-43.899859-103.399668-72.899766l-37.999878-108.399652c-8.499973-23.399925 3.19999-75.299758 11.499964-98.799682 39.699872-112.799638 86.399722-187.699397 114.499632-226.699272 4.899984-6.799978 9.099971-12.29996 12.799959-16.899946H760.9992c1.699995 3.09999 3.19999 6.29998 4.499986 9.699969l94.999694 256.299177c22.099929 52.099833 10.799965 108.499651 1.299996 128.599587z"  horiz-adv-x="1024" />
--- a/fonts/iconfont.ttf
+++ b/fonts/iconfont.ttf
--- a/fonts/iconfont.woff
+++ b/fonts/iconfont.woff
--- a/fonts/iconfont.woff2
+++ b/fonts/iconfont.woff2
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vuepress-theme-reco",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.12",
  "description": "this is a vuepress theme",
  "main": "index.js",
  "scripts": {
--- a/styles/colorMode/colorMixin.styl
+++ b/styles/colorMode/colorMixin.styl
@ -0,0 +1,55 @@
+color-mode(accountColor , colorName)
+  .reco-theme-{colorName}
+    input
+      color accountColor!important; 
+    .search-box input
+      border-color: accountColor!important; 
+      &:focus
+        border-color: accountColor!important; 
+    .navbar
+      box-shadow: 0 1px 6px 0 rgba(32,33,36,.28)
+      .nav-links a:hover, 
+      .nav-links a.router-link-active,
+      .nav-links a:hover .iconfont, 
+      .nav-links a.router-link-active .iconfont
+        color accountColor!important; 
+    .home 
+      .hero 
+        .description
+          color accountColor!important; 
+        .action-button, img
+          background-color accountColor!important; 
+          color: #fff!important
+      .features  
+        .feature
+          h2, p
+            color accountColor!important; 
+      .footer 
+        a 
+          color accountColor!important;    
+    .abstract-wrapper .abstract-item .title 
+      a
+        color accountColor!important; 
+      a:after
+        background-color accountColor!important; 
+    .back-to-ceiling i
+      color accountColor!important;  
+    .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
+      border-left: 5px solid accountColor!important; 
+    .tags 
+      .tag-item.active, .tag-item:hover
+        color accountColor!important;   
+    .timeline-wrapper .year-wrapper li:hover 
+      .title
+        color accountColor!important; 
+      .date::before
+        background: accountColor!important; 
+      .date
+        color accountColor!important;    
+    @media (min-width: 765px)
+      .nav-item > a:not(.external):hover, 
+      .nav-item > a:not(.external).router-link-active
+        border-color: accountColor!important; 
+    @media (max-width: 959px)
+      .search-box input
+        border-color: transparent!important; 
--- a/styles/colorMode/colorMode.styl
+++ b/styles/colorMode/colorMode.styl
@ -0,0 +1,17 @@
+@require './colorMixin.styl'
+
+$fc-red = #f26d6d
+$fc-red-name = 'red'
+color-mode($fc-red, $fc-red-name)
+
+$fc-blue = #2196f3
+$fc-blue-name = 'blue'
+color-mode($fc-blue, $fc-blue-name)
+
+$fc-green = #3eaf7c
+$fc-green-name = 'green'
+color-mode($fc-green, $fc-green-name)
+
+$fc-orange = #fb9b5f
+$fc-orange-name = 'orange'
+color-mode($fc-orange, $fc-orange-name)
--- a/styles/colorMode/index.styl
+++ b/styles/colorMode/index.styl
@ -0,0 +1,2 @@
+@require './nightMode.styl'
+@require './colorMode.styl'
--- a/styles/colorMode/nightMode.styl
+++ b/styles/colorMode/nightMode.styl
@ -17,7 +17,7 @@ fc-active() {
  color: $fcActive!important
 }

-.night-mode
+.reco-theme-night
  bc()
  fc()
  bdc()
@ -27,11 +27,14 @@ fc-active() {
  input
    bc()
    fc()
+  .search-box input
+    bdc()
+    &:focus
      bdc()
  .navbar
    bc()
    box-shadow: 0 2px 20px 0 rgba(255,255,255,0.4);
-    // border-bottom: 1px solid $bdc
+    border-bottom: 1px solid $bdc
    .site-name, .links
      bc()
      fc()
@ -40,13 +43,23 @@ fc-active() {
  .nav-links a:hover .iconfont, 
  .nav-links a.router-link-active .iconfont
    fc-active()
+  .tags .tag-item:hover 
+    fc-active()  
  @media (min-width: 765px)
    .nav-item > a:not(.external):hover, 
    .nav-item > a:not(.external).router-link-active
-      border-bottom: 2px solid $fcActive;
+      border-color: $fcActive;
    .dropdown-wrapper .nav-dropdown
      bc()
      box-shadow: 0 2px 20px 0 rgba(255,255,255,0.4);
+      border: 1px solid $bdc
+  @media (min-width: 719px)
+    .nav-item > a:not(.external):hover,
+    .nav-item > a:not(.external).router-link-active
+      border-bottom: 2px solid $fcActive!important;
+  @media (max-width: 959px)
+    .search-box input
+      border-color: transparent!important;
  .home 
    .hero 
      .description
@ -84,5 +97,18 @@ fc-active() {
      background: $fc   
    .year-wrapper li
      bdc()
-  .back-to-ceiling i
+  .back-to-ceiling
+    background-color: lighten($bc, 15%)!important
+    i
+      fc()
+  .color-picker .color-button .iconfont
+    fc()  
+  .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
+    border-left: 5px solid $fcActive
+  .timeline-wrapper .year-wrapper li:hover 
+    .title
+      fc()
+    .date::before
+      background: $fcActive
+    .date
      fc()    
--- a/styles/theme.styl
+++ b/styles/theme.styl
@ -4,19 +4,19 @@
@require './arrow'
@require './wrapper'
@require './toc'
+@require './colorMode/index'
@require '../fonts/iconfont.css'

 html, body
  padding 0
  margin 0
-  background-color #fff
-
 body
  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 16px
  color $textColor
+  background-color #fff

 .page
  padding-left $sidebarWidth