From e83414abf361fb313dc92ebb9ba594cdd30ab410 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Sat, 28 Feb 2026 23:08:27 +0800
Subject: [PATCH] feat(theme): implement dynamic theme logo with reactive color
 updates

---
 ccw/frontend/src/components/icons/CCWLogo.tsx | 46 ++++++++++++-
 ccw/frontend/src/components/layout/Header.tsx |  2 +-
 ccw/frontend/src/index.css                    | 14 +++-
 .../theme/components/ProfessionalHome.vue     | 19 ++++--
 .../.vitepress/theme/components/ThemeLogo.vue | 64 +++++++++++++++++++
 docs/.vitepress/theme/layouts/Layout.vue      | 18 ++++++
 docs/.vitepress/theme/styles/custom.css       | 47 ++++++++------
 7 files changed, 179 insertions(+), 31 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/ThemeLogo.vue

diff --git a/ccw/frontend/src/components/icons/CCWLogo.tsx b/ccw/frontend/src/components/icons/CCWLogo.tsx
index 618d4596..9127d86d 100644
--- a/ccw/frontend/src/components/icons/CCWLogo.tsx
+++ b/ccw/frontend/src/components/icons/CCWLogo.tsx
@@ -3,6 +3,7 @@
 // ========================================
 // Line-style logo for Claude Code Workflow
 
+import { useEffect, useState } from 'react';
 import { cn } from '@/lib/utils';
 
 interface CCWLogoProps {
@@ -14,11 +15,54 @@ interface CCWLogoProps {
   showDot?: boolean;
 }
 
+/**
+ * Hook to get reactive theme accent color
+ */
+function useThemeAccentColor(): string {
+  const [accentColor, setAccentColor] = useState<string>(() => {
+    if (typeof document === 'undefined') return 'hsl(220, 60%, 65%)';
+    const root = document.documentElement;
+    const accentValue = getComputedStyle(root).getPropertyValue('--accent').trim();
+    return accentValue ? `hsl(${accentValue})` : 'hsl(220, 60%, 65%)';
+  });
+
+  useEffect(() => {
+    const updateAccentColor = () => {
+      const root = document.documentElement;
+      const accentValue = getComputedStyle(root).getPropertyValue('--accent').trim();
+      setAccentColor(accentValue ? `hsl(${accentValue})` : 'hsl(220, 60%, 65%)');
+    };
+
+    // Initial update
+    updateAccentColor();
+
+    // Watch for theme changes via MutationObserver
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'data-theme') {
+          updateAccentColor();
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return accentColor;
+}
+
 /**
  * Line-style CCW logo component
  * Features three horizontal lines with a status dot that follows theme color
  */
 export function CCWLogo({ size = 24, className, showDot = true }: CCWLogoProps) {
+  const accentColor = useThemeAccentColor();
+
   return (
     <svg
       width={size}
@@ -27,7 +71,7 @@ export function CCWLogo({ size = 24, className, showDot = true }: CCWLogoProps)
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={cn('ccw-logo', className)}
-      style={{ color: 'hsl(var(--accent))' }}
+      style={{ color: accentColor }}
       aria-label="Claude Code Workflow"
     >
       {/* Three horizontal lines - line style */}
diff --git a/ccw/frontend/src/components/layout/Header.tsx b/ccw/frontend/src/components/layout/Header.tsx
index fbc1fada..2462c80d 100644
--- a/ccw/frontend/src/components/layout/Header.tsx
+++ b/ccw/frontend/src/components/layout/Header.tsx
@@ -74,7 +74,7 @@ export function Header({
           to="/"
           className="flex items-center gap-2 text-lg font-semibold hover:opacity-80 transition-opacity"
         >
-          <CCWLogo size={24} className="text-primary" />
+          <CCWLogo size={24} />
           <span className="hidden sm:inline text-primary">{formatMessage({ id: 'navigation.header.brand' })}</span>
           <span className="sm:hidden text-primary">{formatMessage({ id: 'navigation.header.brandShort' })}</span>
         </Link>
diff --git a/ccw/frontend/src/index.css b/ccw/frontend/src/index.css
index 125cb095..1e2a9238 100644
--- a/ccw/frontend/src/index.css
+++ b/ccw/frontend/src/index.css
@@ -870,6 +870,16 @@
 /* ===========================
    CCW Logo
    =========================== */
-.ccw-logo {
-  color: hsl(var(--accent));
+.ccw-logo,
+svg.ccw-logo,
+header .ccw-logo {
+  color: hsl(var(--accent)) !important;
 }
+
+/* Ensure dot inherits color */
+.ccw-logo circle,
+svg.ccw-logo circle {
+  fill: currentColor;
+}
+
+/* Theme-specific accent colors are applied automatically via --accent variable */
diff --git a/docs/.vitepress/theme/components/ProfessionalHome.vue b/docs/.vitepress/theme/components/ProfessionalHome.vue
index 87a095c1..7016320b 100644
--- a/docs/.vitepress/theme/components/ProfessionalHome.vue
+++ b/docs/.vitepress/theme/components/ProfessionalHome.vue
@@ -509,9 +509,9 @@ onUnmounted(() => {
 }
 
 .section-container {
-  max-width: 1152px;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 0;
+  padding: 0 2rem;
   width: 100%;
 }
 
@@ -529,13 +529,13 @@ onUnmounted(() => {
 }
 
 .hero-container {
-  max-width: 1152px;
+  max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   align-items: center;
-  padding: 0;
+  padding: 0 2rem;
   width: 100%;
 }
 
@@ -568,7 +568,7 @@ onUnmounted(() => {
 }
 
 .hero-title {
-  font-size: 3.5rem;
+  font-size: 2.75rem;
   line-height: 1.15;
   font-weight: 800;
   margin-bottom: 1.25rem;
@@ -863,8 +863,10 @@ onUnmounted(() => {
   grid-template-columns: 1fr 1.2fr;
   gap: 3rem;
   align-items: center;
-  padding: 5rem 0;
+  padding: 5rem 2rem;
   width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 .json-text h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--vp-c-text-1); line-height: 1.2; }
 .json-text p { font-size: 1.05rem; color: var(--vp-c-text-2); margin-bottom: 2rem; line-height: 1.7; }
@@ -910,6 +912,9 @@ onUnmounted(() => {
   grid-template-columns: 0.85fr 1.15fr;
   gap: 3rem;
   align-items: start;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
 }
 
 .quickstart-title {
@@ -1037,6 +1042,8 @@ onUnmounted(() => {
 .cta-card {
   text-align: center;
   padding: 3.5rem 2rem;
+  max-width: 800px;
+  margin: 0 auto;
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
   border-radius: 24px;
diff --git a/docs/.vitepress/theme/components/ThemeLogo.vue b/docs/.vitepress/theme/components/ThemeLogo.vue
new file mode 100644
index 00000000..846621ba
--- /dev/null
+++ b/docs/.vitepress/theme/components/ThemeLogo.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const dotColor = ref('var(--vp-c-primary)')
+
+function updateDotColor() {
+  if (typeof document === 'undefined') return
+
+  const root = document.documentElement
+  const style = getComputedStyle(root)
+  const primaryColor = style.getPropertyValue('--vp-c-primary').trim()
+  dotColor.value = primaryColor || 'currentColor'
+}
+
+let observer: MutationObserver | null = null
+
+onMounted(() => {
+  updateDotColor()
+
+  // Watch for theme changes via MutationObserver
+  observer = new MutationObserver(() => {
+    updateDotColor()
+  })
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme', 'class'],
+  })
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    class="theme-logo"
+    aria-label="Claude Code Workflow"
+  >
+    <!-- Three horizontal lines - use currentColor to inherit from text -->
+    <line x1="3" y1="6" x2="18" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <line x1="3" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <line x1="3" y1="18" x2="12" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <!-- Status dot - follows theme primary color -->
+    <circle cx="19" cy="17" r="3" :style="{ fill: dotColor }"/>
+  </svg>
+</template>
+
+<style scoped>
+.theme-logo {
+  width: 24px;
+  height: 24px;
+  color: var(--vp-c-text-1);
+}
+
+.theme-logo circle {
+  fill: var(--vp-c-primary);
+  transition: fill 0.3s ease;
+}
+</style>
diff --git a/docs/.vitepress/theme/layouts/Layout.vue b/docs/.vitepress/theme/layouts/Layout.vue
index 9f9f5ae3..703dd0d3 100644
--- a/docs/.vitepress/theme/layouts/Layout.vue
+++ b/docs/.vitepress/theme/layouts/Layout.vue
@@ -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;
diff --git a/docs/.vitepress/theme/styles/custom.css b/docs/.vitepress/theme/styles/custom.css
index cbace5ea..a733cde0 100644
--- a/docs/.vitepress/theme/styles/custom.css
+++ b/docs/.vitepress/theme/styles/custom.css
@@ -63,10 +63,8 @@
 }
 
 /* Adjust sidebar and content layout */
-.VPDoc,
-.VPDoc[data-v-343c73d6] {
-  padding-left: var(--vp-sidebar-width) !important;
-}
+/* NOTE: Removed duplicate padding-left - VitePress already handles sidebar layout */
+/* .VPDoc, .VPDoc[data-v-343c73d6] { padding-left: var(--vp-sidebar-width) !important; } */
 
 /* Right side outline (TOC) adjustments */
 .VPDocOutline {
@@ -82,34 +80,41 @@
 /* ============================================
  * Home Page Override
  * ============================================ */
-.VPHome {
-  padding-bottom: 0;
-}
 
-/* Remove horizontal padding for home page only (has .VPHome class) */
-.VPHome .VPDoc {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.VPHome .VPDoc .content-container {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+/* Use :has() to detect home page (contains .pro-home) */
+.VPContent:has(.pro-home) {
+  padding: 0 !important;
+  margin: 0 !important;
   max-width: 100% !important;
 }
 
-.VPHome .VPDoc .content {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+.Layout:has(.pro-home) {
+  max-width: 100% !important;
 }
 
-.VPHome .VPContent {
+/* ProfessionalHome component full width */
+.pro-home {
+  max-width: 100% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  width: 100% !important;
+}
+
+/* Ensure all sections extend to full width */
+.pro-home .hero-section,
+.pro-home .features-section,
+.pro-home .pipeline-section,
+.pro-home .json-section,
+.pro-home .quickstart-section,
+.pro-home .cta-section {
+  width: 100% !important;
+  margin: 0 !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
 
 .VPHomeHero {
-  padding: 80px 24px;
+  padding: 80px 0;
   background: linear-gradient(180deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
 }