change: custom themePicker

components/Navbar.vue

@@ -21,7 +21,7 @@
       :style="linksWrapMaxWidth ? {
         'max-width': linksWrapMaxWidth + 'px'
       } : {}">
-      <Theme />
+      <Theme v-if="hasThemes" />
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
         :options="algolia"/>
@@ -43,13 +43,15 @@ export default {
 
   data () {
     return {
-      linksWrapMaxWidth: null
+      linksWrapMaxWidth: null,
+      hasThemes: false
     }
   },
 
   mounted () {
     const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
     const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
+    const { themePicker } = this.$themeConfig
     const handleLinksWrapWidth = () => {
       if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
         this.linksWrapMaxWidth = null
@@ -60,6 +62,9 @@ export default {
     }
     handleLinksWrapWidth()
     window.addEventListener('resize', handleLinksWrapWidth, false)
+    console.log(234, themePicker)
+    this.hasThemes = themePicker === undefined ? true : themePicker
+    console.log(234, this.hasThemes)
   },
 
   computed: {

components/Theme/ThemeOptions.vue

@@ -1,14 +1,14 @@
 <template>
 	<div class="theme-options">
-		<ul v-if="reco.hasThemes" class="color-theme-options">
+		<ul class="color-theme-options">
 			<li>
 				<a href="#" class="default-theme" @click.prevent="setTheme()"></a>
 			</li>
-			<li v-for="color in reco.themes" :key="color">
-				<a href="#" :class="`${color}-theme`" :style="{background: colors[color]}" @click.prevent="setTheme(color)"></a>
+			<li v-for="(value, key) in themePicker" :key="key">
+				<a href="#" :class="`${key}-theme`" :style="{background: value}" @click.prevent="setTheme(key)"></a>
 			</li>
 		</ul>
-		<div v-if="!reco.disableDarkTheme" class="dark-theme-options toggle-option">
+		<div 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>
@@ -16,19 +16,28 @@
 </template>
 
 <script>
-import recoConfig from './recoConfig.js';
 
 export default {
 	name: 'ThemeOptions',
 
-	mixins: [recoConfig],
-
 	data() {
 		return {
-			darkTheme: 'false'
+			darkTheme: 'false',
+			reco: {}
 		};
 	},
 
+	computed: {
+		themePicker () {
+			return this.$themeConfig.themePicker || {
+				red: '#f26d6d',
+				blue: '#2196f3',
+				green: '#3eaf7c',
+				orange: '#fb9b5f'
+			}
+		}
+	},
+
 	mounted() {
 		const theme = localStorage.getItem('reco-theme')
 		const night = localStorage.getItem('reco-night')
@@ -56,10 +65,9 @@ export default {
 			}	
 		},
 		setTheme(theme, moveClass = true) {
-			const colorThemes = this.reco.themes;
 
 			const classes = document.body.classList;
-			const themes = colorThemes.map(colorTheme => `reco-theme-${colorTheme}`);
+			const themes = Object.keys(this.themePicker).map(colorTheme => `reco-theme-${colorTheme}`);
 
 			if (!theme) {
 				if (moveClass) localStorage.removeItem('reco-theme');
@@ -85,9 +93,9 @@ export default {
 
 .color-theme-options {
 	display: flex;
-	justify-content: space-around;
+	flex-wrap wrap
 	li {
-		width: 33%;
+		width: 20%;
 		text-align: center;
 
 		a {
@@ -99,12 +107,10 @@ export default {
 				background-color: $accentColor;
 			}
 
-			&.blue-theme {
-				background-color: $blueAccentColor;
+			for key, value in $themePicker {
+				&.{key}-theme {
+					background-color: value;
 				}
-
-			&.red-theme {
-				background-color: $redAccentColor;
 			}	
 		}
 	}

components/Theme/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="showSettings" v-click-outside="hideMenu" class="color-picker">
+	<div v-click-outside="hideMenu" class="color-picker">
 		<a class="color-button" @click.prevent="showMenu = !showMenu">
 			<i class="iconfont reco-color"></i>
 		</a>
@@ -14,7 +14,6 @@
 <script>
 import ClickOutside from 'vue-click-outside';
 import ThemeOptions from './ThemeOptions.vue';
-import recoConfig from './recoConfig.js';
 
 export default {
 	name: 'UserSettings',
@@ -27,21 +26,12 @@ export default {
 		ThemeOptions
 	},
 
-	mixins: [recoConfig],
-
 	data() {
 		return {
 			showMenu: false,
 		};
 	},
 
-	computed: {
-		showSettings() {
-			const { reco } = this;
-			return reco.hasThemes || reco.disableDarkTheme !== true || reco.disableThemeIgnore !== true;
-		},
-	},
-
 	methods: {
 		hideMenu() {
 			this.showMenu = false;

components/Theme/recoConfig.js

@@ -1,22 +0,0 @@
-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.$themeConfig.themePicker || true
-	},
-};

styles/colorMode/colorMode.styl

@@ -1,17 +1,6 @@
+@require '../recoConfig.styl'
 @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)
+for key, value in $themePicker
+  color-mode(value, key)

styles/recoConfig.styl

@@ -1,3 +1,10 @@
 // colors
 $accentColor = #424242
 $textColor = #232321
+
+$themePicker = {
+  red: #f26d6d,
+  blue: #2196f3,
+  green: #3eaf7c,
+  orange: #fb9b5f
+}