fix colours and colour picker

components/TagList.vue

@@ -4,13 +4,11 @@
  v-for="(item, index) in tags"
  :key="index"
  :class="{'active': item.name == currentTag}"
- :style="{ 'backgroundColor': getOneColor() }"
  @click="tagClick(item)">{{item.name}}</span>
  </div>
 </template>
 
 <script>
-import { getOneColor } from '@theme/helpers/other'
 
 export default {
  props: {
@@ -27,8 +25,7 @@ export default {
  methods: {
  tagClick (tag) {
  this.$emit('getCurrentTag', tag)
- },
- getOneColor
+ }
  }
 }
 </script>

helpers/other.js

@@ -1,16 +1,18 @@
+// remove this later
+
 export function getOneColor () {
  const tagColorArr = [
- '#00CED1',
- '#00BFFF',
- '#4169E1',
- '#FF00FF',
- '#849b87',
- '#e15b64',
- '#f47e60',
+ // '#00CED1',
+ // '#00BFFF',
+ // '#4169E1',
+ // '#FF00FF',
+ // '#849b87',
+ // '#e15b64',
+ // '#f47e60',
  '#f26d6d',
- '#67cc86',
- '#fb9b5f',
- '#3498db'
+ // '#67cc86',
+ // '#fb9b5f',
+ // '#3498db'
  ]
  const index = Math.floor(Math.random() * tagColorArr.length)
  return tagColorArr[index]

layouts/Category.vue

@@ -10,7 +10,7 @@
  :key="index">
  <router-link :to="item.path">
  <span class="category-name">{{ item.name }}</span>
- <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
+ <span class="post-num">{{ item.pages.length }}</span>
  </router-link>
  </li>
  </ul>
@@ -43,7 +43,6 @@ import NoteAbstract from '@theme/components/NoteAbstract'
 import ModuleTransition from '@theme/components/ModuleTransition'
 import pagination from '@theme/mixins/pagination'
 import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
-import { getOneColor } from '@theme/helpers/other'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
@@ -90,8 +89,7 @@ export default {
  this.currentPage = page
  this.$page.currentPage = page
  this._setStoragePage(page)
- },
- getOneColor
+ }
  },
 
  watch: {

styles/theme.styl

@@ -5,6 +5,8 @@
 @require './wrapper'
 @require './toc'
 @require './iconfont.css'
+// add themes later
+@require './themes/red'
 
 html, body
  padding 0

styles/themes/red.styl

@@ -0,0 +1,137 @@
+@import '../variables.styl';
+
+.reco-theme-red {
+ a,
+ p a code,
+ .theme-default-content a code {
+ color: $redAccentColor;
+ }
+
+ .back-to-ceiling .icon[data-v-4a9283c2] {
+ fill: $redAccentColor !important;
+ }
+
+ // title hover
+ .abstract-item .title[data-v-6b4d96c3]:after {
+ background-color: $redAccentColor;
+ }
+ .abstract-item .title:hover a[data-v-6b4d96c3]{
+ color: $redAccentColor;
+ }
+
+ // tag
+ .tags span[data-v-3a4b2da8] {
+ background-color: $redAccentColor;
+ }
+
+ // category title
+ .categories-wrapper .category-wrapper .category-item a[data-v-1afb3891]:hover {
+ background-color: $redAccentColor;
+ border-radius: inherit;
+ }
+
+ // weird css stuff
+ .categories-wrapper .category-wrapper.category-item[data-v-1afb3891]:hover,
+ .categories-wrapper .category-wrapper .category-item.active[data-v-1afb3891] {
+ background-color: $redAccentColor;
+ }
+ .categories-wrapper .category-wrapper .category-item[data-v-1afb3891]:hover,
+ .categories-wrapper .category-wrapper .category-item.active[data-v-1afb3891] {
+ background-color: $redAccentColor;
+ }
+
+ // @parent-theme/components/Home.vue
+ .hero .action-button {
+ background-color: $redAccentColor;
+ border-bottom-color: darken($redAccentColor, 10%);
+ &:hover {
+ background-color: lighten($redAccentColor, 10%);
+ }
+ }
+
+ .color-picker .iconfont {
+ color: $redAccentColor;
+ }
+
+ // @parent-theme/components/NavLinks.vue
+ .nav-links {
+ a,
+ .dropdown-wrapper .dropdown-title,
+ .dropdown-wrapper .nav-dropdown .dropdown-item a {
+ color: inherit;
+
+ &:hover,
+ &.router-link-active {
+ color: $redAccentColor;
+
+ .iconfont {
+ color: $redAccentColor;
+ }
+ }
+ }
+
+ .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after {
+ border-left-color: $redAccentColor;
+ }
+ }
+
+ @media (min-width: $MQMobile) {
+ .nav-item > a:not(.external) {
+ &:hover,
+ &.router-link-active {
+ border-bottom-color: $redAccentColor;
+ }
+ }
+ }
+
+ // @parent-theme/components/PageEdit.vue
+ .page-edit {
+ .edit-link a {
+ color: $redAccentColor;
+ }
+
+ .last-updated .prefix {
+ color: $redAccentColor;
+ }
+ }
+
+ // @parent-theme/components/SidebarLink.vue
+ &.yuu-theme-dark {
+ a.sidebar-link {
+ color: $darkAltTextColor;
+ }
+ }
+
+ // @parent-theme/components/SidebarLink.vue
+ a.sidebar-link {
+ color: inherit;
+
+ &:hover {
+ color: $redAccentColor;
+ }
+
+ &.active {
+ color: $redAccentColor;
+ border-left-color: $redAccentColor;
+ }
+ }
+
+ // authors
+ span.author-item:hover {
+ color: $redAccentColor !important;
+ }
+ // tags
+ span.tag-item:hover {
+ color: $redAccentColor !important;
+ }
+
+ // sidebars
+ a.sidebar-link.active {
+ background-color: unset !important;
+ }
+
+ // @vuepress/plugin-pwa/lib/SWUpdatePopup.vue
+ .sw-update-popup {
+ border-color: $redAccentColor;
+ }
+}