fix(ui/tab-item): tab-item example style

varletjs · Nov 15, 2021 · c4f2ba4 · c4f2ba4
1 parent 681619d
commit c4f2ba4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/packages/varlet-ui/src/tab-item/tabItem.less b/packages/varlet-ui/src/tab-item/tabItem.less
@@ -1,12 +1,4 @@
-@tab-item-content-color: #888;
-
-:root {
-  --tab-item-content-color: @tab-item-content-color;
-}
-
 .var-tab-item {
-  color: var(--tab-item-content-color);
-
   &--inactive[var-tab-item-cover] {
     overflow: visible;
     height: 0;

diff --git a/packages/varlet-ui/src/tabs/example/index.vue b/packages/varlet-ui/src/tabs/example/index.vue
@@ -103,13 +103,13 @@
   </var-tabs>
 
   <var-tabs-items style="margin: 8px 0" v-model:active="activeRelation">
-    <var-tab-item style="padding: 0 4px">
+    <var-tab-item :style="tabItemStyle">
       {{ pack.text }}
     </var-tab-item>
-    <var-tab-item style="padding: 0 4px">
+    <var-tab-item :style="tabItemStyle">
       {{ pack.text2 }}
     </var-tab-item>
-    <var-tab-item style="padding: 0 4px">
+    <var-tab-item :style="tabItemStyle">
       {{ pack.text3 }}
     </var-tab-item>
   </var-tabs-items>
@@ -141,7 +141,7 @@ import VarTabsItems from '../../tabs-items'
 import VarTabItem from '../../tab-item'
 import context from '../../context'
 import { use, pack } from './locale'
-import { onUnmounted, reactive, toRefs } from 'vue'
+import { computed, onUnmounted, reactive, ref, toRefs } from 'vue'
 import { watchPlatform, watchLang } from '@varlet/cli/site/utils'
 import { watchDarkMode } from '../../utils/components'
 
@@ -167,8 +167,16 @@ export default {
       activeRelation: 0,
     })
 
+    const themes = ref('themes')
+    const tabItemStyle = computed(() => ({
+      padding: '0 4px;',
+      color: themes.value === 'themes' ? '#888' : '#aaa',
+    }))
+
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode((mode) => {
+      themes.value = mode
+    })
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {
@@ -182,6 +190,7 @@ export default {
 
     return {
       pack,
+      tabItemStyle,
       ...toRefs(actives),
     }
   },
@@ -197,4 +206,8 @@ export default {
 .icon {
   margin-bottom: 5px;
 }
+
+.var-tab-item {
+  color: #888;
+}
 </style>