TODO 上一直挂着调色盘，原想可以去网上白嫖一个插件该是分分钟的事儿，没想怎么也没找到心仪的，只好自己动手改造了一个。 思路：

1. 延续 vuepress 的 css 预处理器，为样式配置好各种颜色变量，接着在使用该颜色时，使用变量进行替代，以实现便捷地颜色大面积更换。 但很可惜的是， stylus 本身是无法使用脚本对其进行操作的。所以，我们只能折衷采用 css 的变量作为桥梁。 以 vuepress 默认博客主题为例，将入口文件 docs\.vuepress\theme\styles\index.styl 进行简单处理。

body
  --main-color $accentColor

2. 检索主题下的所有文件，将所有采用 $accentColor 处（除配色版本身的变量配置与上述入口文件处），用 var(--main-color) 替代，因编译器限制，这里无法使用stylus的内置方法 darken 或 lighten，经测试，也无法采用原生的 color 函数^[1] ，只能妥协采用相同配色。

3. 接着，参考 vcolorpicker^[2] 提取 ColorPicker.vue 源码：

<template lang="html">
  <div class="m-colorPicker"  ref="colorPicker" v-clickoutside="closePanel" v-on:click="event => { event.stopPropagation() }">
    <!-- 颜色显示小方块 -->
    <div class="colorBtn"
      v-bind:style="`background-color: ${showColor}`"
      v-on:click="openPanel"
      v-bind:class="{ disabled: disabled }"
    >主</div>
    <!-- 颜色色盘 -->
    <div class="box" v-bind:class="{ open: openStatus }" >
      <div class="hd">
        <div class="colorView" v-bind:style="`background-color: ${showPanelColor}`"></div>
        <div class="defaultColor"
          v-on:click="handleDefaultColor"
          v-on:mouseover="hoveColor = defaultColor"
          v-on:mouseout="hoveColor = null"
        >默认颜色</div>
      </div>
      <div class="bd">
        <h3>主题颜色</h3>
        <ul class="tColor">
          <li
            v-for="(color, index) of tColor"
            :key="index"
            v-bind:style="{ backgroundColor: color }"
            v-on:mouseover="hoveColor = color"
            v-on:mouseout="hoveColor = null"
            v-on:click="updataValue(color)"
          ></li>
        </ul>
        <ul class="bColor">
          <li v-for="(item, index) of colorPanel" :key="index">
            <ul>
              <li
                v-for="(color, cindex) of item"
                :key="cindex"
                v-bind:style="{ backgroundColor: color }"
                v-on:mouseover="hoveColor = color"
                v-on:mouseout="hoveColor = null"
                v-on:click="updataValue(color)"
              ></li>
            </ul>
          </li>
        </ul>
        <h3>标准颜色</h3>
        <ul class="tColor">
          <li
            v-for="(color, index) of bColor"
            :key="index"
            v-bind:style="{ backgroundColor: color }"
            v-on:mouseover="hoveColor = color"
            v-on:mouseout="hoveColor = null"
            v-on:click="updataValue(color)"
          ></li>
        </ul>
        <h3 v-on:click="triggerHtml5Color">更多颜色...</h3>
        <!-- 用以激活HTML5颜色面板 -->
        <input type="color"
          ref="html5Color"
          v-model="html5Color"
          v-on:change="updataValue(html5Color)">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "colorPicker",
  directives: {
    clickoutside,
  },
  props: {
    // 当前颜色值
    value: {
      type: String,
      required: true,
    },
    // 默认颜色
    defaultColor: {
      type: String,
      default: "#000000",
    },
    // 禁用状态
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 面板打开状态
      openStatus: false,
      // 鼠标经过的颜色块
      hoveColor: null,
      // 主题颜色
      tColor: [
        "#000000",
        "#ffffff",
        "#eeece1",
        "#1e497b",
        "#4e81bb",
        "#e2534d",
        "#9aba60",
        "#8165a0",
        "#47acc5",
        "#f9974c",
      ],
      // 颜色面板
      colorConfig: [
        ["#7f7f7f", "#f2f2f2"],
        ["#0d0d0d", "#808080"],
        ["#1c1a10", "#ddd8c3"],
        ["#0e243d", "#c6d9f0"],
        ["#233f5e", "#dae5f0"],
        ["#632623", "#f2dbdb"],
        ["#4d602c", "#eaf1de"],
        ["#3f3150", "#e6e0ec"],
        ["#1e5867", "#d9eef3"],
        ["#99490f", "#fee9da"],
      ],
      // 标准颜色
      bColor: [
        "#c21401",
        "#ff1e02",
        "#ffc12a",
        "#ffff3a",
        "#90cf5b",
        "#00af57",
        "#00afee",
        "#0071be",
        "#00215f",
        "#72349d",
      ],
      html5Color: this.value,
    };
  },
  computed: {
    // 显示面板颜色
    showPanelColor() {
      if (this.hoveColor) {
        return this.hoveColor;
      } else {
        return this.showColor;
      }
    },
    // 显示颜色
    showColor() {
      if (this.value) {
        return this.value;
      } else {
        return this.defaultColor;
      }
    },
    // 颜色面板
    colorPanel() {
      let colorArr = [];
      for (let color of this.colorConfig) {
        colorArr.push(this.gradient(color[1], color[0], 5));
      }
      return colorArr;
    },
  },
  methods: {
    openPanel() {
      this.openStatus = !this.disabled;
    },
    closePanel() {
      this.openStatus = false;
    },
    triggerHtml5Color() {
      this.$refs.html5Color.click();
    },
    // 更新组件的值 value
    updataValue(value) {
      this.$emit("input", value);
      this.$emit("change", value);
      this.openStatus = false;
    },
    // 设置默认颜色
    handleDefaultColor() {
      this.updataValue(this.defaultColor);
    },
    // 格式化 hex 颜色值
    parseColor(hexStr) {
      if (hexStr.length === 4) {
        hexStr =
          "#" +
          hexStr[1] +
          hexStr[1] +
          hexStr[2] +
          hexStr[2] +
          hexStr[3] +
          hexStr[3];
      } else {
        return hexStr;
      }
    },
    // RGB 颜色 转 HEX 颜色
    rgbToHex(r, g, b) {
      let hex = ((r << 16) | (g << 8) | b).toString(16);
      return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
    },
    // HEX 转 RGB 颜色
    hexToRgb(hex) {
      hex = this.parseColor(hex);
      let rgb = [];
      for (let i = 1; i < 7; i += 2) {
        rgb.push(parseInt("0x" + hex.slice(i, i + 2)));
      }
      return rgb;
    },
    // 计算渐变过渡颜色
    gradient(startColor, endColor, step) {
      // 讲 hex 转换为 rgb
      let sColor = this.hexToRgb(startColor);
      let eColor = this.hexToRgb(endColor);
      // 计算R\G\B每一步的差值
      let rStep = (eColor[0] - sColor[0]) / step;
      let gStep = (eColor[1] - sColor[1]) / step;
      let bStep = (eColor[2] - sColor[2]) / step;
      let gradientColorArr = [];
      // 计算每一步的hex值
      for (let i = 0; i < step; i++) {
        gradientColorArr.push(
          this.rgbToHex(
            parseInt(rStep * i + sColor[0]),
            parseInt(gStep * i + sColor[1]),
            parseInt(bStep * i + sColor[2])
          )
        );
      }
      return gradientColorArr;
    },
  },
};
</script>

<style lang="css" scoped>
.m-colorPicker {
  font-size: 14px;
  display: inline-block;
  outline: none;
}
.m-colorPicker ul,
li,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-colorPicker .colorBtn {
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  color:#fff;
}
.m-colorPicker .colorBtn.disabled {
  cursor: no-drop;
}
.m-colorPicker .box {
  position: absolute;
  width: 190px;
  left:-195px;
  background: #fff;
  border: 1px solid #ddd;
  visibility: hidden;
  border-radius: 2px;
  margin-top: 2px;
  padding: 10px;
  padding-bottom: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: all 0.3s ease;
  box-sizing: content-box;
}
.m-colorPicker .box h3 {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 5px;
  line-height: 1;
  color: #333;
}
.m-colorPicker .box input {
  visibility: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
}

.m-colorPicker .box.open {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
.m-colorPicker .hd {
  overflow: hidden;
  line-height: 29px;
}
.m-colorPicker .hd .colorView {
  width: 100px;
  height: 30px;
  float: left;
  transition: background-color 0.3s ease;
}
.m-colorPicker .hd .defaultColor {
  width: 80px;
  float: right;
  text-align: center;
  border: 1px solid #ddd;
  cursor: pointer;
  color: #333;
}

.m-colorPicker .tColor li {
  width: 15px;
  height: 15px;
  display: inline-block;
  margin: 0 2px;
  transition: all 0.3s ease;
}
.m-colorPicker .tColor li:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  transform: scale(1.3);
}

.m-colorPicker .bColor li {
  width: 15px;
  display: inline-block;
  margin: 0 2px;
}
.m-colorPicker .bColor li li {
  display: block;
  width: 15px;
  height: 15px;
  transition: all 0.3s ease;
  margin: 0;
}
.m-colorPicker .bColor li li:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  transform: scale(1.3);
}
</style>

clickoutside.js^[3]

function validate(binding) {
  if (typeof binding.value !== 'function') {
    console.warn('[Vue-click-outside:] provided expression', binding.expression, 'is not a function.')
    return false
  }

  return true
}

function isPopup(popupItem, elements) {
  if (!popupItem || !elements)
    return false

  for (var i = 0, len = elements.length; i < len; i++) {
    try {
      if (popupItem.contains(elements[i])) {
        return true
      }
      if (elements[i].contains(popupItem)) {
        return false
      }
    } catch(e) {
      return false
    }
  }

  return false
}

function isServer(vNode) {
  return typeof vNode.componentInstance !== 'undefined' && vNode.componentInstance.$isServer
}

exports = module.exports = {
  bind: function (el, binding, vNode) {
    if (!validate(binding)) return

    // Define Handler and cache it on the element
    function handler(e) {
      if (!vNode.context) return

      // some components may have related popup item, on which we shall prevent the click outside event handler.
      var elements = e.path || (e.composedPath && e.composedPath())
      elements && elements.length > 0 && elements.unshift(e.target)

      if (el.contains(e.target) || isPopup(vNode.context.popupItem, elements)) return

      el.__vueClickOutside__.callback(e)
    }

    // add Event Listeners
    el.__vueClickOutside__ = {
      handler: handler,
      callback: binding.value
    }
    const clickHandler = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click';
    !isServer(vNode) && document.addEventListener(clickHandler, handler)
  },

  update: function (el, binding) {
    if (validate(binding)) el.__vueClickOutside__.callback = binding.value
  },

  unbind: function (el, binding, vNode) {
    // Remove Event Listeners
    const clickHandler = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click';
    !isServer(vNode) && el.__vueClickOutside__ && document.removeEventListener(clickHandler, el.__vueClickOutside__.handler)
    delete el.__vueClickOutside__
  }
}

4. 在想要使用的地方引入组件

<ColorPicker
    v-model="color" // 绑定的属性
    defaultColor="#ef7c1e" // 默认颜色
    v-on:change="headleChangeColor" // 绑定的 change 事件
/>

接着处理 headleChangeColor 事件

  mounted() {
    const themeColor = localStorage.getItem("themeColor") || "#ef7c1e";
    if (themeColor) this.headleChangeColor(themeColor);
    this.color = themeColor;
  },
  methods: {
    headleChangeColor(e) {
      const style = document.body.style;
      style.setProperty("--main-color", e);
      localStorage.setItem("themeColor", e);
    },
  },    

5. 对插件的样式进行适配调整 例，在 index.stylus 最下新增，覆盖默认样式：

.go-to-top
  color var(--main-color)!important
.pagination
  .active > a, > .active > span, > .active > a:hover, > .active > span:hover,> .active > a:focus, > .active > span:focus
    background-color: var(--main-color)!important
    border-color: var(--main-color)!important
    color: #fff!important
  > li > a, .pagination > li > span
    color:  var(--main-color)!important
  > .disabled > span, .disabled > span:hover, .disabled > span:focus, .disabled > a,  .disabled > a:hover, .disabled > a:focus
    color: #ddd!important
#nprogress .bar
  background: var(--main-color)!important;

最后去查看下效果吧。

当然，因为这边的需求较为简单，请依据个人需求自行再调试。

另外，经测试IE11下无效

---

1. 例：color(#efb4ea alpha(58%) hue(360) saturation(78%) shade(18%)) 参考 (opens new window) ↩︎

2. vue-color-picker (opens new window) ↩︎

3. click-outside (opens new window) ↩︎