Function ThemeStep

packages/app-core/src/components/OnboardingWizard.tsx:534–661

({
  themeFamily,
  themeMode,
  themeId,
  setTheme,
  onBack,
  onNext
}: {
  themeFamily: ThemeFamily
  themeMode: ThemeMode
  themeId: string
  setTheme: (next: { id: string; family: ThemeFamily; mode: ThemeMode }) => void
  onBack: () => void
  onNext: () => void
})

}

function ThemeStep({
  themeFamily,
  themeMode,
  themeId,
  setTheme,
  onBack,
  onNext
}: {
  themeFamily: ThemeFamily
  themeMode: ThemeMode
  themeId: string
  setTheme: (next: { id: string; family: ThemeFamily; mode: ThemeMode }) => void
  onBack: () => void
  onNext: () => void
}): JSX.Element {
  const applyFamily = (family: ThemeFamily): void => {
    const prefersDark =
      themeMode === 'dark' ||
      (themeMode === 'auto' &&
        typeof window !== 'undefined' &&
        window.matchMedia('(prefers-color-scheme: dark)').matches)
    const id = resolveAuto(family, prefersDark, themeId)
    setTheme({ id, family, mode: themeMode })
  }

  const applyMode = (mode: ThemeMode): void => {
    const prefersDark =
      mode === 'dark' ||
      (mode === 'auto' &&
        typeof window !== 'undefined' &&
        window.matchMedia('(prefers-color-scheme: dark)').matches)
    const id = resolveAuto(themeFamily, prefersDark, themeId)
    setTheme({ id, family: themeFamily, mode })
  }

  // Some families ship multiple flavors of the same mode (Gruvbox hard/medium/
  // soft, GitHub default/dimmed/high-contrast, Catppuccin frappe/macchiato/
  // mocha, etc.). Expose them as a contrast picker beside the Mode selector.
  const resolvedMode: 'light' | 'dark' =
    themeMode === 'light'
      ? 'light'
      : themeMode === 'dark'
        ? 'dark'
        : prefersDarkSystem()
          ? 'dark'
          : 'light'
  const variants = useMemo(
    () => THEMES.filter((t) => t.family === themeFamily && t.mode === resolvedMode),
    [themeFamily, resolvedMode]
  )

  return (
    <div>
      <StepHeading
        eyebrow="Step 2"
        title="Pick your theme"
        subtitle="Each family has light + dark variants. Auto follows your system."
      />