refactor(docs): remove ColorCustomizer from header

The color picker button in the header is superseded by the Theme Editor
page which provides full theme customization including primary color.

Author: wangdicoder

apps/docs/src/components/header/color-customizer.tsx

@@ -113,28 +113,6 @@
     }
   }
 
-  .ty-color-picker {
-    display: inline-flex;
-  }
-
-  &__color-swatch {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: 1px solid var(--ty-color-border);
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.2s;
-    padding: 0;
-
-    &:hover {
-      border-color: var(--ty-color-primary);
-      box-shadow: 0 0 0 2px var(--ty-color-primary-bg);
-    }
-  }
-
   &__theme-toggle {
     display: inline-flex;
     align-items: center;
@@ -171,7 +149,6 @@
 
     &__version,
     &__locale-toggle,
-    &__color-swatch,
     &__theme-toggle {
       display: none;
     }

apps/docs/src/components/header/header.scss

@@ -8,7 +8,6 @@ import { useSidebarToggle } from '../../context/sidebar-toggle-context';
 import { useLocaleContext } from '../../context/locale-context';
 import { ThemeToggle } from './theme-toggle';
 import { LocaleToggle } from './locale-toggle';
-import { ColorCustomizer } from './color-customizer';
 import logoSvg from '../../assets/logo/logo.svg';
 
 const { version, repository } = pkg;
@@ -76,9 +75,6 @@ export const Header = (): React.ReactElement => {
           <li className="header__nav-item">
             <LocaleToggle />
           </li>
-          <li className="header__nav-item">
-            <ColorCustomizer />
-          </li>
           <li className="header__nav-item">
             <ThemeToggle />
           </li>

apps/docs/src/components/header/index.tsx

@@ -4,7 +4,6 @@ import { deriveAllTokens } from '../utils/color-utils';
 import { applyTokens, clearAllTokenOverrides } from '../utils/apply-theme';
 
 const STORAGE_KEY = 'ty-theme-editor-overrides';
-const PRIMARY_COLOR_KEY = 'ty-primary-color';
 
 function loadFromStorage(): Record<string, string> {
   try {
@@ -70,13 +69,6 @@ export function useThemeState(): ThemeState {
       applyTokens(derived);
     }
 
-    // Sync primary color with header ColorCustomizer
-    if (newSeeds['color-primary']) {
-      localStorage.setItem(PRIMARY_COLOR_KEY, newSeeds['color-primary']);
-    } else {
-      localStorage.removeItem(PRIMARY_COLOR_KEY);
-    }
-
     // Persist
     saveToStorage(newSeeds);
   }, []);
@@ -140,7 +132,6 @@ export function useThemeState(): ThemeState {
     appliedRef.current = {};
     setSeeds({});
     saveToStorage({});
-    localStorage.removeItem(PRIMARY_COLOR_KEY);
   }, []);
 
   const isOverridden = useCallback(