From e2d7915ef86a829b360a91d561c637ebb8f212a5 Mon Sep 17 00:00:00 2001
From: GzhiYi <gzy.guy@gmail.com>
Date: Thu, 25 Nov 2021 15:18:55 +0800
Subject: [PATCH] feat: add theme

---
 src/components/VStep.vue | 14 +++++++++-----
 src/components/VTour.vue |  1 +
 src/shared/constants.js  |  6 ++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/VStep.vue b/src/components/VStep.vue
index 3800522..51789a0 100644
--- a/src/components/VStep.vue
+++ b/src/components/VStep.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind:class="{ 'v-step--sticky': isSticky }" class="v-step" :id="'v-step-' + hash" :ref="'v-step-' + hash">
+  <div v-bind:class="{ 'v-step--sticky': isSticky }" class="v-step" :id="'v-step-' + hash" :ref="'v-step-' + hash" :style="{'--theme': theme}">
     <slot name="header">
       <div v-if="step.header" class="v-step__header">
         <div v-if="step.header.title" v-html="step.header.title"></div>
@@ -79,6 +79,10 @@ export default {
     },
     debug: {
       type: Boolean
+    },
+    theme: {
+      type: String,
+      default: DEFAULT_STEP_OPTIONS.theme
     }
   },
   data () {
@@ -203,7 +207,7 @@ export default {
 
 <style lang="scss" scoped>
   .v-step {
-    background: #50596c; /* #ffc107, #35495e */
+    background: var(--theme);
     color: white;
     max-width: 320px;
     border-radius: 3px;
@@ -241,7 +245,7 @@ export default {
 
     &--dark {
       &:before {
-        background: #454d5d;
+        background: var(--theme);
       }
     }
   }
@@ -274,7 +278,7 @@ export default {
   .v-step__header {
     margin: -1rem -1rem 0.5rem;
     padding: 0.5rem;
-    background-color: #454d5d;
+    background-color: var(--theme);
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
   }
@@ -304,7 +308,7 @@ export default {
 
     &:hover {
       background-color: rgba(white, 0.95);
-      color: #50596c;
+      color: var(--theme);
     }
   }
 </style>
diff --git a/src/components/VTour.vue b/src/components/VTour.vue
index 20a16dc..4944b5e 100644
--- a/src/components/VTour.vue
+++ b/src/components/VTour.vue
@@ -32,6 +32,7 @@
         :highlight="customOptions.highlight"
         :stop-on-fail="customOptions.stopOnTargetNotFound"
         :debug="customOptions.debug"
+        :theme="customOptions.theme"
         @targetNotFound="$emit('targetNotFound', $event)"
       >
         <!--<div v-if="index === 2" slot="actions">
diff --git a/src/shared/constants.js b/src/shared/constants.js
index 3e7c2c4..88d09be 100644
--- a/src/shared/constants.js
+++ b/src/shared/constants.js
@@ -29,7 +29,8 @@ export const DEFAULT_OPTIONS = {
     arrowRight: true,
     arrowLeft: true
   },
-  debug: false
+  debug: false,
+  theme: '#50596c'
 }
 
 export const HIGHLIGHT = {
@@ -66,7 +67,8 @@ export const DEFAULT_STEP_OPTIONS = {
       }
     }
   ],
-  placement: 'bottom'
+  placement: 'bottom',
+  theme: '#50596c'
 }
 
 export const KEYS = {