Merge pull request #2 from MenuDocs/patch/theme-colors

README.md

@@ -52,8 +52,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.
 - [ ] Fix the broken tags system

accents.json

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

components/Common.vue

@@ -78,11 +78,12 @@ import { resolveSidebarItems } from '@theme/helpers/utils'
 import Password from '@theme/components/Password'
 import { setTimeout } from 'timers'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
+import LoadingPage from "@theme/components/LoadingPage";
 
 export default {
  mixins: [moduleTransitonMixin],
 
- components: { Sidebar, Navbar, Password },
+ components: { Sidebar, Navbar, Password, LoadingPage },
 
  props: {
  sidebar: {

components/Home.vue

@@ -2,11 +2,7 @@
  <div class="home">
  <div class="hero">
  <ModuleTransition>
- <img
- v-if="recoShowModule && $frontmatter.heroImage"
- :style="heroImageStyle || {}"
- :src="$withBase($frontmatter.heroImage)"
- alt="hero">
+ <Logo :style="heroImageStyle || {}" />
  </ModuleTransition>
  <ModuleTransition delay="0.04">
  <h1 v-if="recoShowModule && $frontmatter.heroText !== null">{{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}</h1>
@@ -41,10 +37,11 @@
 import NavLink from '@theme/components/NavLink'
 import ModuleTransition from '@theme/components/ModuleTransition'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
+import Logo from './Logo'
 
 export default {
  mixins: [moduleTransitonMixin],
- components: { NavLink, ModuleTransition },
+ components: { NavLink, ModuleTransition, Logo },
  computed: {
 
  actionLink () {
@@ -107,7 +104,7 @@ export default {
  }
 
  .features {
- border-top: 1px solid var(--border-color);;
+ border-top: 1px solid var(--border-color);
  padding: 1.2rem 0;
  margin-top: 2.5rem;
  display: flex;

components/LoadingPage.vue

@@ -0,0 +1,115 @@
+<template>
+ <div id="loader-wrapper" :style="color">
+<!-- <h1>HELLO WORLDDDDDD</h1>-->
+ <div class="loader-main" :style="color">
+ <div v-for="item in 4" :key="`out${item}`" :style="color">
+ </div>
+ </div>
+ <h3 class="title" v-if="$frontmatter.home">{{$site.title || this.$themeConfig.title}}</h3>
+ <p class="description" v-if="$frontmatter.home">{{$site.description || this.$themeConfig.description}}</p>
+ </div>
+</template>
+
+<script>
+import accents from '../accents.json'
+
+export default {
+ name: "LoadingPage",
+ data () {
+ return {
+ currentColor: 'blue'
+ }
+ },
+ computed: {
+ color() {
+ return {
+ '--accent-color': accents[this.currentColor]
+ }
+ }
+ },
+ mounted () {
+ this.currentColor = localStorage.getItem('accent-color') || 'blue'
+ }
+}
+</script>
+
+<style lang="stylus" scoped>
+#loader-wrapper
+ height:100vh;
+ width:100vw;
+ background #fff
+ background var(--background-color)
+ .loader-main
+ position:fixed;
+ width:120px;
+ height:50px;
+ top:45%;
+ left:50%;
+ z-index:555;
+ transform:translate(-50%,0);
+ div
+ &:nth-child(2){ animation:pacman-balls 1s 0s infinite linear; }
+ &:nth-child(3){ animation:pacman-balls 1s 0.33s infinite linear; }
+ &:nth-child(4){ animation:pacman-balls 1s 0.66s infinite linear; }
+ &:nth-child(5){ animation:pacman-balls 1s 0.99s infinite linear; }
+ &:first-of-type
+ width:0px;
+ height:0px;
+ border-right:25px solid transparent;
+ border-top:25px solid var(--accent-color);
+ border-left:25px solid var(--accent-color);
+ border-bottom:25px solid var(--accent-color);
+ border-radius:25px;
+ animation:rotate_pacman_half_up 0.5s 0s infinite;
+ &:nth-child(2)
+ width:0px;
+ height:0px;
+ border-right:25px solid transparent;
+ border-top:25px solid var(--accent-color);
+ border-left:25px solid var(--accent-color);
+ border-bottom:25px solid var(--accent-color);
+ border-radius:25px;
+ animation:rotate_pacman_half_down 0.5s 0s infinite;
+ margin-top:-50px;
+ &:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6)
+ background-color: var(--accent-color);
+ width:15px;
+ height:15px;
+ border-radius:100%;
+ margin:2px;
+ width:10px;
+ height:10px;
+ position:absolute;
+ transform:translate(0,-6.25px);
+ top:25px;
+ left:100px;
+ .title
+ margin 8rem auto 2rem
+ text-align center
+ color $textColor
+ color var(--text-color)
+ font-size 30px
+ box-sizing: border-box;
+ padding: 0 10px;
+ text-shadow 0 2px 10px rgba(0,0,0,0.2)
+ .description
+ margin auto
+ text-align center
+ color $textColor
+ color var(--text-color)
+ font-size 22px
+ box-sizing: border-box;
+ padding: 0 10px;
+ text-shadow 0 2px 10px rgba(0,0,0,0.2);
+ @keyframes pacman-balls
+ 75%{opacity:0.7;}
+ 100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
+ @keyframes rotate_pacman_half_up
+ 0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
+ 50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
+ 100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
+ @keyframes rotate_pacman_half_down
+ 0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
+ 50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
+ 100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
+</style>

components/Logo.vue

@@ -0,0 +1,17 @@
+<template>
+ <svg xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 841.01 366.63">
+ <defs><style>.md-logo{}</style></defs>
+ <g id="Layer_2" data-name="Layer 2">
+ <g id="Layer_3" data-name="Layer 3">
+ <polygon class="md-logo" points="308.91 151.33 146.9 366.63 0 366.63 278.86 0 419.89 65.38 574.88 3.63 683.62 3.69 596.05 120.07 410.64 194.25 308.91 151.33"/>
+ <path class="md-logo" d="M809.38,249.88,766.2,306.42a154.13,154.13,0,0,1-121.77,60.21H212.31l88.45-115.89H644.43a37.57,37.57,0,0,0,29.67-14.66l43.16-56.54c8.94-11.7,10.32-26,3.79-39.19s-18.72-20.77-33.45-20.77H661.82L742.26,14.2a156.5,156.5,0,0,1,30.87,16.06,151.86,151.86,0,0,1,57.35,71.27C850,151.58,842.09,207,809.38,249.88Z"/>
+ </g>
+ </g>
+ </svg>
+</template>
+
+<script>
+export default {
+ name: 'Logo'
+}
+</script>

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

components/Mode/applyMode.js

@@ -22,6 +22,7 @@ export default function applyMode (mode) {
 
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
  const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+ const noThemeMediaQueries = !isDarkMode && !isLightMode
 
  if (isDarkMode) render('dark')
  if (isLightMode) render('light')
@@ -30,7 +31,9 @@ export default function applyMode (mode) {
  * 6 AM - 6 PM: Light mode
  * 6 PM - 5 AM: Dark mode
  */
- const hour = new Date().getHours()
- if (hour < 6 || hour >= 18) render('dark')
- else render('light')
+ if (noThemeMediaQueries) {
+ const hour = new Date().getHours()
+ if (hour < 6 || hour >= 18) render('dark')
+ else render('light')
+ }
 }

components/Navbar.vue

@@ -5,11 +5,7 @@
  <router-link
  :to="$localePath"
  class="home-link">
- <img
- class="logo"
- v-if="$themeConfig.logo"
- :src="$withBase($themeConfig.logo)"
- :alt="$siteTitle">
+ <Logo class="logo" />
  <span
  ref="siteName"
  class="site-name"
@@ -38,9 +34,10 @@ import SearchBox from '@SearchBox'
 import SidebarButton from '@theme/components/SidebarButton'
 import NavLinks from '@theme/components/NavLinks'
 import Mode from '@theme/components/Mode'
+import Logo from './Logo'
 
 export default {
- components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Mode },
+ components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Mode, Logo },
 
  data () {
  return {
@@ -96,11 +93,10 @@ $navbar-horizontal-padding = 1.5rem
  a, span, img
  display inline-block
  .logo
- height $navbarHeight - 1.4rem
+ height: 1.5rem;
  min-width $navbarHeight - 1.4rem
  margin-right 0.8rem
- vertical-align top
- border-radius 50%
+ vertical-align: sub;
  .site-name
  font-size 1.2rem
  font-weight 600

index.js

@@ -20,7 +20,6 @@ module.exports = (options, ctx) => ({
 
  plugins: [
  '@vuepress-reco/back-to-top',
- '@vuepress-reco/loading-page',
  '@vuepress-reco/pagation',
  '@vuepress-reco/comments',
  '@vuepress/active-header-links',

package.json

@@ -32,7 +32,6 @@
  "dependencies": {
  "@vuepress-reco/vuepress-plugin-back-to-top": "^1.4.0",
  "@vuepress-reco/vuepress-plugin-comments": "^1.4.6",
- "@vuepress-reco/vuepress-plugin-loading-page": "^1.4.0",
  "@vuepress-reco/vuepress-plugin-pagation": "^1.4.6",
  "@vuepress/plugin-blog": "1.9.2",
  "@vuepress/plugin-medium-zoom": "1.5.0",

styles/theme.styl

@@ -5,8 +5,10 @@
 @require './wrapper'
 @require './toc'
 @require './iconfont.css'
-// add themes later
+
 @require './themes/red'
+@require './themes/green'
+@require './themes/purple'
 
 html, body
  padding 0
@@ -230,3 +232,8 @@ th, td
  color: #fff;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0)
  border: none;
+
+/************** MD Logo **************/
+.md-logo {
+ fill: $accentColor;
+}