feat(style): add --vue-preview-color-loading

litingyes · Aug 7, 2023 · 305c47c · 305c47c
1 parent dd2b517
commit 305c47c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/src/VuePreview.vue b/src/VuePreview.vue
@@ -135,7 +135,7 @@ const isHover = useElementHover(vuePreviewContainerRef)
       </Transition>
       <Transition v-if="previewUpdateFlag === 'UPDATING'" name="fade">
         <div class="vue-preview__loading-model">
-          <Loading />
+          <Loading class="vue-preview__loading-icon" />
         </div>
       </Transition>
     </div>
@@ -222,6 +222,10 @@ const isHover = useElementHover(vuePreviewContainerRef)
     background-color: var(--vue-preview-color-model-bg);
   }
 
+  &__loading-icon {
+    color: var(--vue-preview-color-loading, black);
+  }
+
   :deep(.editor) {
     box-sizing: border-box;
     overflow: hidden;

diff --git a/test/vitepress/.vitepress/theme/base.css b/test/vitepress/.vitepress/theme/base.css
@@ -0,0 +1,3 @@
+:root {
+  --vue-preview-color-loading: rgba(0,255,0,0.8);
+}
diff --git a/test/vitepress/.vitepress/theme/index.ts b/test/vitepress/.vitepress/theme/index.ts
@@ -1,6 +1,7 @@
 import DefaultTheme from 'vitepress/theme'
 import { VuePreview } from '../../../../dist'
 import '../../../../dist/style.css'
+import './base.css'
 
 export default {
   ...DefaultTheme,