Skip to content

Commit 985be78

Browse files
shenjunjianshenjunjian
authored
fix(site): official website adapts to the dark mode. (#2963)
* fix(site): 修复源码复制图标的颜色 * fix(site): 修复图标颜色 * fix(site): 修复回到顶部的颜色 * fix(tooltip): tooltip新增一个公共变量 * fix(site): 修复暗色模式
1 parent 57e4a2d commit 985be78

File tree

8 files changed

+53
-58
lines changed

8 files changed

+53
-58
lines changed

‎examples/sites/src/assets/images/leftMenu/cmp-business-components.svg‎

Lines changed: 1 addition & 12 deletions
Loading

‎examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎examples/sites/src/views/components-doc/components/contributor.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@ const contributors = computed(() => {
3232
.cmp-contributor-title {
3333
margin-bottom: 32px;
3434
font-size: 20px;
35-
font-weight: Semibold;
36-
color: #191919;
35+
color: var(--tv-color-text);
3736
}
3837
3938
.cmp-contributor-item {

‎examples/sites/src/views/components-doc/components/demo.vue‎

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,42 +10,29 @@
1010
<div class="ti-f-r ti-f-pos-between ti-f-box-end">
1111
<h2 class="demo-title">{{ demo.name[state.langKey] }}</h2>
1212
<div class="demo-options">
13-
<tiny-tooltip
14-
placement="top"
15-
effect="light"
16-
popper-class="docs-tooltip"
17-
:append-to-body="false"
18-
:content="state.copyTip"
19-
>
20-
<i
21-
:class="state.copyIcon"
22-
class="h:c-success ti-w16 ti-h16 ti-cur-hand"
23-
@click="copyCode(demo)"
24-
@mouseout="resetTip()"
25-
/>
26-
</tiny-tooltip>
27-
<tiny-tooltip
28-
placement="top"
29-
effect="light"
30-
popper-class="docs-tooltip"
31-
:append-to-body="false"
32-
:content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
33-
>
34-
<i
35-
:class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
36-
class="ti-ml8 h:c-success ti-w16 ti-h16 ti-cur-hand"
37-
@click="toggleDemoCode(demo)"
38-
/>
39-
</tiny-tooltip>
40-
<tiny-tooltip
41-
placement="top"
42-
effect="light"
43-
popper-class="docs-tooltip"
44-
:append-to-body="false"
45-
:content="i18nByKey('playground')"
46-
>
47-
<i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
48-
</tiny-tooltip>
13+
<i
14+
v-auto-tip="{ content: state.copyTip, effect: 'light', always: true }"
15+
:class="state.copyIcon"
16+
class="ti-w16 ti-h16 ti-cur-hand"
17+
@click="copyCode(demo)"
18+
@mouseout="resetTip()"
19+
/>
20+
<i
21+
v-auto-tip="{
22+
content: demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode'),
23+
effect: 'light',
24+
always: true
25+
}"
26+
:class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
27+
class="ti-ml8 ti-w16 ti-h16 ti-cur-hand"
28+
@click="toggleDemoCode(demo)"
29+
/>
30+
31+
<i
32+
v-auto-tip="{ content: i18nByKey('playground'), effect: 'light', always: true }"
33+
class="i-ti-playground ml8 ti-w16 ti-h16 ti-cur-hand"
34+
@click="openPlayground(demo)"
35+
/>
4936
</div>
5037
</div>
5138
<component :is="getDescMd(demo)" class="demo-desc" />
@@ -85,7 +72,8 @@
8572
import { ref, reactive, computed, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, inject, h } from 'vue'
8673
import { i18nByKey, getWord } from '@/i18n'
8774
import { $split, fetchDemosFile } from '@/tools'
88-
import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
75+
import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
76+
import { AutoTip as vAutoTip } from '@opentiny/vue-directive'
8977
import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../cmp-config'
9078
import { router } from '@/router.js'
9179
import demoConfig from '@demos/config.js'
@@ -349,13 +337,15 @@ onBeforeUnmount(() => {
349337
350338
:global(.dark .pc-demo-container.pc-demo-container) {
351339
background-color: #1a1a1a;
340+
border: none;
352341
}
353342
.pc-demo-container {
354343
display: flex;
355344
flex-direction: column;
356345
color: var(--tv-color-text);
357-
background: var(--tv-color-bg);
346+
background: #fff;
358347
border-radius: 6px;
348+
border: 1px solid #dcdfe6;
359349
padding: 26px 18px 42px;
360350
361351
.pc-demo {
@@ -385,6 +375,13 @@ onBeforeUnmount(() => {
385375
position: absolute;
386376
right: 32px;
387377
bottom: 16px;
378+
379+
i {
380+
color: var(--tv-color-text);
381+
&:hover {
382+
color: var(--tv-color-act-success-text-hover);
383+
}
384+
}
388385
}
389386
}
390387

‎examples/sites/src/views/components-doc/components/float-settings.vue‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -292,12 +292,17 @@ export default defineComponent({
292292
cursor: pointer;
293293
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
294294
295+
.settings-icon {
296+
color: var(--tv-color-icon);
297+
fill: var(--tv-color-icon);
298+
}
299+
295300
&:hover {
296301
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
297302
298303
.settings-icon {
299-
color: #191919;
300-
fill: #191919;
304+
color: var(--tv-color-icon-hover);
305+
fill: var(--tv-color-icon-hover);
301306
}
302307
}
303308
@@ -333,7 +338,7 @@ export default defineComponent({
333338
font-size: 14px;
334339
line-height: 32px;
335340
font-weight: 600;
336-
color: #000000;
341+
color: var(--tv-color-text);
337342
}
338343
339344
.style-settings-options-group {
@@ -356,7 +361,10 @@ export default defineComponent({
356361
}
357362
.tiny-popover.tiny-popper.theme-settings-popover {
358363
border-radius: 12px;
359-
background-color: #ffffff;
364+
background-color: var(--tv-color-bg);
365+
}
366+
.dark .tiny-popover.tiny-popper.theme-settings-popover {
367+
background-color: var(--tv-color-bg-dark);
360368
}
361369
362370
.theme-settings-menu {

‎packages/theme/src/base/dark-theme.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,7 @@
309309
--tv-color-text-control: var(--tv-base-color-common-4); // #B3B3B3 左侧导航默认文本色/主要图标按钮/主要图标+按钮
310310
--tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
311311
--tv-color-text-inverse-tint: var(--tv-base-color-common-13); // #000 暗色反色成黑色：主要按钮文本色
312+
--tv-color-text-inverse-black: var(--tv-base-color-common-13); // #000 tooltip的light文字
312313
--tv-color-text-active-1: var(--tv-base-color-common-1); // #fff 卡片式tab页签激活文本色
313314
--tv-color-text-active-2: var(--tv-base-color-info-7); // #317AF7 tree选中文本色
314315
--tv-color-text-active-3: var(--tv-base-color-common-2); // #E6E6E6 tab页签激活色

‎packages/theme/src/base/vars.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,7 @@
300300
--tv-color-text-control: var(--tv-base-color-common-11); // #191919 左侧导航默认文本色/主要图标按钮/主要图标+按钮
301301
--tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
302302
--tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色
303+
--tv-color-text-inverse-black: var(--tv-base-color-common-11); // #191919 tooltip的light文字
303304
--tv-color-text-active-1: var(--tv-base-color-common-11); // #191919 卡片式tab页签激活文本色
304305
--tv-color-text-active-2: var(--tv-base-color-info-6); // #1476ff tree选中文本色
305306
--tv-color-text-active-3: var(--tv-base-color-common-11); // #191919 tab页签激活色

‎packages/theme/src/tooltip/vars.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
// light主题弹框背景色
6464
--tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-inverse);
6565
// light主题|禁用弹框文本色
66-
--tv-Tooltip-popper-light-text-color: var(--tv-color-text-inverse-tint);
66+
--tv-Tooltip-popper-light-text-color: var(--tv-color-text-inverse-black);
6767
// light主题|禁用时弹框边框色
6868
--tv-Tooltip-popper-light-border-color: var(--tv-Tooltip-popper-light-bg-color);
6969

0 commit comments

Comments
 (0)