🎨 Implement proper color scheme context + fix color switcher

README.md

@@ -51,7 +51,7 @@ Tags will be separated with a comma, before it was separated with a space.
 stay up to date https://trello.com/b/l4zH3Ne2/menudocs-written-guide
 
 - [x] Remove Auto or actually make it work.
-- [ ] Accent colours.
+- [x] Accent colours.
 - [ ] Stripping Unnecessary code back.
 - [ ] Removal of loading pacman.
 - [ ] Improve Colours on Categories and Tags.

accents.json

@@ -0,0 +1,6 @@
+{
+ "red": "#de3636",
+ "blue": "#2196f3",
+ "purple": "#a846eb",
+ "green": "#2ecc71"
+}

components/Mode/ModePicker.vue

@@ -1,11 +1,12 @@
 <template>
  <div class="mode-options">
- <h4 class="title">Choose Colour (WIP)</h4>
+ <h4 class="title">Choose Colour</h4>
  <ul class="color-accent-options">
  <li
  v-for="(color, index) in accentColors"
  :key="index"
  :class="getClass(color.color, 'color')"
+ :style="cssVars"
  @click="selectColor(color.color)"
  >{{ color.title }}</li>
  </ul>
@@ -16,6 +17,7 @@
  v-for="(mode, index) in modeOptions"
  :key="index"
  :class="getClass(mode.mode, 'mode')"
+ :style="cssVars"
  @click="selectMode(mode.mode)"
  >{{ mode.title }}</li>
  </ul>
@@ -24,13 +26,14 @@
 
 <script>
 import applyMode from './applyMode'
+import accents from '../../accents.json'
 
 export default {
  name: 'ModeOptions',
 
  data () {
  return {
- accentColors: [ 
+ accentColors: [
  { color: "red", title: "Red" },
  { color: "blue", title: "Blue" },
  { color: "green", title: "Green" },
@@ -41,14 +44,21 @@ export default {
  { mode: 'auto', title: 'Auto' },
  { mode: 'light', title: 'Light' }
  ],
- currentColor: null,
+ currentColor: 'blue',
  currentMode: 'auto'
  }
  },
-
+ computed: {
+ cssVars() {
+ return {
+ '--accent-color': accents[this.currentColor]
+ }
+ }
+ },
  mounted () {
  // modePicker 开启时默认使用用户主动设置的模式
  this.currentMode = localStorage.getItem('mode') || this.$themeConfig.mode || 'auto'
+ this.currentColor = localStorage.getItem('accent-color') || 'blue'
 
  // Dark and Light autoswitches
  // 为了避免在 server-side 被执行，故在 Vue 组件中设置监听器
@@ -123,7 +133,7 @@ export default {
  background-color: $accentColor;
  color #fff
  &.active
- background-color: $accentColor;
+ background-color: var(--accent-color);
  color #fff
  &:not(.mode)
  border-right 1px solid #666
@@ -150,7 +160,7 @@ export default {
  background-color: $accentColor;
  color #fff
  &.active
- background-color: $accentColor;
+ background-color: var(--accent-color);
  color #fff
  &:not(.color)
  border-right 1px solid #666

styles/themes/green.styl

@@ -144,4 +144,16 @@
  .sw-update-popup {
  border-color: $greenAccentColor;
  }
+
+ .md-logo {
+ fill: $greenAccentColor;
+ }
+}
+
+.reco-theme-green::-webkit-scrollbar-thumb:vertical {
+ background-color: $greenAccentColor;
+}
+
+.reco-theme-green::-webkit-scrollbar-thumb:horizontal {
+ background-color: $greenAccentColor;
 }

styles/themes/purple.styl

@@ -1,6 +1,7 @@
 @import '../variables.styl';
 
 .reco-theme-purple {
+
  a,
  p a code,
  .theme-default-content a code {
@@ -144,4 +145,16 @@
  .sw-update-popup {
  border-color: $purpleAccentColor;
  }
+
+ .md-logo {
+ fill: $purpleAccentColor;
+ }
+}
+
+.reco-theme-purple::-webkit-scrollbar-thumb:vertical {
+ background-color: $purpleAccentColor;
+}
+
+.reco-theme-purple::-webkit-scrollbar-thumb:horizontal {
+ background-color: $purpleAccentColor;
 }

styles/themes/red.styl

@@ -144,4 +144,16 @@
  .sw-update-popup {
  border-color: $redAccentColor;
  }
-}
+
+ .md-logo {
+ fill: $redAccentColor;
+ }
+}
+
+.reco-theme-red::-webkit-scrollbar-thumb:vertical {
+ background-color: $redAccentColor;
+}
+
+.reco-theme-red::-webkit-scrollbar-thumb:horizontal {
+ background-color: $redAccentColor;
+}

styles/variables.styl

@@ -1,3 +1,6 @@
+// accents.json
+accents = json('../accents.json', { hash: true });
+
 // overwrites
 $contentWidth = 920px;
 
@@ -11,16 +14,16 @@ $darkBorderColor = alpha(#fff, 0.1);
 $purple = #dd6efd;
 
 // red theme colors
-$redAccentColor = #de3636;
+$redAccentColor = accents.red;
 
 // blue theme colors
-$blueAccentColor = #2196f3;
+$blueAccentColor = accents.blue;
 
 // purple theme colors
-$purpleAccentColor = #a846eb;
+$purpleAccentColor = accents.purple;
 
 // green theme colors
-$greenAccentColor = #2ecc71;
+$greenAccentColor = accents.green;
 
 // content block colors
 $tipGreen = #42b983;