Skip to content

fix(site): official website adapts to the dark mode. #2963

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 26, 2025
Merged

fix(site): official website adapts to the dark mode. #2963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a1fcd45
fix(site): 修复源码复制图标的颜色
shenjunjian Feb 25, 2025
ec1764e
fix(site): 修复图标颜色
shenjunjian Feb 25, 2025
6fb7ff2
fix(site): 修复回到顶部的颜色
shenjunjian Feb 25, 2025
63104f2
fix(tooltip): tooltip新增一个公共变量
shenjunjian Feb 25, 2025
9ca6701
Merge branch 'dev' of github.com:opentiny/tiny-vue into dev-fix-site-…
shenjunjian Feb 25, 2025
2300983
fix(site): 修复暗色模式
shenjunjian Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 1 addition & 12 deletions examples/sites/src/assets/images/leftMenu/cmp-business-components.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions examples/sites/src/views/components-doc/components/contributor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ const contributors = computed(() => {
.cmp-contributor-title {
margin-bottom: 32px;
font-size: 20px;
font-weight: Semibold;
color: #191919;
color: var(--tv-color-text);
}

.cmp-contributor-item {
Expand Down
73 changes: 35 additions & 38 deletions examples/sites/src/views/components-doc/components/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,29 @@
<div class="ti-f-r ti-f-pos-between ti-f-box-end">
<h2 class="demo-title">{{ demo.name[state.langKey] }}</h2>
<div class="demo-options">
<tiny-tooltip
placement="top"
effect="light"
popper-class="docs-tooltip"
:append-to-body="false"
:content="state.copyTip"
>
<i
:class="state.copyIcon"
class="h:c-success ti-w16 ti-h16 ti-cur-hand"
@click="copyCode(demo)"
@mouseout="resetTip()"
/>
</tiny-tooltip>
<tiny-tooltip
placement="top"
effect="light"
popper-class="docs-tooltip"
:append-to-body="false"
:content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
>
<i
:class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
class="ti-ml8 h:c-success ti-w16 ti-h16 ti-cur-hand"
@click="toggleDemoCode(demo)"
/>
</tiny-tooltip>
<tiny-tooltip
placement="top"
effect="light"
popper-class="docs-tooltip"
:append-to-body="false"
:content="i18nByKey('playground')"
>
<i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
</tiny-tooltip>
<i
v-auto-tip="{ content: state.copyTip, effect: 'light', always: true }"
Copy link

@petercat-assistant petercat-assistant bot Feb 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The v-auto-tip directive is used here to replace the previous tiny-tooltip component. Ensure that this directive is correctly implemented and tested, as it handles tooltip functionality differently.

:class="state.copyIcon"
class="ti-w16 ti-h16 ti-cur-hand"
@click="copyCode(demo)"
@mouseout="resetTip()"
/>
<i
v-auto-tip="{
content: demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode'),
effect: 'light',
always: true
}"
:class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
class="ti-ml8 ti-w16 ti-h16 ti-cur-hand"
@click="toggleDemoCode(demo)"
/>

<i
v-auto-tip="{ content: i18nByKey('playground'), effect: 'light', always: true }"
class="i-ti-playground ml8 ti-w16 ti-h16 ti-cur-hand"
@click="openPlayground(demo)"
/>
</div>
</div>
<component :is="getDescMd(demo)" class="demo-desc" />
Expand Down Expand Up @@ -85,7 +72,8 @@
import { ref, reactive, computed, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, inject, h } from 'vue'
import { i18nByKey, getWord } from '@/i18n'
import { $split, fetchDemosFile } from '@/tools'
import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
import { AutoTip as vAutoTip } from '@opentiny/vue-directive'
import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../cmp-config'
import { router } from '@/router.js'
import demoConfig from '@demos/config.js'
Expand Down Expand Up @@ -349,13 +337,15 @@ onBeforeUnmount(() => {

:global(.dark .pc-demo-container.pc-demo-container) {
background-color: #1a1a1a;
border: none;
}
.pc-demo-container {
display: flex;
flex-direction: column;
color: var(--tv-color-text);
background: var(--tv-color-bg);
background: #fff;
border-radius: 6px;
border: 1px solid #dcdfe6;
padding: 26px 18px 42px;

.pc-demo {
Expand Down Expand Up @@ -385,6 +375,13 @@ onBeforeUnmount(() => {
position: absolute;
right: 32px;
bottom: 16px;

i {
color: var(--tv-color-text);
&:hover {
color: var(--tv-color-act-success-text-hover);
}
}
}
}

Expand Down
16 changes: 12 additions & 4 deletions examples/sites/src/views/components-doc/components/float-settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,12 +292,17 @@ export default defineComponent({
cursor: pointer;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);

.settings-icon {
color: var(--tv-color-icon);
fill: var(--tv-color-icon);
}

&:hover {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);

.settings-icon {
color: #191919;
fill: #191919;
color: var(--tv-color-icon-hover);
fill: var(--tv-color-icon-hover);
}
}

Expand Down Expand Up @@ -333,7 +338,7 @@ export default defineComponent({
font-size: 14px;
line-height: 32px;
font-weight: 600;
color: #000000;
color: var(--tv-color-text);
}

.style-settings-options-group {
Expand All @@ -356,7 +361,10 @@ export default defineComponent({
}
.tiny-popover.tiny-popper.theme-settings-popover {
border-radius: 12px;
background-color: #ffffff;
background-color: var(--tv-color-bg);
}
.dark .tiny-popover.tiny-popper.theme-settings-popover {
background-color: var(--tv-color-bg-dark);
}

.theme-settings-menu {
Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/base/dark-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,7 @@
--tv-color-text-control: var(--tv-base-color-common-4); // #B3B3B3 左侧导航默认文本色/主要图标按钮/主要图标+按钮
--tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
--tv-color-text-inverse-tint: var(--tv-base-color-common-13); // #000 暗色反色成黑色：主要按钮文本色
--tv-color-text-inverse-black: var(--tv-base-color-common-13); // #000 tooltip的light文字
--tv-color-text-active-1: var(--tv-base-color-common-1); // #fff 卡片式tab页签激活文本色
--tv-color-text-active-2: var(--tv-base-color-info-7); // #317AF7 tree选中文本色
--tv-color-text-active-3: var(--tv-base-color-common-2); // #E6E6E6 tab页签激活色
Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,7 @@
--tv-color-text-control: var(--tv-base-color-common-11); // #191919 左侧导航默认文本色/主要图标按钮/主要图标+按钮
--tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
--tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色
--tv-color-text-inverse-black: var(--tv-base-color-common-11); // #191919 tooltip的light文字
--tv-color-text-active-1: var(--tv-base-color-common-11); // #191919 卡片式tab页签激活文本色
--tv-color-text-active-2: var(--tv-base-color-info-6); // #1476ff tree选中文本色
--tv-color-text-active-3: var(--tv-base-color-common-11); // #191919 tab页签激活色
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/tooltip/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
// light主题弹框背景色
--tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-inverse);
// light主题|禁用弹框文本色
--tv-Tooltip-popper-light-text-color: var(--tv-color-text-inverse-tint);
--tv-Tooltip-popper-light-text-color: var(--tv-color-text-inverse-black);
// light主题|禁用时弹框边框色
--tv-Tooltip-popper-light-border-color: var(--tv-Tooltip-popper-light-bg-color);

Expand Down
Loading