feat: add dark mode(part.3)

1. move SearchBox.vue to local
2. general adaptation work

Author: reco_luan

components/AlgoliaSearchBox.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@require '../styles/recoConfig.styl'
+@require '../styles/mode.styl'
 .algolia-search-wrapper
   & > span
     vertical-align middle

components/DropdownLink.vue

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@require '../styles/recoConfig.styl'
+@require '../styles/mode.styl'
 
 .dropdown-wrapper
   cursor pointer

components/FriendLink.vue

@@ -113,7 +113,7 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-@require '../styles/recoConfig.styl'
+@require '../styles/mode.styl'
 
 .friend-link-wrapper
   position relative

components/Home.vue

@@ -67,7 +67,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@require '../styles/recoConfig.styl'
+@require '../styles/mode.styl'
 @require '../styles/loadMixin.styl'
 
 .home {

components/HomeBlog.vue

@@ -141,8 +141,8 @@ export default {
 </script>
 
 <style lang="stylus">
-@require '../styles/recoConfig.styl'
-@require '../styles/loadMixin.styl'
+// @require '../styles/mode.styl'
+// @require '../styles/loadMixin.styl'
 
 .home-blog {
   padding: $navbarHeight 0 0;

components/Mode/ModeOptions.vue

@@ -61,7 +61,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@require '../../styles/recoConfig.styl'
+@require '../../styles/mode.styl'
 
 .mode-options
   background-color var(--background-color)

components/Mode/index.vue

@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@require '../../styles/recoConfig.styl'
+@require '../../styles/mode.styl'
 
 .color-picker {
 	position: relative;

components/Mode/modeOptions.js

@@ -4,7 +4,7 @@ const modeOptions = {
     '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, 0.2)',
     '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
     '--text-color': '#2c3e50',
-    '--border-color': '#cfd4db'
+    '--border-color': '#eaecef'
   },
   dark: {
     '--background-color': '#25272a',

components/Mode/setMode.js

@@ -1,7 +1,6 @@
 import modeOptions from './modeOptions'
 
 export function activateMode (mode) {
-  console.log(mode)
   const rootElement = document.querySelector(':root')
   const options = modeOptions[mode]
 
@@ -10,29 +9,6 @@ export function activateMode (mode) {
   }
 }
 
-export function activateDarkMode () {
-  const rootElement = document.querySelector(':root')
-  const darkTheme = {
-    '--background-color': '#25272a',
-    '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, .9)',
-    '--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)'
-  }
-  for (const k in darkTheme) {
-    rootElement.style.setProperty(k, darkTheme[k])
-  }
-}
-
-export function activateLightMode () {
-  const rootElement = document.querySelector(':root')
-  const lightTheme = {
-    '--background-color': '#fff',
-    '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, 0.2)',
-    '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)'
-  }
-  for (const k in lightTheme) {
-    rootElement.style.setProperty(k, lightTheme[k])
-  }
-}
 /**
  * Sets a color scheme for the website.
  * If browser supports "prefers-color-scheme" it will respect the setting for light or dark mode

components/Navbar.vue

@@ -84,7 +84,7 @@ function css (el, property) {
 </script>
 
 <style lang="stylus">
-@require '../styles/recoConfig.styl'
+@require '../styles/mode.styl'
 
 $navbar-vertical-padding = 0.7rem
 $navbar-horizontal-padding = 1.5rem