shadcn help

Answered

astro posted this in #help-forum

2024-04-25T08:51:29.414Z

does anyone know how i can use custom colors in shadcn components, i selected zinc as my base color while initialising shadcn in the app but when i try to use a custom color like text-zinc-800 for my text it gets messed up in dark/light mode

Answered by Dwarf Crocodile

You can add a dark:text-zink-200 to make it work with dark mode aswell

View full answer

2 Replies

Dwarf Crocodile

2024-04-25T08:59:31.596Z

You can add a dark:text-zink-200 to make it work with dark mode aswell

Answer

@Dwarf Crocodile You can add a `dark:text-zink-200` to make it work with dark mode aswell

astroOP

2024-04-25T11:45:11.245Z

im using shadcn's button component but the color of the text in nav links doesnt seem to change in dark theme(next's default 404 page) even tho the logo text automatically changed its color

<header className="flex items-center space-x-12 border-b px-6 py-3">
  <Link
    href="/"
    className={`${GeistMono.className} font-semibold tracking-tighter flex items-center text-3xl gap-2`}
  >
    <RxCrumpledPaper className="text-5xl" />
    Trackk
  </Link>

  <nav>
    <ul className="flex items-center">
      {links.map((link) => (
        <li key={link.href}>
          <Link
            className={`${buttonVariants({
              variant: link.href == currentPath ? "link" : "linkactive",
            })} font-semibold`}
            href={link.href}
          >
            {link.label}
          </Link>
        </li>
      ))}
    </ul>
  </nav>
</header>

button.tsx variants:

link: "text-primary underline-offset-4 hover:underline hover:text-primary/75",
linkactive:
  "text-muted-foreground underline-offset-4 hover:underline hover:text-primary/75",