Support switching between layouts and theme styles

[coderrshyam]

Overview

Inspired by shadcn/ui, which allows users to preview and switch between different visual styles and color palettes, Fumadocs could benefit from a similar—but more powerful—capability that extends beyond colors to include layouts and navigation styles.

This proposal suggests adding a style switcher that enables users to dynamically visualize different documentation experiences directly on the docs page.

---

Supported Layouts

1. Docs Layout

The current default documentation layout.

Navigation styles

• Sidebar (default)
• Dropdown-based navigation
• Tabs-based navigation

---

2. Notebook Layout

A layout optimized for tutorials, guides, and step-by-step learning.

Navigation styles

• Top tabs
• Section-based dropdown
• Minimal inline navigation

---

Supported Themes

The style switcher should allow users to preview multiple theme presets:

• neutral
• black
• vitepress
• dusk
• catppuccin
• ocean
• purple
• solar
• emerald

---

UX Concept

• A floating toolbar available on documentation pages
• Allows users to:
  • Switch between layouts (Docs / Notebook)
  • Change navigation styles (sidebar, dropdown, tabs)
  • Preview theme presets instantly
• Changes are temporary by default (preview-only), unless the project explicitly enables persistence.

---

Why This Feature Is Useful

• Improves accessibility and personalization for coders
• Makes Fumadocs more flexible and expressive as a documentation framework

---

Scope & Design Considerations

• Fully opt-in for projects
• No breaking changes to existing setups
• Extensible API for custom layouts, navigation styles, and themes
• Works as a preview layer on top of the existing Fumadocs configuration

---

Open Questions

• Should layout switching be global or page-scoped?
• Should theme choices be persisted (localStorage) or session-only?
• How should custom themes/layouts be registered?

---

This feature aims to enhance developer experience and reader usability while staying aligned with Fumadocs’ philosophy of being simple by default and powerful when needed.

@fuma-nama, Thanks in advance.

[fuma-nama]

just use CSS Variables + Client Code, it's not needed for any specific features mentioned in this generated proposal

[coderrshyam]

I am giving you suggestion to implemet this feature on your docs - fumadocs