How to make shadcn not override Fumadocs' theme?

[KamilDev]

How can I make shadcn not override the theme colors of Fumadocs? I use shadcn in the rest of my website (anywhere that's not in /docs/).

You can see:

1. pnpm create fumadocs-app
2. pnpm dlx shadcn@latest add button
3. Fumadocs theme colors are overridden by shadcn

[fuma-nama]

Set a prefix for css variables in tailwind.config.js in createPreset options, and make sure addGlobalColors is disabled

[KamilDev]

Is this to make sure Fumadocs doesn't change shadcn styles? I meant for shadcn to not change Fumadocs styles.

I tried what you suggested, but there's no change:
tailwind.config.js

 presets: [
    createPreset({
      prefix: "fuma-",
      addGlobalColors: false,
    }),
  ],

If I take a look at git diff of changes when shadcn is added, the changes are in app/global.css and tailwind.config.js theme object. If I remove the changes, Fumadocs theme will look as intended, however I need them for the rest of my site. If I can only have them be applied when outside of /docs/ path, then it would work, but I'm not sure how.

[fuma-nama]

not sure do you mean, you should be able to see the colors of Shadcn UI & Fumadocs UI separated and do not conflict with each other. The only thing you need to customise is the default background-color and color, you can set it on your layout instead of root body so it uses different defaults for each layout.

Also it's cssPrefix instead of prefix

[fuma-nama]

Made a better example, hope it helps!

https://github.com/fuma-nama/fumadocs-shadcn

[andrewdoro]

@fuma-nama was also using prefix instead of cssPrefix 💀

can we add this config to the docs
https://fumadocs.vercel.app/docs/ui/theme

[fuma-nama]

Hmm It's actually typed and used in the example

[fuma-nama]

I think we can make it the default to add fd- prefix so it works out-of-the-box with Shadcn UI (without figuring out the cssPrefix config)