@zpress/ui 0.5.1 → 0.6.0

package/dist/theme/components/nav/theme-switcher.tsx

@@ -11,12 +11,25 @@ interface ThemeOption {
   readonly label: string
   readonly swatch: string
   readonly defaultColorMode: 'dark' | 'light' | 'toggle'
+  readonly modes: readonly ('dark' | 'light')[]
 }
 
 const THEME_OPTIONS: readonly ThemeOption[] = [
-  { name: 'base', label: 'Base', swatch: '#a78bfa', defaultColorMode: 'toggle' },
-  { name: 'midnight', label: 'Midnight', swatch: '#60a5fa', defaultColorMode: 'dark' },
-  { name: 'arcade', label: 'Arcade', swatch: '#00ff88', defaultColorMode: 'dark' },
+  {
+    name: 'base',
+    label: 'Base',
+    swatch: '#a78bfa',
+    defaultColorMode: 'toggle',
+    modes: ['dark', 'light'],
+  },
+  {
+    name: 'midnight',
+    label: 'Midnight',
+    swatch: '#60a5fa',
+    defaultColorMode: 'dark',
+    modes: ['dark'],
+  },
+  { name: 'arcade', label: 'Arcade', swatch: '#00ff88', defaultColorMode: 'dark', modes: ['dark'] },
 ]
 
 const VALID_THEME_NAMES = new Set(THEME_OPTIONS.map((t) => t.name))
@@ -52,6 +65,8 @@ function applyTheme(theme: ThemeOption): void {
   html.dataset.zpTheme = theme.name
   localStorage.setItem('zpress-theme', theme.name)
 
+  html.dataset.zpModes = theme.modes.join(' ')
+
   if (theme.defaultColorMode === 'dark') {
     // 'rp-dark' is Rspress's dark mode class; 'dark' is added for Tailwind compatibility
     html.classList.add('rp-dark', 'dark')

package/dist/theme/components/theme-provider.tsx

@@ -6,6 +6,16 @@ declare const __ZPRESS_COLOR_MODE__: string
 declare const __ZPRESS_THEME_COLORS__: string
 declare const __ZPRESS_THEME_DARK_COLORS__: string
 
+/**
+ * Supported color modes per built-in theme — used to set `data-zp-modes`
+ * so the appearance toggle is hidden for single-mode themes.
+ */
+const THEME_MODES: Readonly<Record<string, string>> = {
+  base: 'dark light',
+  midnight: 'dark',
+  arcade: 'dark',
+}
+
 const COLOR_VAR_MAP: Record<string, readonly string[]> = {
   brand: ['--zp-c-brand-1', '--rp-c-brand'],
   brandLight: ['--rp-c-brand-light'],
@@ -167,7 +177,15 @@ export function ThemeProvider(): React.ReactElement | null {
     // 1. Set theme attribute
     html.dataset.zpTheme = themeName
 
-    // 2. Force color mode if not toggle
+    // 2. Set supported modes — hides the appearance toggle for single-mode themes
+    const modes = THEME_MODES[themeName]
+    if (modes) {
+      html.dataset.zpModes = modes
+    } else {
+      html.dataset.zpModes = 'dark light'
+    }
+
+    // 3. Force color mode if not toggle
     if (colorMode === 'dark') {
       html.classList.add('rp-dark', 'dark')
       html.dataset.dark = 'true'
@@ -186,12 +204,12 @@ export function ThemeProvider(): React.ReactElement | null {
       }
     }
 
-    // 3. Apply base color overrides
+    // 4. Apply base color overrides
     if (hasColors) {
       applyColorOverrides(html, colors)
     }
 
-    // 4. Observe dark mode changes for dark-specific overrides
+    // 5. Observe dark mode changes for dark-specific overrides
     if (hasDarkColors) {
       const isDark = html.classList.contains('rp-dark')
       if (isDark) {
@@ -214,7 +232,7 @@ export function ThemeProvider(): React.ReactElement | null {
 
       observer.observe(html, { attributes: true, attributeFilter: ['class'] })
 
-      // 5. Dismiss loading overlay
+      // 6. Dismiss loading overlay
       const cancelLoader = dismissLoader(html)
 
       return () => {
@@ -223,7 +241,7 @@ export function ThemeProvider(): React.ReactElement | null {
       }
     }
 
-    // 5. Dismiss loading overlay (no dark-color observer needed)
+    // 6. Dismiss loading overlay (no dark-color observer needed)
     return dismissLoader(html)
   }, [])
 

package/dist/theme/styles/overrides/rspress.css

@@ -32,6 +32,12 @@ html .rp-button--big {
   border-radius: 9999px;
 }
 
+/* ── Single-mode themes — hide the appearance toggle when only one mode is supported ── */
+html[data-zp-modes='dark'] .rp-appearance,
+html[data-zp-modes='light'] .rp-appearance {
+  display: none;
+}
+
 /* ── Tables ──────────────────────────────────────────────── */
 html table {
   border-radius: var(--rp-radius);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zpress/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Rspress plugin, theme components, and styles for zpress",
   "keywords": [
     "react",
@@ -52,9 +52,9 @@
     "@iconify-json/vscode-icons": "^1.2.45",
     "@iconify/react": "^6.0.2",
     "ts-pattern": "^5.9.0",
-    "@zpress/config": "0.2.1",
-    "@zpress/core": "0.6.1",
-    "@zpress/theme": "0.2.1"
+    "@zpress/config": "0.2.2",
+    "@zpress/core": "0.6.2",
+    "@zpress/theme": "0.3.0"
   },
   "devDependencies": {
     "@rslib/core": "^0.20.0",
@@ -79,6 +79,7 @@
     "build": "rslib build",
     "postbuild": "node scripts/minify-head.mjs",
     "dev": "rslib build --watch --no-clean",
+    "test": "vitest run",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/theme/components/nav/theme-switcher.tsx

@@ -11,12 +11,25 @@ interface ThemeOption {
   readonly label: string
   readonly swatch: string
   readonly defaultColorMode: 'dark' | 'light' | 'toggle'
+  readonly modes: readonly ('dark' | 'light')[]
 }
 
 const THEME_OPTIONS: readonly ThemeOption[] = [
-  { name: 'base', label: 'Base', swatch: '#a78bfa', defaultColorMode: 'toggle' },
-  { name: 'midnight', label: 'Midnight', swatch: '#60a5fa', defaultColorMode: 'dark' },
-  { name: 'arcade', label: 'Arcade', swatch: '#00ff88', defaultColorMode: 'dark' },
+  {
+    name: 'base',
+    label: 'Base',
+    swatch: '#a78bfa',
+    defaultColorMode: 'toggle',
+    modes: ['dark', 'light'],
+  },
+  {
+    name: 'midnight',
+    label: 'Midnight',
+    swatch: '#60a5fa',
+    defaultColorMode: 'dark',
+    modes: ['dark'],
+  },
+  { name: 'arcade', label: 'Arcade', swatch: '#00ff88', defaultColorMode: 'dark', modes: ['dark'] },
 ]
 
 const VALID_THEME_NAMES = new Set(THEME_OPTIONS.map((t) => t.name))
@@ -52,6 +65,8 @@ function applyTheme(theme: ThemeOption): void {
   html.dataset.zpTheme = theme.name
   localStorage.setItem('zpress-theme', theme.name)
 
+  html.dataset.zpModes = theme.modes.join(' ')
+
   if (theme.defaultColorMode === 'dark') {
     // 'rp-dark' is Rspress's dark mode class; 'dark' is added for Tailwind compatibility
     html.classList.add('rp-dark', 'dark')

package/src/theme/components/theme-provider.tsx

@@ -6,6 +6,16 @@ declare const __ZPRESS_COLOR_MODE__: string
 declare const __ZPRESS_THEME_COLORS__: string
 declare const __ZPRESS_THEME_DARK_COLORS__: string
 
+/**
+ * Supported color modes per built-in theme — used to set `data-zp-modes`
+ * so the appearance toggle is hidden for single-mode themes.
+ */
+const THEME_MODES: Readonly<Record<string, string>> = {
+  base: 'dark light',
+  midnight: 'dark',
+  arcade: 'dark',
+}
+
 const COLOR_VAR_MAP: Record<string, readonly string[]> = {
   brand: ['--zp-c-brand-1', '--rp-c-brand'],
   brandLight: ['--rp-c-brand-light'],
@@ -167,7 +177,15 @@ export function ThemeProvider(): React.ReactElement | null {
     // 1. Set theme attribute
     html.dataset.zpTheme = themeName
 
-    // 2. Force color mode if not toggle
+    // 2. Set supported modes — hides the appearance toggle for single-mode themes
+    const modes = THEME_MODES[themeName]
+    if (modes) {
+      html.dataset.zpModes = modes
+    } else {
+      html.dataset.zpModes = 'dark light'
+    }
+
+    // 3. Force color mode if not toggle
     if (colorMode === 'dark') {
       html.classList.add('rp-dark', 'dark')
       html.dataset.dark = 'true'
@@ -186,12 +204,12 @@ export function ThemeProvider(): React.ReactElement | null {
       }
     }
 
-    // 3. Apply base color overrides
+    // 4. Apply base color overrides
     if (hasColors) {
       applyColorOverrides(html, colors)
     }
 
-    // 4. Observe dark mode changes for dark-specific overrides
+    // 5. Observe dark mode changes for dark-specific overrides
     if (hasDarkColors) {
       const isDark = html.classList.contains('rp-dark')
       if (isDark) {
@@ -214,7 +232,7 @@ export function ThemeProvider(): React.ReactElement | null {
 
       observer.observe(html, { attributes: true, attributeFilter: ['class'] })
 
-      // 5. Dismiss loading overlay
+      // 6. Dismiss loading overlay
       const cancelLoader = dismissLoader(html)
 
       return () => {
@@ -223,7 +241,7 @@ export function ThemeProvider(): React.ReactElement | null {
       }
     }
 
-    // 5. Dismiss loading overlay (no dark-color observer needed)
+    // 6. Dismiss loading overlay (no dark-color observer needed)
     return dismissLoader(html)
   }, [])
 

package/src/theme/styles/overrides/rspress.css

@@ -32,6 +32,12 @@ html .rp-button--big {
   border-radius: 9999px;
 }
 
+/* ── Single-mode themes — hide the appearance toggle when only one mode is supported ── */
+html[data-zp-modes='dark'] .rp-appearance,
+html[data-zp-modes='light'] .rp-appearance {
+  display: none;
+}
+
 /* ── Tables ──────────────────────────────────────────────── */
 html table {
   border-radius: var(--rp-radius);