[help] How to import shadcn components in dark mode?

[belugawhale3]

I'm trying to import shadcn components such as the button: https://ui.shadcn.com/docs/components/button However because the button I'm importing from shadcn is black its completely disappears in the black background from the SAAS starter. Is there a way to import it in this repo so that it uses the shadcn dark mode theme instead and is visible? Also whats the best way to go about importing shadcn components to this repo?

[fluid-design-io]

@belugawhale3 Since Shadcn uses theme tokens to style components, you can simple overwrite the style.css @layer base :root to the dark mode theme, for example: Default css

@layer base {
  :root {
// ...light theme
}
.dark {
// ...dark theme
}
}

You can then replace what's in the root with the values from the .dark {...} like so:

@layer base {
  :root {
// ...dark theme
}
}

That's it :)

[belugawhale3]

Thanks! Fixed