Add monochrome theme with grayscale filter

docs/.vitepress/theme/components/ColorPicker.vue

@@ -211,12 +211,8 @@ watch(selectedColor, async (color) => {
   if (!color) return;
   const theme = generateThemeFromColor(color)
   themeRegistry[`color-${color}`] = theme
-  // Explicitly set the theme to override any previous selection
   await nextTick()
-  console.log('Setting theme to:', `color-${color}`)
-  console.log('Current themeName:', themeName ? themeName.value : undefined, 'mode:', mode ? (mode as any).value : undefined)
   setTheme(`color-${color}`)
-  console.log('After setTheme, themeName:', themeName ? themeName.value : undefined)
 })
 
 const toggleAmoled = () => {

docs/.vitepress/theme/style.scss

@@ -81,6 +81,15 @@
   --vp-custom-block-danger-text-deep: theme('colors.carnation.200');
 }
 
+.monochrome {
+
+  [class*='i-'],
+  svg,
+  img:not(.VPImage) {
+    filter: grayscale(100%);
+  }
+}
+
 .vp-doc a {
   color: var(--vp-c-brand-1);
   text-decoration: underline;
@@ -138,17 +147,13 @@
 */
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
-    120deg,
       #c4b5fd 30%,
-    #7bc5e4
+      #7bc5e4);
-  );
 
-  --vp-home-hero-image-background-image: linear-gradient(
+  --vp-home-hero-image-background-image: linear-gradient(-45deg,
-    -45deg,
       #c4b5fd 50%,
-    #47caff 50%
+      #47caff 50%);
-  );
   --vp-home-hero-image-filter: blur(44px);
 }
 
@@ -223,6 +228,7 @@
     animation: nprogress-spinner 400ms linear infinite;
   }
 }
+
 .nprogress-custom-parent {
   overflow: hidden;
   position: relative;
@@ -253,7 +259,7 @@
   }
 }
 
-#VPContent strong > a {
+#VPContent strong>a {
   font-weight: bold;
 }
 

docs/.vitepress/theme/themes/configs/index.ts

@@ -14,10 +14,12 @@
  *  limitations under the License.
  */
 import { catppuccinTheme } from './catppuccin'
+import { monochromeTheme } from './monochrome'
 import type { ThemeRegistry } from '../types'
 
 export const themeRegistry: ThemeRegistry = {
   catppuccin: catppuccinTheme,
+  monochrome: monochromeTheme,
 }
 
-export { catppuccinTheme }
+export { catppuccinTheme, monochromeTheme }

docs/.vitepress/theme/themes/configs/monochrome.ts

@@ -0,0 +1,151 @@
+import type { Theme } from '../types'
+
+export const monochromeTheme: Theme = {
+    name: 'monochrome',
+    displayName: 'Monochrome',
+    preview: '#808080',
+    modes: {
+        light: {
+            brand: {
+                1: '#000000',
+                2: '#1a1a1a',
+                3: '#333333',
+                soft: '#666666'
+            },
+            bg: '#FFFFFF',
+            bgAlt: '#F5F5F5',
+            bgElv: 'rgba(255, 255, 255, 0.95)',
+            bgMark: '#E0E0E0',
+            text: {
+                1: '#000000',
+                2: '#333333',
+                3: '#808080'
+            },
+            button: {
+                brand: {
+                    bg: '#000000',
+                    border: '#000000',
+                    text: '#FFFFFF',
+                    hoverBorder: '#333333',
+                    hoverText: '#FFFFFF',
+                    hoverBg: '#333333',
+                    activeBorder: '#000000',
+                    activeText: '#FFFFFF',
+                    activeBg: '#000000'
+                },
+                alt: {
+                    bg: '#808080',
+                    text: '#FFFFFF',
+                    hoverBg: '#666666',
+                    hoverText: '#FFFFFF'
+                }
+            },
+            customBlock: {
+                info: {
+                    bg: '#F5F5F5',
+                    border: '#000000',
+                    text: '#000000',
+                    textDeep: '#000000'
+                },
+                tip: {
+                    bg: '#F5F5F5',
+                    border: '#333333',
+                    text: '#1a1a1a',
+                    textDeep: '#000000'
+                },
+                warning: {
+                    bg: '#F5F5F5',
+                    border: '#666666',
+                    text: '#333333',
+                    textDeep: '#1a1a1a'
+                },
+                danger: {
+                    bg: '#F5F5F5',
+                    border: '#000000',
+                    text: '#000000',
+                    textDeep: '#000000'
+                }
+            },
+            selection: {
+                bg: '#CCCCCC'
+            },
+            home: {
+                heroNameColor: '#000000',
+                heroNameBackground: '#FFFFFF',
+                heroImageBackground: 'linear-gradient(135deg, #E0E0E0 0%, #FFFFFF 100%)',
+                heroImageFilter: 'blur(44px)'
+            }
+        },
+        dark: {
+            brand: {
+                1: '#FFFFFF',
+                2: '#E0E0E0',
+                3: '#CCCCCC',
+                soft: '#999999'
+            },
+            bg: '#000000',
+            bgAlt: '#0A0A0A',
+            bgElv: 'rgba(0, 0, 0, 0.95)',
+            bgMark: '#1A1A1A',
+            text: {
+                1: '#FFFFFF',
+                2: '#CCCCCC',
+                3: '#808080'
+            },
+            button: {
+                brand: {
+                    bg: '#FFFFFF',
+                    border: '#FFFFFF',
+                    text: '#000000',
+                    hoverBorder: '#CCCCCC',
+                    hoverText: '#000000',
+                    hoverBg: '#CCCCCC',
+                    activeBorder: '#FFFFFF',
+                    activeText: '#000000',
+                    activeBg: '#FFFFFF'
+                },
+                alt: {
+                    bg: '#808080',
+                    text: '#000000',
+                    hoverBg: '#999999',
+                    hoverText: '#000000'
+                }
+            },
+            customBlock: {
+                info: {
+                    bg: '#1A1A1A',
+                    border: '#FFFFFF',
+                    text: '#FFFFFF',
+                    textDeep: '#FFFFFF'
+                },
+                tip: {
+                    bg: '#1A1A1A',
+                    border: '#CCCCCC',
+                    text: '#E0E0E0',
+                    textDeep: '#FFFFFF'
+                },
+                warning: {
+                    bg: '#1A1A1A',
+                    border: '#999999',
+                    text: '#CCCCCC',
+                    textDeep: '#E0E0E0'
+                },
+                danger: {
+                    bg: '#1A1A1A',
+                    border: '#FFFFFF',
+                    text: '#FFFFFF',
+                    textDeep: '#FFFFFF'
+                }
+            },
+            selection: {
+                bg: '#333333'
+            },
+            home: {
+                heroNameColor: '#FFFFFF',
+                heroNameBackground: '#000000',
+                heroImageBackground: 'linear-gradient(135deg, #1A1A1A 0%, #000000 100%)',
+                heroImageFilter: 'blur(44px)'
+            }
+        }
+    }
+}

docs/.vitepress/theme/themes/themeHandler.ts

@@ -95,6 +95,12 @@ export class ThemeHandler {
 
     this.applyDOMClasses(currentMode)
     this.applyCSSVariables(modeColors, theme)
+
+    if (theme.name === 'monochrome') {
+      root.classList.add('monochrome')
+    } else {
+      root.classList.remove('monochrome')
+    }
   }
 
   private applyDOMClasses(mode: DisplayMode) {
@@ -170,20 +176,6 @@ export class ThemeHandler {
       root.style.removeProperty('--vp-c-text-3')
     }
 
-    // Debug: log applied text color variables so we can inspect in console
-    try {
-      // eslint-disable-next-line no-console
-      console.log('[ThemeHandler] applied text vars', {
-        theme: theme.name,
-        mode: this.state.value.currentMode,
-        vp_text_1: root.style.getPropertyValue('--vp-c-text-1'),
-        vp_text_2: root.style.getPropertyValue('--vp-c-text-2'),
-        vp_text_3: root.style.getPropertyValue('--vp-c-text-3')
-      })
-    } catch (e) {
-      // ignore
-    }
-
     // Apply button colors
     root.style.setProperty('--vp-button-brand-bg', colors.button.brand.bg)
     root.style.setProperty('--vp-button-brand-border', colors.button.brand.border)