feat(registry) new mode switcher component

[TheOrcDev]

Summary by cubic

Adds an 8-bit Retro Mode Switcher component to the registry and docs, providing a pixel-art theme toggle powered by next-themes. This makes it easy to add a nostalgic light/dark switch to 8-bit themed apps.

• New Features

  • New retro-mode-switcher component with pixel art sun/moon, toggling theme via next-themes.
  • Docs page with install command and usage snippet.
  • Registry entries added, including 8bit button and retro.css assets.

• Refactors

  • Updated ModeSwitcher button classes to use size-8 for consistency.

Summary by CodeRabbit

• New Features

  • Introduced an 8-bit Retro Mode Switcher for toggling light/dark themes with pixel-art icons.
  • Added accompanying retro-styled button and CSS, and published the component in the registry for easy installation.

• Documentation

  • Added a new documentation page with a live demo, installation instructions, and usage examples for the Retro Mode Switcher.

• Style

  • Polished button sizing with a unified size utility for visual consistency.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
8bitcn-ui	Ready	Preview	Comment	Sep 24, 2025 9:40am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a new Retro Mode Switcher UI component and its docs page. Updates an existing mode-switcher button class. Registers the component in both public and internal registries with associated 8-bit assets and dependencies.

Changes

Cohort / File(s)	Summary
Docs page app/docs/components/retro-mode-switcher/page.tsx	New Next.js docs page with metadata, live demo, installation, and usage snippets for RetroModeSwitcher.
UI component components/ui/retro-mode-switcher.tsx	New client component toggling light/dark via next-themes; ghost Button with sun/moon SVGs and accessible labels.
Existing mode switcher tweak components/mode-switcher.tsx	Replaces Button size classes h-8 w-8 with size-8; no behavioral change.
Registry entries registry.json, public/r/registry.json, public/r/retro-mode-switcher.json	Adds retro-mode-switcher registry item with files mapping: components/ui/retro-mode-switcher.tsx, components/ui/8bit/button.tsx, components/ui/8bit/styles/retro.css; declares dependencies including next-themes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Page as Docs Page
  participant Retro as RetroModeSwitcher
  participant Theme as next-themes (ThemeProvider)

  User->>Page: Navigate to Retro Mode Switcher docs
  Page->>Retro: Render component
  Retro->>Theme: readTheme()
  User->>Retro: Click toggle
  Retro->>Theme: setTheme(light↔dark)
  Theme-->>Retro: theme updated
  Retro-->>User: Icon/state reflect new theme
  Note over Retro,Theme: Changed interaction: toggles theme via next-themes

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• refactor: replace custom font with Google Fonts for Press Start 2P #210 — Refactors 8-bit button to use next/font and removes retro.css; overlaps with this PR’s 8-bit button and retro.css references.
• Feat/profile creator #295 — Adds/modifies the same 8-bit UI assets (components/ui/8bit/button.tsx, retro styling), directly related.
• fix(registry) add 8bit button and card #247 — Updates the 8-bit button implementation, touching the same file path as referenced here.

Poem

I hop between sunbeams and pixel night,
A retro switch—click!—now dark, now light.
With chiptune dreams and 8-bit cheer,
I toggle the theme, then nibble near.
Moon to sun, a byte-sized delight,
Happy trails in neon light. 🌙✨🐇

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/retro-mode-switcher

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f89d03f and 5d0d195.

📒 Files selected for processing (6)

• app/docs/components/retro-mode-switcher/page.tsx (1 hunks)
• components/mode-switcher.tsx (1 hunks)
• components/ui/retro-mode-switcher.tsx (1 hunks)
• public/r/registry.json (1 hunks)
• public/r/retro-mode-switcher.json (1 hunks)
• registry.json (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cubic-dev-ai]

No issues found across 6 files