catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme): implement dynamic theme logo with reactive color updates

Browse Source
This commit is contained in:
catlog22
2026-02-28 23:08:27 +08:00
parent e42597b1bc
commit e83414abf3
7 changed files with 179 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/.vitepress/theme/layouts/Layout.vue
View File

@@ -2,6 +2,7 @@
import DefaultTheme from 'vitepress/theme'
import { onBeforeUnmount, onMounted } from 'vue'
import { useDynamicIcon } from '../composables/useDynamicIcon'
import ThemeLogo from '../components/ThemeLogo.vue'
let mediaQuery: MediaQueryList | null = null
let systemThemeChangeHandler: (() => void) | null = null
@@ -50,6 +51,11 @@ onBeforeUnmount(() => {
<template>
<DefaultTheme.Layout>
<!-- Custom logo in navbar that follows theme color -->
<template #nav-bar-title-before>
<ThemeLogo class="nav-logo" />
</template>
<template #home-hero-after>
<div class="hero-extensions">
<div class="hero-stats">
@@ -120,6 +126,18 @@ onBeforeUnmount(() => {
padding-left: 16px;
}
.nav-logo {
width: 24px;
height: 24px;
margin-right: 8px;
flex-shrink: 0;
}
/* Hide the default VitePress logo image since we use our custom component */
:deep(.VPNavBarTitle .logo) {
display: none;
}
.skip-link {
position: absolute;
top: -100px;