gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat!: apply vuepress official guidelines (#203)

Browse Source
This commit is contained in:
pengzhanbo 2024-09-22 01:28:13 +08:00 committed by GitHub
parent 533898e3a6
commit ce921e209d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
92 changed files with 327 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/.vuepress/themes/components/CanIUseConfig.vue
View File

@ -79,7 +79,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
background-color: var(--vp-c-bg-safe);
border: solid 1px var(--vp-c-divider);
border-radius: 5px;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background border;
}
@ -120,7 +120,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
font-size: 1em;
background-color: var(--vp-c-bg);
border: solid 1px var(--vp-c-divider);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: border background;
}
@ -180,7 +180,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
padding: 3px 16px;
background-color: var(--vp-c-bg);
border: solid 1px var(--vp-c-divider);
transition: border var(--t-color), background-color var(--t-color);
transition: border var(--vp-t-color), background-color var(--vp-t-color);
}
.caniuse-browser-version select:first-of-type {
@ -215,7 +215,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
color: var(--vp-c-bg);
background-color: var(--vp-c-brand-1);
border-radius: 8px;
transition: background-color var(--t-color), color var(--t-color);
transition: background-color var(--vp-t-color), color var(--vp-t-color);
}
.caniuse-render-button:hover {

2
docs/.vuepress/themes/components/ColorPick.vue
View File

@ -57,7 +57,7 @@ onUnmounted(() => {
background-color: var(--vp-c-bg-soft);
border: solid 1px var(--vp-c-divider);
border-radius: 32px;
transition: border-color var(--t-color), background-color var(--t-color);
transition: border-color var(--vp-t-color), background-color var(--vp-t-color);
}
.pickr .pcr-button {

2
docs/.vuepress/themes/components/Demos.vue
View File

@ -58,7 +58,7 @@ defineProps<{
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: border background box-shadow;
}

4
docs/.vuepress/themes/components/HeroTintPlateConfig.vue
View File

@ -128,7 +128,7 @@ const output = computed(() => {
background: linear-gradient(to bottom, #fff 0, transparent 40%, transparent 60%, #fff 140%);
}
.hero-tint-plate-wrapper .dark :deep(.bg-filter::after) {
.hero-tint-plate-wrapper [data-theme="dark"] :deep(.bg-filter::after) {
background: linear-gradient(to bottom, #1b1b1f 0, transparent 40%, transparent 60%, #1b1b1f 140%);
}
@ -142,7 +142,7 @@ const output = computed(() => {
border-bottom: 1px solid var(--vp-c-divider);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, border-bottom-color, color;
}

2
docs/.vuepress/themes/components/ThemeColors.vue
View File

@ -73,6 +73,6 @@ const { lightColors, darkColors, css, reset } = useThemeColors()
.theme-color .desc {
font-size: 14px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
</style>

2
docs/.vuepress/themes/composables/theme-colors.ts
View File

@ -101,7 +101,7 @@ export function setupThemeColors() {
}, { deep: true, immediate: true })
function resolveContent(colors: ThemeColorsGroup[], type: 'light' | 'dark') {
const name = type === 'light' ? ':root' : '.dark'
const name = type === 'light' ? ':root' : '[data-theme="dark"]'
let content = `${name} {\n`
colors.forEach(({ name, group }) => {
content += `\n /**\n * ${name}\n * -------------------------------------------------------------------------- */\n\n`

2
docs/notes/theme/config/主题配置.md
View File

@ -267,7 +267,7 @@ interface BlogPostCover {
- 如果该选项设置为 `false`，用户将无法切换主题。
- 如果该选项设置为 `force-dark`，则用户将无法切换主题，但会强制将主题更改为深色。
此选项注入一个内联脚本，从本地存储恢复用户设置。这确保在呈现页面之前应用 `.dark` 类以避免闪烁。
此选项注入一个内联脚本，从本地存储恢复用户设置。这确保在呈现页面之前应用 `[data-theme="dark"]` 以避免闪烁。
### appearanceText

12
docs/notes/theme/guide/博客.md
View File

@ -68,7 +68,7 @@ export default defineUserConfig({
<div
style="width: 310px;margin: 0 auto;padding: 20px 20px 1px;text-align:center;border-radius: 4px;
background-color: var(--vp-c-bg-soft);transition: background-color var(--t-color);"
background-color: var(--vp-c-bg-soft);transition: background-color var(--vp-t-color);"
>
<VPBlogProfile />
</div>
@ -180,7 +180,7 @@ cover: /images/cover.jpg # [!code ++]
默认效果如下：
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--t-color)">
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--vp-t-color)">
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
@ -204,7 +204,7 @@ cover: # [!code ++:5]
效果如下:
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--t-color)">
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--vp-t-color)">
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
@ -229,7 +229,7 @@ cover: # [!code ++:6]
效果如下:
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--t-color)">
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--vp-t-color)">
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
@ -257,7 +257,7 @@ cover: # [!code ++:5]
效果如下:
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--t-color)">
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--vp-t-color)">
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
@ -330,7 +330,7 @@ interface BlogPostCover {
比如 `odd-left` 效果如下：
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;display: flex;flex-direction: column;gap: 24px;transition: var(--t-color)">
<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;display: flex;flex-direction: column;gap: 24px;transition: var(--vp-t-color)">
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',

2
docs/notes/theme/guide/自定义样式.md
View File

@ -76,7 +76,7 @@ export default defineClientConfig({
--vp-c-text-3: rgba(60, 60, 67, 0.56);
}
.dark {
[data-theme="dark"] {
--vp-c-brand-1: #8cccd5;
--vp-c-brand-2: #6aa1b7;
--vp-c-brand-3: #5086a1;

18
plugins/plugin-md-power/src/client/components/CodeRepl.vue
View File

@ -101,7 +101,7 @@ function runCode() {
padding-top: 6px;
margin: 0 -1.5rem;
background-color: var(--vp-code-block-bg);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.code-repl-title {
@ -111,7 +111,7 @@ function runCode() {
margin: 0 -1.5rem;
background-color: var(--vp-code-block-bg);
border-bottom: solid 1px var(--vp-c-divider);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background, border;
}
@ -142,7 +142,7 @@ function runCode() {
line-height: 48px;
color: var(--vp-code-tab-active-text-color);
white-space: nowrap;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.icon-run {
@ -156,7 +156,7 @@ function runCode() {
cursor: pointer;
border: solid 1px var(--vp-c-text-3);
border-radius: 100%;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color, border;
}
@ -171,7 +171,7 @@ function runCode() {
justify-content: space-between;
padding: 4px 10px 4px 20px;
border-top: solid 2px var(--vp-c-divider);
transition: border-color var(--t-color);
transition: border-color var(--vp-t-color);
}
.output-head .title {
@ -184,7 +184,7 @@ function runCode() {
.output-head .output-version {
font-size: 12px;
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.output-head .icon-close {
@ -193,7 +193,7 @@ function runCode() {
margin-left: 20px;
color: var(--vp-c-text-3);
cursor: pointer;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.output-head .icon-close:hover {
@ -227,7 +227,7 @@ function runCode() {
.output-content .stderr pre,
.output-content.rust .stderr pre.error {
color: var(--vp-c-danger-1, #b8272c);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.output-content.rust .stderr pre {
@ -237,6 +237,6 @@ function runCode() {
.output-content .stderr + .stdout {
margin-top: 12px;
border-top: 1px solid var(--vp-c-divider);
transition: border-color var(--t-color);
transition: border-color var(--vp-t-color);
}
</style>

14
plugins/plugin-md-power/src/client/components/FileTreeItem.vue
View File

@ -60,7 +60,7 @@ onUnmounted(() => {
background-color: var(--vp-c-bg-safe);
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
transition: border var(--t-color), background-color var(--t-color);
transition: border var(--vp-t-color), background-color var(--vp-t-color);
}
.vp-file-tree .vp-file-tree-title {
@ -69,7 +69,7 @@ onUnmounted(() => {
font-weight: bold;
color: var(--vp-c-text-1);
border-bottom: solid 1px var(--vp-c-divider);
transition: color var(--t-color), border-color var(--t-color);
transition: color var(--vp-t-color), border-color var(--vp-t-color);
}
.vp-file-tree ul {
@ -106,7 +106,7 @@ onUnmounted(() => {
.file-tree-item .tree-node.folder > .name {
color: var(--vp-c-text-1);
cursor: pointer;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.file-tree-item .tree-node.folder > .name:hover {
@ -130,7 +130,7 @@ onUnmounted(() => {
mask: var(--icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.file-tree-item .tree-node .name.focus {
@ -141,7 +141,7 @@ onUnmounted(() => {
color: var(--vp-c-bg);
background-color: var(--vp-c-brand-2);
border-radius: 4px;
transition: color var(--t-color), background-color var(--t-color);
transition: color var(--vp-t-color), background-color var(--vp-t-color);
}
.file-tree-item .tree-node .name.focus:hover {
@ -153,7 +153,7 @@ onUnmounted(() => {
margin-left: 20px;
overflow: hidden;
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.file-tree-item .tree-node [class*="vpi-"] {
@ -170,7 +170,7 @@ onUnmounted(() => {
padding-left: 8px !important;
margin: 0 0 0 6px !important;
border-left: solid 1px var(--vp-c-divider);
transition: border-color var(--t-color);
transition: border-color var(--vp-t-color);
}
.file-tree-item:not(.expanded) > ul {

2
plugins/plugin-md-power/src/client/components/Loading.vue
View File

@ -30,7 +30,7 @@ defineProps<{
font-size: 36px;
color: currentcolor;
background-color: inherit;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.md-power-loading.absolute {

6
plugins/plugin-md-power/src/client/components/Plot.vue
View File

@ -81,7 +81,7 @@ function onClick() {
transition: color ease 0.25s, background-color ease 0.25s;
}
.dark .vp-plot {
[data-theme="dark"] .vp-plot {
background-color: var(--vp-c-bg-plot-dark, #fff);
}
@ -90,8 +90,8 @@ function onClick() {
color: var(--vp-c-plot-light, #fff);
}
.dark .vp-plot.hover:hover,
.dark .vp-plot.active {
[data-theme="dark"] .vp-plot.hover:hover,
[data-theme="dark"] .vp-plot.active {
color: var(--vp-c-plot-dark, #000);
}
</style>

2
theme/src/client/components/Blog/VPBlog.vue
View File

@ -102,7 +102,7 @@ const { theme, page } = useData()
position: relative;
min-height: calc(100vh - var(--vp-footer-height, 0px));
padding: calc(var(--vp-nav-height) + 32px) 16px 32px;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
@media(min-width: 419px) {

10
theme/src/client/components/Blog/VPBlogArchives.vue
View File

@ -43,7 +43,7 @@ const { archives } = useArchives()
font-weight: 700;
color: var(--vp-c-brand-1);
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.archives-title .icon {
@ -54,7 +54,7 @@ const { archives } = useArchives()
padding: 16px;
margin: 0 -16px 24px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.archive-title {
@ -64,7 +64,7 @@ const { archives } = useArchives()
font-size: 18px;
font-weight: 700;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
transition: border-bottom var(--vp-t-color);
}
@media (min-width: 768px) {
@ -77,7 +77,7 @@ const { archives } = useArchives()
margin: 0 0 24px;
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: box-shadow, background-color;
}
@ -89,7 +89,7 @@ const { archives } = useArchives()
padding-left: 24px;
margin: 0 -24px;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
transition: border-bottom var(--vp-t-color);
}
}

6
theme/src/client/components/Blog/VPBlogCategories.vue
View File

@ -31,7 +31,7 @@ const { categories } = useBlogCategory()
padding: 16px;
margin: 0 -16px 32px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color), box-shadow var(--t-color);
transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
}
@media (min-width: 768px) {
@ -57,7 +57,7 @@ const { categories } = useBlogCategory()
font-weight: 700;
color: var(--vp-c-text-1);
border-bottom: solid 1px var(--vp-c-divider);
transition: color var(--t-color), border-color var(--t-color);
transition: color var(--vp-t-color), border-color var(--vp-t-color);
}
.categories-title .icon {
@ -69,7 +69,7 @@ const { categories } = useBlogCategory()
padding: 0 24px 12px;
margin: 0 -24px;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
transition: border-bottom var(--vp-t-color);
}
}

10
theme/src/client/components/Blog/VPBlogExtract.vue
View File

@ -123,7 +123,7 @@ const showBlogExtract = computed(() => {
border-top-left-radius: 99px;
border-bottom-left-radius: 99px;
box-shadow: var(--vp-shadow-2);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, border, box-shadow;
}
@ -131,7 +131,7 @@ const showBlogExtract = computed(() => {
display: block;
font-size: 16px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
@media (min-width: 768px) {
@ -182,7 +182,7 @@ const showBlogExtract = computed(() => {
transform: translateY(100%);
}
.dark .blog-modal-container {
[data-theme="dark"] .blog-modal-container {
box-shadow:
0 -3px 12px rgba(0, 0, 0, 0.3),
0 -1px 4px rgba(0, 0, 0, 0.27);
@ -232,7 +232,7 @@ const showBlogExtract = computed(() => {
font-weight: 600;
color: var(--vp-c-brand-1);
border-radius: 8px;
transition: all var(--t-color);
transition: all var(--vp-t-color);
}
.nav-link .icon {
@ -255,7 +255,7 @@ const showBlogExtract = computed(() => {
justify-content: center;
font-size: 14px;
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.profile-location p,

6
theme/src/client/components/Blog/VPBlogNav.vue
View File

@ -83,7 +83,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
background-color: var(--vp-c-bg);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, color, box-shadow, transform;
transform: scale(1);
}
@ -117,7 +117,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
.nav-link .total {
padding-right: 8px;
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.nav-link .icon {
@ -125,7 +125,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
height: 1em;
font-size: 1.2em;
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.nav-link .icon-logo {

8
theme/src/client/components/Blog/VPBlogProfile.vue
View File

@ -50,7 +50,7 @@ const imageUrl = computed(() => {
background-color: var(--vp-c-bg);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, color, box-shadow;
}
@ -74,7 +74,7 @@ const imageUrl = computed(() => {
.vp-blog-profile h3,
.vp-blog-profile p {
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-blog-profile .circle img {
@ -90,7 +90,7 @@ const imageUrl = computed(() => {
margin-top: 16px;
font-size: 14px;
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.profile-location p,
@ -106,7 +106,7 @@ const imageUrl = computed(() => {
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid var(--vp-c-divider);
transition: border var(--t-color);
transition: border var(--vp-t-color);
}
.profile-social :deep(.vp-social-link) {

12
theme/src/client/components/Blog/VPBlogTags.vue
View File

@ -57,7 +57,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
padding: 20px 16px;
margin: 0 -16px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.tags-container {
@ -71,7 +71,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
font-size: 20px;
font-weight: 700;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.tags-title .icon {
@ -100,7 +100,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
background-color: var(--vp-tag-color);
border: solid 1px var(--vp-tag-color);
border-radius: 6px;
transition: all var(--t-color);
transition: all var(--vp-t-color);
}
.tag-title {
@ -110,7 +110,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid var(--vp-c-divider);
transition: border-bottom var(--t-color);
transition: border-bottom var(--vp-t-color);
}
.tag-count {
@ -119,7 +119,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
margin-left: 4px;
color: var(--vp-c-bg);
border-left: 1px solid var(--vp-c-bg);
transition: color var(--t-color), border-left var(--t-color);
transition: color var(--vp-t-color), border-left var(--vp-t-color);
}
.tags .tag:hover,
@ -142,7 +142,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
background-color: var(--vp-c-bg);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, box-shadow;
}

2
theme/src/client/components/Blog/VPCategories.vue
View File

@ -40,7 +40,7 @@ defineProps<{
width: fit-content;
max-width: 100%;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-categories-item .post:hover {

4
theme/src/client/components/Blog/VPCategoriesGroup.vue
View File

@ -72,7 +72,7 @@ onMounted(() => {
display: block;
content: "";
border-left: 1px solid var(--vp-c-divider);
transition: border var(--t-color);
transition: border var(--vp-t-color);
}
.vp-category-group .folder {
@ -83,7 +83,7 @@ onMounted(() => {
font-weight: 600;
color: var(--vp-c-text-2);
cursor: pointer;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-category-group .folder:hover {

6
theme/src/client/components/Blog/VPPagination.vue
View File

@ -55,7 +55,7 @@ const { theme } = useData()
padding: 16px;
margin: 0 -16px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.btn {
@ -66,7 +66,7 @@ const { theme } = useData()
color: var(--vp-c-text-2);
background-color: transparent;
border-radius: 4px;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color, background-color;
}
@ -89,7 +89,7 @@ const { theme } = useData()
background-color: var(--vp-c-bg);
border-radius: 6px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, box-shadow;
}

18
theme/src/client/components/Blog/VPPostItem.vue
View File

@ -128,7 +128,7 @@ const coverStyles = computed(() => {
padding: 16px;
margin: 0 -16px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-blog-post-item.has-cover:where(.left, .right) {
@ -216,7 +216,7 @@ const coverStyles = computed(() => {
color: var(--vp-c-text-2);
background-color: var(--vp-c-brand-soft);
border-radius: 4px;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color, background-color;
}
@ -226,7 +226,7 @@ const coverStyles = computed(() => {
margin-right: 8px;
margin-left: 3px;
color: var(--vp-c-text-3);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color;
}
@ -237,7 +237,7 @@ const coverStyles = computed(() => {
font-size: 18px;
font-weight: 600;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.blog-post-item-content h3 a {
@ -263,7 +263,7 @@ const coverStyles = computed(() => {
margin: 0;
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, color, box-shadow;
will-change: transform;
}
@ -285,7 +285,7 @@ const coverStyles = computed(() => {
font-size: 14px;
font-weight: 400;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.blog-post-item-content .post-meta > div {
@ -313,7 +313,7 @@ const coverStyles = computed(() => {
color: var(--vp-tag-color);
background-color: var(--vp-tag-bg);
border-radius: 3px;
transition: color var(--t-color), background-color var(--t-color);
transition: color var(--vp-t-color), background-color var(--vp-t-color);
}
.blog-post-item-content .post-meta .tag-list .tag:last-of-type {
@ -325,7 +325,7 @@ const coverStyles = computed(() => {
height: 14px;
margin: 0.3rem;
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.blog-post-item-content .post-meta a {
@ -348,7 +348,7 @@ const coverStyles = computed(() => {
.excerpt.vp-doc :deep(p strong) {
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.excerpt.vp-doc :deep([class^="language-"]) {

6
theme/src/client/components/Blog/VPShortPostList.vue
View File

@ -36,7 +36,7 @@ defineProps<{
align-items: center;
justify-content: space-between;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-blog-short-post-list .post-title {
@ -45,7 +45,7 @@ defineProps<{
margin-right: 14px;
overflow: hidden;
font-weight: 600;
transition: all var(--t-color);
transition: all var(--vp-t-color);
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
@ -54,7 +54,7 @@ defineProps<{
.vp-blog-short-post-list .post-time {
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-blog-short-post-list li:hover .post-title {

2
theme/src/client/components/Home/VPHome.vue
View File

@ -114,7 +114,7 @@ onUnmounted(() => {
}
.vp-home .layout {
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-home .layout:nth-child(odd) {

4
theme/src/client/components/Home/VPHomeBanner.vue
View File

@ -73,7 +73,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all var(--t-color);
transition: all var(--vp-t-color);
}
.vp-home-banner .banner-mask {
@ -83,7 +83,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
transition: opacity var(--t-color);
transition: opacity var(--vp-t-color);
}
.vp-home-banner .container {

2
theme/src/client/components/Home/VPHomeCustom.vue
View File

@ -8,6 +8,6 @@ const props = defineProps<PlumeThemeHomeCustom>()
<template>
<VPHomeBox class="vp-home-custom" v-bind="props">
<Content class="vp-doc" />
<Content class="vp-doc" vp-content />
</VPHomeBox>
</template>

4
theme/src/client/components/Home/VPHomeFeature.vue
View File

@ -66,7 +66,7 @@ const isIconify = computed(() => {
background-color: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-bg-soft);
border-radius: 12px;
transition: border-color var(--t-color), background-color var(--t-color);
transition: border-color var(--vp-t-color), background-color var(--vp-t-color);
}
.vp-home-feature.link:hover {
@ -94,7 +94,7 @@ const isIconify = computed(() => {
font-size: 24px;
background-color: var(--vp-c-default-soft);
border-radius: 6px;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.title {

4
theme/src/client/components/Home/VPHomeFeatures.vue
View File

@ -68,7 +68,7 @@ const grid = computed(() => {
font-weight: 900;
color: var(--vp-c-text-1);
text-align: center;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.description {
@ -77,7 +77,7 @@ const grid = computed(() => {
line-height: 1.7;
color: var(--vp-c-text-1);
text-align: center;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
@media (min-width: 768px) {

6
theme/src/client/components/Home/VPHomeHero.vue
View File

@ -147,7 +147,7 @@ useHomeHeroTintPlate(
.hero-tagline {
color: var(--vp-c-home-hero-tagline, var(--vp-c-text-2));
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.hero-text {
@ -156,7 +156,7 @@ useHomeHeroTintPlate(
font-weight: 500;
color: var(--vp-c-home-hero-text, var(--vp-c-text-3));
white-space: pre-wrap;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.actions {
@ -206,7 +206,7 @@ useHomeHeroTintPlate(
height: 100%;
content: "";
background: linear-gradient(to bottom, var(--vp-home-hero-bg-filter) 0, transparent 45%, transparent 55%, var(--vp-home-hero-bg-filter) 140%);
transition: --vp-home-hero-bg-filter var(--t-color);
transition: --vp-home-hero-bg-filter var(--vp-t-color);
}
.bg-filter canvas {

2
theme/src/client/components/Home/VPHomeProfile.vue
View File

@ -70,6 +70,6 @@ const profile = computed(() => {
line-height: 1.5;
color: var(--vp-c-text-2);
white-space: pre-wrap;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
</style>

6
theme/src/client/components/Home/VPHomeTextImage.vue
View File

@ -92,21 +92,21 @@ const maxWidth = computed(() => {
font-size: 16px;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.content-text ul h3 {
margin: 0;
font-size: 16px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.content-text ul p {
margin: 0;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.content-text ul li :only-child {

12
theme/src/client/components/Nav/VPNavBar.vue
View File

@ -33,7 +33,7 @@ watchPostEffect(() => {
</script>
<template>
<div class="vp-navbar" :class="classes">
<div class="vp-navbar" :class="classes" vp-navbar>
<div class="wrapper">
<div class="container">
<div class="title">
@ -79,7 +79,7 @@ watchPostEffect(() => {
height: var(--vp-nav-height);
white-space: nowrap;
pointer-events: none;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, color, border-bottom;
}
@ -134,7 +134,7 @@ watchPostEffect(() => {
.title {
flex-shrink: 0;
height: calc(var(--vp-nav-height) - 1px);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.container > .title,
@ -197,7 +197,7 @@ watchPostEffect(() => {
height: var(--vp-nav-height);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
@media (min-width: 960px) {
@ -229,7 +229,7 @@ watchPostEffect(() => {
margin-left: 8px;
content: "";
background-color: var(--vp-c-divider);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.menu + .appearance::before,
@ -269,7 +269,7 @@ watchPostEffect(() => {
.divider-line {
width: 100%;
height: 1px;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-navbar:not(.home) .divider-line {

2
theme/src/client/components/Nav/VPNavBarExtra.vue
View File

@ -89,7 +89,7 @@ const hasExtraContent = computed(
font-weight: 700;
line-height: 32px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.item.appearance,

4
theme/src/client/components/Nav/VPNavBarHamburger.vue
View File

@ -55,7 +55,7 @@ defineEmits<(e: 'click') => void>()
background-color: var(--vp-c-text-1);
transition:
top 0.25s,
background-color var(--t-color),
background-color var(--vp-t-color),
transform 0.25s;
}
@ -116,7 +116,7 @@ defineEmits<(e: 'click') => void>()
background-color: var(--vp-c-text-2);
transition:
top 0.25s,
background-color var(--t-color),
background-color var(--vp-t-color),
transform 0.25s;
}
</style>

2
theme/src/client/components/Nav/VPNavBarMenuLink.vue
View File

@ -42,7 +42,7 @@ const { page } = useData()
font-weight: 500;
line-height: var(--vp-nav-height);
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.navbar-menu-link.active {

2
theme/src/client/components/Nav/VPNavBarTitle.vue
View File

@ -36,7 +36,7 @@ const routeLocale = useRouteLocale()
font-weight: 600;
color: var(--vp-c-text-1);
border-bottom: 1px solid transparent;
transition: opacity var(--t-color), color var(--t-color), border-bottom var(--t-color);
transition: opacity var(--vp-t-color), color var(--vp-t-color), border-bottom var(--vp-t-color);
}
@media (min-width: 960px) {

2
theme/src/client/components/Nav/VPNavBarTranslations.vue
View File

@ -44,6 +44,6 @@ const { currentLang, localeLinks } = useLangs()
font-weight: 700;
line-height: 32px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
</style>

6
theme/src/client/components/Nav/VPNavScreen.vue
View File

@ -48,7 +48,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
overflow-y: auto;
pointer-events: auto;
background-color: var(--vp-nav-screen-bg-color);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.container {
@ -59,12 +59,12 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
.vp-nav-screen.fade-enter-active,
.vp-nav-screen.fade-leave-active {
transition: opacity var(--t-color);
transition: opacity var(--vp-t-color);
}
.vp-nav-screen.fade-enter-active .container,
.vp-nav-screen.fade-leave-active .container {
transition: transform var(--t-color);
transition: transform var(--vp-t-color);
}
.vp-nav-screen.fade-enter-from,

2
theme/src/client/components/Nav/VPNavScreenAppearance.vue
View File

@ -25,7 +25,7 @@ const { theme } = useData()
padding: 12px 14px 12px 16px;
background-color: var(--vp-c-bg-soft);
border-radius: 8px;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color;
}

4
theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
View File

@ -60,7 +60,7 @@ function toggle() {
height: 48px;
overflow: hidden;
border-bottom: 1px solid var(--vp-c-divider);
transition: border-color var(--t-color);
transition: border-color var(--vp-t-color);
}
.vp-nav-screen-menu-group .items {
@ -86,7 +86,7 @@ function toggle() {
font-weight: 500;
line-height: 24px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.button:hover {

2
theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
View File

@ -33,7 +33,7 @@ const closeScreen = inject('close-screen') as () => void
font-weight: 400;
line-height: 32px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-nav-screen-menu-group-link:hover {

2
theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
View File

@ -34,6 +34,6 @@ defineProps<{
font-weight: 700;
line-height: 32px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
</style>

4
theme/src/client/components/Nav/VPNavScreenMenuLink.vue
View File

@ -35,8 +35,8 @@ const closeScreen = inject('close-screen') as () => void
color: var(--vp-c-text-1);
border-bottom: 1px solid var(--vp-c-divider);
transition:
border-color var(--t-color),
color var(--t-color);
border-color var(--vp-t-color),
color var(--vp-t-color);
}
.vp-nav-screen-menu-link:hover {

4
theme/src/client/components/Nav/VPNavScreenTranslations.vue
View File

@ -49,7 +49,7 @@ function toggle() {
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.icon {
@ -72,6 +72,6 @@ function toggle() {
font-size: 13px;
line-height: 32px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
</style>

6
theme/src/client/components/VPBackToTop.vue
View File

@ -88,8 +88,8 @@ function handleClick() {
border-radius: 100%;
box-shadow: var(--vp-shadow-2);
transition:
background-color var(--t-color),
box-shadow var(--t-color);
background-color var(--vp-t-color),
box-shadow var(--vp-t-color);
}
.vp-back-to-top .percent,
@ -98,7 +98,7 @@ function handleClick() {
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease, color var(--t-color);
transition: opacity 0.5s ease, color var(--vp-t-color);
}
.vp-back-to-top .percent.show,

2
theme/src/client/components/VPBackdrop.vue
View File

@ -23,7 +23,7 @@ defineProps<{
left: 0;
z-index: var(--vp-z-index-backdrop);
background: var(--vp-backdrop-bg-color);
transition: opacity var(--t-color);
transition: opacity var(--vp-t-color);
}
.vp-backdrop.fade-enter-from,

2
theme/src/client/components/VPButton.vue
View File

@ -58,7 +58,7 @@ function linkTo(e: Event) {
text-align: center;
white-space: nowrap;
border: 1px solid transparent;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: border, color, background-color;
}

7
theme/src/client/components/VPDoc.vue
View File

@ -85,7 +85,7 @@ watch(
>
<slot name="doc-top" />
<div class="container">
<div v-if="enableAside" class="aside" :class="{ 'left-aside': leftAside }">
<div v-if="enableAside" class="aside" :class="{ 'left-aside': leftAside }" vp-outline>
<div class="aside-curtain" />
<div ref="asideEl" class="aside-container">
<div class="aside-content">
@ -123,6 +123,7 @@ watch(
<Content
v-else class="vp-doc plume-content"
:class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']"
vp-content
/>
</main>
<VPDocFooter v-if="isPageDecrypted">
@ -130,7 +131,7 @@ watch(
<slot name="doc-footer-before" />
</template>
</VPDocFooter>
<CommentService v-if="hasComments" :darkmode="isDark" />
<CommentService v-if="hasComments" :darkmode="isDark" vp-comment />
<slot name="doc-after" />
</div>
</div>
@ -250,7 +251,7 @@ watch(
width: 224px;
height: 32px;
background: linear-gradient(transparent, var(--vp-aside-curtain-bg) 70%);
transition: --vp-aside-curtain-bg var(--t-color);
transition: --vp-aside-curtain-bg var(--vp-t-color);
}
.aside-content {

6
theme/src/client/components/VPDocAsideOutline.vue
View File

@ -59,7 +59,7 @@ function handlePrint() {
font-size: 13px;
font-weight: 500;
border-left: 1px solid var(--vp-c-divider);
transition: border-left var(--t-color);
transition: border-left var(--vp-t-color);
}
.outline-marker {
@ -74,8 +74,8 @@ function handlePrint() {
opacity: 0;
transition:
top 0.25s cubic-bezier(0, 1, 0.5, 1),
background-color var(--t-color),
opacity var(--t-color);
background-color var(--vp-t-color),
opacity var(--vp-t-color);
}
.outline-title {

6
theme/src/client/components/VPDocBreadcrumbs.vue
View File

@ -96,7 +96,7 @@ function resolveSidebar(
padding-left: 8px;
margin-bottom: 2rem;
border-left: solid 2px var(--vp-c-brand-1);
transition: border-left var(--t-color);
transition: border-left var(--vp-t-color);
}
.vp-breadcrumb ol {
@ -117,7 +117,7 @@ function resolveSidebar(
.vp-breadcrumb .breadcrumb {
font-weight: bold;
color: var(--vp-c-brand-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-breadcrumb .breadcrumb:hover {
@ -131,6 +131,6 @@ function resolveSidebar(
.vp-breadcrumb .vpi-chevron-right {
margin-left: 4px;
color: var(--vp-c-border);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
</style>

18
theme/src/client/components/VPDocFooter.vue
View File

@ -107,7 +107,7 @@ const showFooter = computed(() => {
line-height: 32px;
color: var(--vp-c-brand-1);
border: 0;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.edit-link-button:hover {
@ -130,7 +130,7 @@ const showFooter = computed(() => {
font-weight: 500;
line-height: 24px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
@media (min-width: 640px) {
@ -164,16 +164,16 @@ const showFooter = computed(() => {
padding-right: 10px;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.contributors-info {
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
.contributor {
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
}
@ -183,7 +183,7 @@ const showFooter = computed(() => {
padding-top: 24px;
margin-top: 10px;
border-top: 1px solid var(--vp-c-divider);
transition: border-top var(--t-color);
transition: border-top var(--vp-t-color);
}
@media (min-width: 640px) {
@ -206,7 +206,7 @@ const showFooter = computed(() => {
padding: 11px 16px 13px;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
transition: border-color var(--t-color);
transition: border-color var(--vp-t-color);
}
.pager-link:hover {
@ -224,7 +224,7 @@ const showFooter = computed(() => {
font-weight: 500;
line-height: 20px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.title {
@ -233,6 +233,6 @@ const showFooter = computed(() => {
font-weight: 500;
line-height: 20px;
color: var(--vp-c-brand-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
</style>

6
theme/src/client/components/VPDocMeta.vue
View File

@ -75,7 +75,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
font-weight: 600;
line-height: 1.5;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc-title.padding {
@ -92,7 +92,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
font-size: 14px;
color: var(--vp-c-text-3);
border-bottom: solid 1px var(--vp-c-divider);
transition: color var(--t-color), border-bottom var(--t-color);
transition: color var(--vp-t-color), border-bottom var(--vp-t-color);
}
.vp-doc-meta p {
@ -110,7 +110,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
.vp-doc-meta .author .icon,
.vp-doc-meta .author span {
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc-meta .tag {

2
theme/src/client/components/VPDocOutlineItem.vue
View File

@ -47,7 +47,7 @@ function handleClick({ target: el }: Event) {
color: var(--vp-c-text-2);
text-overflow: ellipsis;
white-space: nowrap;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.outline-link:hover,

4
theme/src/client/components/VPEncryptForm.vue
View File

@ -84,7 +84,7 @@ async function onSubmit() {
border: 1px solid var(--vp-c-border);
border-radius: 4px;
outline: none;
transition: border-color var(--t-color), background-color var(--t-color);
transition: border-color var(--vp-t-color), background-color var(--vp-t-color);
}
.encrypt-input:focus {
@ -106,7 +106,7 @@ async function onSubmit() {
border: none;
border-radius: 4px;
outline: none;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.encrypt-button:hover {

4
theme/src/client/components/VPEncryptGlobal.vue
View File

@ -36,7 +36,7 @@ const title = computed(() => profile.value?.name || site.value.title)
width: 100%;
overflow-y: auto;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
@media (min-width: 768px) {
@ -95,6 +95,6 @@ const title = computed(() => profile.value?.name || site.value.title)
line-height: 1.5;
color: var(--vp-c-text-1);
text-align: center;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
</style>

2
theme/src/client/components/VPEncryptPage.vue
View File

@ -36,7 +36,7 @@ const { theme } = useData()
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: box-shadow, border-color;
}

8
theme/src/client/components/VPFlyout.vue
View File

@ -58,7 +58,7 @@ function onBlur() {
<style scoped>
.vp-flyout {
position: relative;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.text {
@ -68,14 +68,14 @@ function onBlur() {
font-weight: 500;
line-height: normal;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.icon {
width: 20px;
height: 20px;
fill: currentcolor;
transition: fill var(--t-color);
transition: fill var(--vp-t-color);
}
.menu {
@ -129,7 +129,7 @@ function onBlur() {
height: var(--vp-nav-height);
padding: 0 10px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.option-icon {

9
theme/src/client/components/VPFooter.vue
View File

@ -22,6 +22,7 @@ onMounted(() => {
ref="footer"
class="vp-footer"
:class="{ 'has-sidebar': hasSidebar }"
vp-footer
>
<div class="container">
<p
@ -45,7 +46,7 @@ onMounted(() => {
padding: 24px;
background-color: var(--vp-c-bg);
border-top: 1px solid var(--vp-c-gutter);
transition: border-top var(--t-color), background-color var(--t-color);
transition: border-top var(--vp-t-color), background-color var(--vp-t-color);
}
.footer-no-border .vp-footer {
@ -55,7 +56,7 @@ onMounted(() => {
.vp-footer p {
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-footer :deep(a) {
@ -63,8 +64,8 @@ onMounted(() => {
text-decoration-line: underline;
text-underline-offset: 2px;
transition:
color var(--t-color),
text-underline-offset var(--t-color);
color var(--vp-t-color),
text-underline-offset var(--vp-t-color);
}
.vp-footer :deep(a:hover) {

6
theme/src/client/components/VPFriends.vue
View File

@ -59,7 +59,7 @@ const groups = computed(() => matter.value.groups || [])
color: var(--vp-c-text-1);
text-align: center;
outline: none;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-friends .description {
@ -68,7 +68,7 @@ const groups = computed(() => matter.value.groups || [])
line-height: 28px;
color: var(--vp-c-text-1);
text-align: center;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.friends-list {
@ -130,7 +130,7 @@ const groups = computed(() => matter.value.groups || [])
line-height: 32px;
color: var(--vp-c-brand-1);
border: 0;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.edit-link-button:hover {

4
theme/src/client/components/VPFriendsGroup.vue
View File

@ -42,7 +42,7 @@ defineProps<{
text-align: center;
border-top: solid 1px var(--vp-c-divider);
outline: none;
transition: color var(--t-color), border-color var(--t-color);
transition: color var(--vp-t-color), border-color var(--vp-t-color);
}
.vp-friends-group .description {
@ -50,7 +50,7 @@ defineProps<{
line-height: 28px;
color: var(--vp-c-text-1);
text-align: center;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.friends-list {

6
theme/src/client/components/VPFriendsItem.vue
View File

@ -71,7 +71,7 @@ const friendStyle = computed(() => {
margin-bottom: 8px;
background-color: var(--vp-friends-bg-color);
border-radius: 6px;
transition: all var(--t-color);
transition: all var(--vp-t-color);
}
.avatar-link {
@ -100,7 +100,7 @@ const friendStyle = computed(() => {
font-size: 20px;
font-weight: 700;
color: var(--vp-friends-name-color);
transition: color var(--t-color), border-bottom var(--t-color);
transition: color var(--vp-t-color), border-bottom var(--vp-t-color);
}
.content :deep(.vp-social-links) {
@ -122,7 +122,7 @@ const friendStyle = computed(() => {
overflow: hidden;
line-height: 1.5;
color: var(--vp-friends-text-color);
transition: color var(--t-color);
transition: color var(--vp-t-color);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

4
theme/src/client/components/VPImage.vue
View File

@ -41,11 +41,11 @@ export default {
</template>
<style scoped>
html:not(.dark) .vp-image.dark {
html:not([data-theme="dark"]) .vp-image.dark {
display: none;
}
.dark .vp-image.light {
[data-theme="dark"] .vp-image.light {
display: none;
}
</style>

6
theme/src/client/components/VPLocalNav.vue
View File

@ -82,9 +82,9 @@ const showLocalNav = computed(() => {
border-top: 1px solid var(--vp-c-gutter);
border-bottom: 1px solid var(--vp-c-gutter);
transition:
border-color var(--t-color),
background-color var(--t-color),
border var(--t-color);
border-color var(--vp-t-color),
background-color var(--vp-t-color),
border var(--vp-t-color);
}
.vp-local-nav.fixed {

4
theme/src/client/components/VPLocalNavOutlineDropdown.vue
View File

@ -83,7 +83,7 @@ function scrollToTop() {
font-weight: 500;
line-height: 24px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-local-nav-outline-dropdown button:hover {
@ -125,7 +125,7 @@ function scrollToTop() {
border: 1px solid var(--vp-c-border);
border-radius: 8px;
box-shadow: var(--vp-shadow-3);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, border, box-shadow;
}

8
theme/src/client/components/VPMenu.vue
View File

@ -35,7 +35,7 @@ defineProps<{
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
box-shadow: var(--vp-shadow-3);
transition: background-color var(--t-color), border var(--t-color);
transition: background-color var(--vp-t-color), border var(--vp-t-color);
}
.vp-menu :deep(.group) {
@ -46,7 +46,7 @@ defineProps<{
.vp-menu :deep(.group + .group) {
padding: 11px 12px 12px;
border-top: 1px solid var(--vp-c-divider);
transition: border-top var(--t-color);
transition: border-top var(--vp-t-color);
}
.vp-menu :deep(.group:last-child) {
@ -56,7 +56,7 @@ defineProps<{
.vp-menu :deep(.group + .item) {
padding: 11px 16px 0;
border-top: 1px solid var(--vp-c-divider);
transition: border-top var(--t-color);
transition: border-top var(--vp-t-color);
}
.vp-menu :deep(.item) {
@ -70,7 +70,7 @@ defineProps<{
font-weight: 500;
line-height: 28px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-menu :deep(.action) {

4
theme/src/client/components/VPMenuGroup.vue
View File

@ -27,7 +27,7 @@ defineProps<{
padding: 12px 12px 0;
margin: 12px -12px 0;
border-top: 1px solid var(--vp-c-divider);
transition: border-top var(--t-color);
transition: border-top var(--vp-t-color);
}
.vp-menu-group:first-child {
@ -47,7 +47,7 @@ defineProps<{
font-weight: 600;
line-height: 32px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.title :deep(.vp-icon),

6
theme/src/client/components/VPMenuLink.vue
View File

@ -34,7 +34,7 @@ const { page } = useData()
padding: 12px 12px 0;
margin: 12px -12px 0;
border-top: 1px solid var(--vp-c-divider);
transition: border-top var(--t-color);
transition: border-top var(--vp-t-color);
}
.link {
@ -47,8 +47,8 @@ const { page } = useData()
white-space: nowrap;
border-radius: 6px;
transition:
background-color var(--t-color),
color var(--t-color);
background-color var(--vp-t-color),
color var(--vp-t-color);
}
.link:hover {

2
theme/src/client/components/VPPage.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="vp-page">
<slot name="page-top" />
<Content class="plume-content" />
<Content class="vp-doc plume-content" vp-content />
<slot name="page-bottom" />
</div>
</template>

11
theme/src/client/components/VPSidebar.vue
View File

@ -53,6 +53,7 @@ onMounted(() => {
ref="navEl"
class="vp-sidebar"
:class="{ open }"
vp-sidebar
@click.stop
>
<div class="curtain" />
@ -95,9 +96,9 @@ onMounted(() => {
box-shadow: var(--vp-c-shadow-3);
opacity: 0;
transition:
opacity var(--t-color),
background-color var(--t-color),
box-shadow var(--t-color),
opacity var(--vp-t-color),
background-color var(--vp-t-color),
box-shadow var(--vp-t-color),
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateX(-100%);
@ -113,7 +114,7 @@ onMounted(() => {
transform: translateX(0);
}
.dark .vp-sidebar {
[data-theme="dark"] .vp-sidebar {
box-shadow: var(--vp-shadow-1);
}
@ -157,7 +158,7 @@ onMounted(() => {
margin-right: -32px;
margin-left: -32px;
background-color: var(--vp-sidebar-bg-color);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
}

2
theme/src/client/components/VPSidebarGroup.vue
View File

@ -44,7 +44,7 @@ onBeforeUnmount(() => {
.group + .group {
padding-top: 10px;
border-top: 1px solid var(--vp-c-divider);
transition: border var(--t-color);
transition: border var(--vp-t-color);
}
@media (min-width: 960px) {

12
theme/src/client/components/VPSidebarItem.vue
View File

@ -138,7 +138,7 @@ function onCaretClick() {
bottom: 6px;
left: -17px;
width: 1px;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-sidebar-item.level-2.is-active > .item > .indicator,
@ -158,7 +158,7 @@ function onCaretClick() {
padding: 4px 0;
font-size: 14px;
line-height: 24px;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-sidebar-item.level-0 .text {
@ -217,14 +217,14 @@ function onCaretClick() {
margin-right: -7px;
color: var(--vp-c-text-3);
cursor: pointer;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.item :deep(.vp-icon) {
margin: 0 0.25rem 0 0;
font-size: 0.9em;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.item :deep(.vp-icon-img) {
@ -262,7 +262,7 @@ function onCaretClick() {
width: 18px;
height: 18px;
fill: currentcolor;
transition: transform var(--t-color);
transition: transform var(--vp-t-color);
transform: rotate(90deg);
}
@ -277,7 +277,7 @@ function onCaretClick() {
.vp-sidebar-item.level-5 .items {
padding-left: 16px;
border-left: 1px solid var(--vp-c-divider);
transition: border-left var(--t-color);
transition: border-left var(--vp-t-color);
}
.vp-sidebar-item.collapsed .items {

2
theme/src/client/components/VPSocialLink.vue
View File

@ -32,7 +32,7 @@ const svg = computed(() => {
width: 36px;
height: 36px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-social-link:hover {

2
theme/src/client/components/VPSwitch.vue
View File

@ -59,7 +59,7 @@
color: var(--vp-c-text-2);
}
.dark .icon :deep([class^="vpi-"]) {
[data-theme="dark"] .icon :deep([class^="vpi-"]) {
color: var(--vp-c-text-1);
transition: opacity 0.25s !important;
}

6
theme/src/client/components/VPSwitchAppearance.vue
View File

@ -39,15 +39,15 @@ watchPostEffect(() => {
opacity: 0;
}
.dark .sun {
[data-theme="dark"] .sun {
opacity: 0;
}
.dark .moon {
[data-theme="dark"] .moon {
opacity: 1;
}
.dark .vp-switch-appearance :deep(.check) {
[data-theme="dark"] .vp-switch-appearance :deep(.check) {
/* rtl:ignore */
transform: translateX(18px);
}

2
theme/src/client/components/global/VPBadge.vue
View File

@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
line-height: 22px;
border: 1px solid transparent;
border-radius: 12px;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color, background-color, border-color;
transform: translateY(-2px);
}

4
theme/src/client/components/global/VPCard.vue
View File

@ -42,7 +42,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: border-color var(--t-color), box-shadow var(--t-color);
transition: border-color var(--vp-t-color), box-shadow var(--vp-t-color);
}
.vp-card-wrapper:hover {
@ -62,7 +62,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
font-size: 20px;
font-weight: 700;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-card-wrapper .body :first-child {

4
theme/src/client/components/global/VPImageCard.vue
View File

@ -60,7 +60,7 @@ const date = computed(() => {
.vp-image-card {
margin: 16px 0;
box-shadow: var(--vp-shadow-2);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: box-shadow;
}
@ -91,7 +91,7 @@ const date = computed(() => {
background-color: rgba(0, 0, 0, 0.5);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
transition: transform var(--t-color);
transition: transform var(--vp-t-color);
transform: translateY(calc(100% - 60px));
}

2
theme/src/client/components/global/VPLinkCard.vue
View File

@ -39,7 +39,7 @@ defineProps<{
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: border-color var(--t-color), box-shadow var(--t-color), background-color var(--t-color);
transition: border-color var(--vp-t-color), box-shadow var(--vp-t-color), background-color var(--vp-t-color);
}
.vp-link-card:hover {

3
theme/src/client/composables/dark-mode.ts
View File

@ -24,6 +24,9 @@ export function setupDarkMode(app: App): void {
: appearance
? useDark({
storageKey: 'vuepress-theme-appearance',
attribute: 'data-theme',
valueLight: 'light',
valueDark: 'dark',
disableTransition,
initialValue: () =>
typeof appearance === 'string' ? appearance : 'auto',

14
theme/src/client/features/components/RepoCard.vue
View File

@ -46,7 +46,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
margin: 16px 0;
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
transition: border-color var(--t-color);
transition: border-color var(--vp-t-color);
}
.vp-repo-card:hover {
@ -78,7 +78,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
font-weight: 600;
color: var(--vp-c-brand-1);
text-decoration: none;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-repo-card .repo-name a:hover {
@ -93,7 +93,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
color: var(--vp-c-text-2);
border: solid 1px var(--vp-c-divider);
border-radius: 22px;
transition: color var(--t-color), border var(--t-color);
transition: color var(--vp-t-color), border var(--vp-t-color);
}
.vp-repo-card .repo-desc {
@ -101,7 +101,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
font-size: 14px;
line-height: 22px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-repo-card .repo-info {
@ -118,12 +118,12 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
gap: 0 4px;
align-items: center;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-repo-card .repo-info p [class^="vpi-github-"] {
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-repo-card .repo-language {
@ -137,7 +137,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7a.75.75 0 1 1-1.072 1.05A2.5 2.5 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.5 2.5 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.25.25 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z'/%3E%3C/svg%3E");
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
transform: translateY(2px);
}

3
theme/src/client/layouts/Layout.vue
View File

@ -31,6 +31,7 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
<div
v-if="frontmatter.pageLayout !== false && frontmatter.pageLayout !== 'custom'" class="theme-plume vp-layout"
:class="frontmatter.pageClass"
vp-container
>
<VPEncryptGlobal v-if="!isGlobalDecrypted" />
@ -175,7 +176,7 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
<slot name="layout-bottom" />
</template>
</div>
<Content v-else />
<Content v-else vp-container vp-content />
</template>
<style scoped>

6
theme/src/client/layouts/NotFound.vue
View File

@ -115,7 +115,7 @@ const { theme } = useData()
height: 1px;
margin: 24px auto 18px;
background-color: var(--vp-c-divider);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.quote {
@ -124,7 +124,7 @@ const { theme } = useData()
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.action {
@ -139,7 +139,7 @@ const { theme } = useData()
color: var(--vp-c-brand-1);
border: 1px solid var(--vp-c-brand-1);
border-radius: 16px;
transition: color var(--t-color), border-color var(--t-color);
transition: color var(--vp-t-color), border-color var(--vp-t-color);
}
.link:hover {

14
theme/src/client/styles/code.css
View File

@ -1,8 +1,8 @@
.dark .vp-code span {
[data-theme="dark"] .vp-code span {
color: var(--shiki-dark, rgba(235, 235, 245, 0.6));
}
html:not(.dark) .vp-code span {
html:not([data-theme="dark"]) .vp-code span {
color: var(--shiki-light, rgba(60, 60, 67, 0.78));
}
@ -12,7 +12,7 @@ html:not(.dark) .vp-code span {
margin: 16px -24px;
overflow-x: auto;
background-color: var(--vp-code-block-bg);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
@media (min-width: 640px) {
@ -41,7 +41,7 @@ html:not(.dark) .vp-code span {
font-size: 0.75rem;
color: var(--vp-code-line-number-color);
content: attr(data-title);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc div[class*="language-"] code {
@ -52,7 +52,7 @@ html:not(.dark) .vp-code span {
font-size: var(--vp-code-font-size);
line-height: var(--vp-code-line-height);
color: var(--vp-code-block-color);
transition: background-color var(--t-color), color var(--t-color);
transition: background-color var(--vp-t-color), color var(--vp-t-color);
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
@ -121,7 +121,7 @@ html:not(.dark) .vp-code span {
/* rtl:ignore */
border-right: 1px solid var(--vp-code-block-divider-color);
transition: border-right var(--t-color), color var(--t-color);
transition: border-right var(--vp-t-color), color var(--vp-t-color);
}
.vp-doc div[class*="language-"].line-numbers-mode .line-numbers .line-number {
@ -347,7 +347,7 @@ html:not(.dark) .vp-code span {
height: 44px;
cursor: pointer;
background: linear-gradient(to bottom, transparent 0%, var(--vp-code-bg-collapsed-lines) 50%, var(--vp-code-bg-collapsed-lines) 100%);
transition: --vp-code-bg-collapsed-lines var(--t-color);
transition: --vp-code-bg-collapsed-lines var(--vp-t-color);
}
.vp-doc div[class*="language-"].has-collapsed .collapsed-lines:hover {

24
theme/src/client/styles/content.css
View File

@ -31,7 +31,7 @@
line-height: 32px;
letter-spacing: -0.02em;
border-top: 1px solid var(--vp-c-divider);
transition: border-top var(--t-color), color var(--t-color);
transition: border-top var(--vp-t-color), color var(--vp-t-color);
}
.vp-doc h2:first-of-type {
@ -73,7 +73,7 @@
color: var(--vp-c-brand-1);
content: var(--vp-header-anchor-symbol);
opacity: 0;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc .header-anchor:hover {
@ -123,7 +123,7 @@
.vp-doc summary {
margin: 16px 0;
color: var(--vp-c-text-1);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc p {
@ -135,7 +135,7 @@
margin: 16px 0;
color: var(--vp-c-text-2);
border-left: 2px solid var(--vp-c-divider);
transition: border-color var(--t-color), color var(--t-color);
transition: border-color var(--vp-t-color), color var(--vp-t-color);
}
.vp-doc blockquote > p {
@ -148,7 +148,7 @@
color: var(--vp-c-brand-1);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--t-color), opacity var(--t-color), text-underline-offset var(--t-color);
transition: color var(--vp-t-color), opacity var(--vp-t-color), text-underline-offset var(--vp-t-color);
}
@media print {
@ -205,7 +205,7 @@
.vp-doc tr {
background-color: var(--vp-c-bg);
border-top: 1px solid var(--vp-c-divider);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: background-color, border-top;
}
@ -217,7 +217,7 @@
.vp-doc td {
padding: 8px 16px;
border: 1px solid var(--vp-c-divider);
transition: border var(--t-color);
transition: border var(--vp-t-color);
}
.vp-doc th {
@ -226,7 +226,7 @@
color: var(--vp-c-text-2);
text-align: left;
background-color: var(--vp-c-bg-soft);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color, background-color, border;
}
@ -241,7 +241,7 @@
margin: 16px 0;
border: none;
border-top: 1px solid var(--vp-c-divider);
transition: border-top var(--t-color);
transition: border-top var(--vp-t-color);
}
/**
@ -251,14 +251,14 @@
.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
font-size: var(--vp-code-font-size);
color: var(--vp-code-color);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc :not(pre) > code {
padding: 3px 6px;
background-color: var(--vp-code-bg);
border-radius: 4px;
transition: color var(--t-color), background-color var(--t-color);
transition: color var(--vp-t-color), background-color var(--vp-t-color);
}
.vp-doc h1 > code,
@ -270,7 +270,7 @@
.vp-doc a > code {
color: var(--vp-code-link-color);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc a:hover > code {

16
theme/src/client/styles/custom-block.css
View File

@ -7,7 +7,7 @@
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
box-shadow: var(--vp-shadow-2);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: border, box-shadow;
}
@ -17,7 +17,7 @@
justify-content: flex-start;
min-height: 0;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
transition: border-bottom var(--vp-t-color);
}
.vp-doc .demo-wrapper .demo-container {
@ -28,7 +28,7 @@
background-color: var(--vp-c-bg-alt);
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-doc .demo-wrapper.has-title .demo-head {
@ -67,7 +67,7 @@
height: 10px;
background-color: #ccc;
border-radius: 100%;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-doc .demo-wrapper .demo-ctrl i:nth-child(1) {
@ -93,7 +93,7 @@
background-color: var(--vp-c-bg-alt);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color, background-color;
}
@ -113,7 +113,7 @@
width: 8px;
height: 8px;
content: " ";
transition: background var(--t-color);
transition: background var(--vp-t-color);
}
.vp-doc .demo-wrapper .demo-title::before {
@ -175,7 +175,7 @@
background-color: var(--vp-c-bg-soft);
border: solid 1px var(--vp-c-divider);
border-radius: 100%;
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color, background-color, border-color;
}
@ -188,7 +188,7 @@
width: 1px;
content: "";
background-color: var(--vp-c-divider);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-doc .vp-steps > ol > li > :first-child,

34
theme/src/client/styles/md-enhance.css
View File

@ -158,7 +158,7 @@
overflow-y: hidden;
background-color: var(--vp-code-tab-bg);
box-shadow: inset 0 -1px var(--vp-code-tab-divider);
transition: background-color var(--t-color), box-shadow var(--t-color);
transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
}
@media (max-width: 639px) {
@ -176,7 +176,7 @@
color: var(--vp-code-tab-text-color);
white-space: nowrap;
border-bottom: 1px solid transparent;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc .vp-code-tab-nav::before {
@ -195,7 +195,7 @@
content: "";
background: transparent;
border-radius: 2px;
transition: background var(--t-color);
transition: background var(--vp-t-color);
}
.vp-doc .vp-code-tab-nav.active {
@ -227,7 +227,7 @@
.vp-doc .vp-code-demo {
overflow: hidden;
border: solid 1px var(--vp-c-divider);
transition: border var(--t-color);
transition: border var(--vp-t-color);
}
@media (max-width: 419px) {
@ -243,7 +243,7 @@
.vp-doc .vp-code-demo .vp-code-demo-header {
padding: 8px 12px;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-doc .vp-code-demo .vp-code-demo-code-wrapper {
@ -254,7 +254,7 @@
.vp-doc .vp-code-demo .vp-code-demo-toggle-button {
margin: 0 12px 0 8px;
background-color: var(--vp-c-gray-2);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-doc .vp-code-demo .vp-code-demo-toggle-button:hover {
@ -280,7 +280,7 @@
margin-bottom: 0;
border-bottom: 2px dashed var(--vp-c-divider);
border-radius: 0;
transition: border-bottom var(--t-color);
transition: border-bottom var(--vp-t-color);
}
.vp-doc .vp-code-demo .vp-code-demo-codes div[class*="language-"]:first-of-type {
@ -307,7 +307,7 @@
margin-bottom: 16px;
overflow: hidden;
border: solid 1px var(--vp-c-divider);
transition: border var(--t-color);
transition: border var(--vp-t-color);
}
@media (max-width: 419px) {
@ -325,13 +325,13 @@
padding: 8px 12px;
font-size: 16px;
line-height: 1.7;
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-doc .vp-md-demo .vp-md-demo-toggle-button {
margin: 0 12px 0 8px;
background-color: var(--vp-c-gray-2);
transition: background-color var(--t-color);
transition: background-color var(--vp-t-color);
}
.vp-doc .vp-md-demo .vp-md-demo-toggle-button:hover {
@ -349,7 +349,7 @@
.vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"] {
border-bottom: 2px dashed var(--vp-c-divider);
transition: border-bottom var(--t-color);
transition: border-bottom var(--vp-t-color);
}
.vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"]:first-of-type {
@ -414,14 +414,14 @@
margin: 1.5rem -0.75rem;
overflow: hidden;
border: 1px solid var(--vp-c-divider);
transition: border var(--t-color);
transition: border var(--vp-t-color);
}
.vp-doc .vp-tabs-nav {
padding: 0 12px;
background-color: var(--vp-code-tab-bg);
box-shadow: inset 0 -1px var(--vp-code-tab-divider);
transition: background-color var(--t-color), box-shadow var(--t-color);
transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
}
.vp-doc .vp-tab-nav {
@ -433,7 +433,7 @@
color: var(--vp-code-tab-text-color);
white-space: nowrap;
border-bottom: 1px solid transparent;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.vp-doc .vp-tab-nav::before {
@ -452,7 +452,7 @@
content: "";
background: transparent;
border-radius: 2px;
transition: background var(--t-color);
transition: background var(--vp-t-color);
}
.vp-doc .vp-tab-nav.active {
@ -506,7 +506,7 @@
border-radius: 6px;
box-shadow: var(--vp-shadow-1);
opacity: 0.75;
transition: border var(--t-color), box-shadow var(--t-color);
transition: border var(--vp-t-color), box-shadow var(--vp-t-color);
}
.vp-doc .footnotes::before {
@ -613,7 +613,7 @@
width: 1.5rem;
height: 1.5rem;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.mermaid-actions .preview-button:hover,

10
theme/src/client/styles/normalize.css vendored
View File

@ -44,7 +44,7 @@ body {
-webkit-text-size-adjust: 100%;
}
html.dark {
html[data-theme="dark"] {
color-scheme: dark;
}
@ -64,7 +64,7 @@ body {
html,
body {
color: var(--vp-c-text-1);
transition: var(--t-color);
transition: var(--vp-t-color);
transition-property: color, background-color;
scrollbar-width: thin;
@ -229,19 +229,19 @@ table {
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
input::placeholder,
textarea::placeholder {
color: var(--vp-c-text-3);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
input::-webkit-outer-spin-button,

14
theme/src/client/styles/search.css
View File

@ -31,7 +31,7 @@
--docsearch-footer-background: var(--vp-c-bg);
}
.dark .DocSearch {
[data-theme="dark"] .DocSearch {
--docsearch-modal-shadow: none;
--docsearch-footer-shadow: none;
--docsearch-logo-color: var(--vp-c-text-2);
@ -49,7 +49,7 @@
padding: 0;
margin: 0;
background: var(--docsearch-searchbox-background);
transition: border-color var(--t-color), background var(--t-color);
transition: border-color var(--vp-t-color), background var(--vp-t-color);
}
.vp-navbar-search .DocSearch-Button:hover {
@ -80,7 +80,7 @@
height: 16px;
color: var(--vp-c-text-1);
fill: currentcolor;
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.DocSearch-Button:hover .DocSearch-Search-Icon {
@ -94,7 +94,7 @@
font-size: 13px;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color var(--t-color);
transition: color var(--vp-t-color);
}
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
@ -127,7 +127,7 @@
/* rtl:begin:ignore */
border-right: none;
border-radius: 4px 0 0 4px;
transition: color var(--t-color), border-color var(--t-color);
transition: color var(--vp-t-color), border-color var(--vp-t-color);
}
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
@ -163,7 +163,7 @@
display: none;
}
.dark .DocSearch-Footer {
[data-theme="dark"] .DocSearch-Footer {
border-top: 1px solid var(--vp-c-divider);
}
@ -172,7 +172,7 @@
border: 1px solid var(--vp-c-brand-1);
}
.dark .DocSearch-Form {
[data-theme="dark"] .DocSearch-Form {
background-color: var(--vp-c-bg-soft);
}

51
theme/src/client/styles/vars.css
View File

@ -8,7 +8,7 @@
--vp-c-neutral-inverse: var(--vp-c-white);
}
.dark {
[data-theme="dark"] {
--vp-c-neutral: var(--vp-c-white);
--vp-c-neutral-inverse: var(--vp-c-black);
}
@ -74,7 +74,7 @@
--vp-c-sponsor: #db2777;
}
.dark {
[data-theme="dark"] {
--vp-c-gray-1: #515c67;
--vp-c-gray-2: #414853;
--vp-c-gray-3: #32363f;
@ -128,7 +128,7 @@
--vp-c-bg-safe: #f6f8fa;
}
.dark {
[data-theme="dark"] {
--vp-c-bg: #1b1b1f;
--vp-c-bg-alt: #161618;
--vp-c-bg-elv: #202127;
@ -154,7 +154,7 @@
--vp-c-gutter: #e2e2e3;
}
.dark {
[data-theme="dark"] {
--vp-c-border: #3c3f44;
--vp-c-divider: #2e2e32;
--vp-c-gutter: #000;
@ -179,7 +179,7 @@
--vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
}
.dark {
[data-theme="dark"] {
--vp-c-text-1: rgba(255, 255, 245, 0.86);
--vp-c-text-2: rgba(235, 235, 245, 0.6);
--vp-c-text-3: rgba(235, 235, 245, 0.38);
@ -297,7 +297,7 @@
--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
}
.dark {
[data-theme="dark"] {
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.27), 0 1px 2px rgba(0, 0, 0, 0.22);
--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.27);
--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
@ -305,6 +305,14 @@
--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.38);
}
/**
* Transitions
* -------------------------------------------------------------------------- */
:root {
--vp-t-color: 250ms ease;
--vp-t-transform: var(--vp-t-color);
}
/**
* Z-indexes
* -------------------------------------------------------------------------- */
@ -399,7 +407,7 @@
--vp-button-alt-active-bg: var(--vp-c-default-1);
}
.dark {
[data-theme="dark"] {
--vp-button-brand-bg: var(--vp-c-brand-2);
--vp-button-brand-hover-bg: var(--vp-c-brand-1);
--vp-button-brand-active-bg: var(--vp-c-brand-3);
@ -554,14 +562,14 @@
--code-tabs-nav-hover-color: var(--vp-code-block-bg);
}
.dark {
[data-theme="dark"] {
--code-tabs-nav-bg-color: #3a404c;
--code-tabs-nav-hover-color: #434a57;
}
/* md enhance hints */
:root,
html.dark {
[data-theme="dark"] {
/* important */
--important-title-color: var(--vp-c-text-1);
--important-bg-color: var(--vp-c-purple-soft);
@ -612,7 +620,6 @@ html.dark {
}
:root {
--t-color: 250ms ease;
--code-bg-color: var(--vp-code-block-bg);
--medium-zoom-bg-color: var(--vp-c-bg);
}
@ -641,7 +648,29 @@ html.dark {
--vp-mark-color-soft: var(--vp-c-brand-soft);
}
.dark {
[data-theme="dark"] {
--vp-mark-color: var(--vp-c-brand-3);
--vp-mark-color-soft: var(--vp-c-brand-soft);
}
/**
* Compatible with `vuepress` guidelines
* -------------------------------------------------------------------------- */
:root {
--vp-c-accent: var(--vp-c-brand-1);
--vp-c-accent-hover: var(--vp-c-brand-2);
--vp-c-accent-bg: var(--vp-c-brand-3);
--vp-c-accent-text: var(--vp-c-brand-1);
--vp-c-accent-soft: var(--vp-c-brand-soft);
--vp-c-text: var(--vp-c-text-1);
--vp-c-text-mute: var(--vp-c-text-2);
--vp-c-text-subtle: var(--vp-c-text-3);
--vp-c-shadow: var(--vp-shadow-3);
--vp-c-border-hard: var(--vp-c-border);
--vp-c-control: var(--vp-c-default-3);
--vp-c-control-hover: var(--vp-c-default-2);
--vp-c-control-disabled: var(--vp-c-default-soft);
}

6
theme/src/node/config/resolvePageHead.ts
View File

@ -12,12 +12,12 @@ export function resolvePageHead(page: Page, localeOptions: PlumeThemeLocaleOptio
'script',
{ id: 'check-dark-mode' },
appearance === 'force-dark'
? `document.documentElement.classList.add('dark')`
? `document.documentElement.dataset.theme = 'dark'`
: `;(function () {
const um= localStorage.getItem('vuepress-theme-appearance') || '${appearance}';
const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (um === 'dark' || (um !== 'light' && sm)) {
document.documentElement.classList.add('dark');
const isDark = um === 'dark' || (um !== 'light' && sm);
document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
}
})();`.replace(/^\s+|\s+$/gm, '').replace(/\n/g, ''),
])