Next.js Discord

Discord Forum

Unable to use tailwind's hover and dark at same time

Answered
Black-chinned Hummingbird posted this in #help-forum
Open in Discord
Black-chinned HummingbirdOP
# src/app/page.tsx
import Link from "next/link";

export default function Home() {
  return (
    <div className="my-6 px-4 max-w-md mx-auto">
      <div className="text-center space-y-6">
        <h1 className="text-3xl font-bold">Welcome to our App</h1>
        <Link href="/auth/login" className="p-3 border-1 rounded-xl hover:bg-amber-50 dark:hover:bg-amber-600">Sign In / Sign Up</Link>
      </div>
    </div>
  );
}


# src/app/globals.css
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}


when hovering over the link, the background color stays at amber-600, regardless of if prefers-color-scheme is set to dark or light. why is this, and how is it done correctly?
Answered by Black-chinned Hummingbird
yea im using dark mode. i had this in root layout:
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
      >
        {children}
      </body>
    </html>
  );
}


anyways, i got it working somehow after you brought it up again. maybe i just had it set wrong or something, but after i added className in shadcn button, it works:

import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function Home() {
  return (
    <div className="my-6 px-4 max-w-md mx-auto">
      <div className="text-center space-y-6">
        <h1 className="text-3xl font-bold">Welcome to our App</h1>
        <Button asChild size="lg" className="dark:hover:bg-amber-600 hover:bg-amber-50">
          <Link href="/auth/login">Sign In / Sign Up</Link>
        </Button>

      </div>
    </div>
  );
}


still no idea whats wrong with original code. but shadcn component helps get the intended result, so thats nice.
View full answer

8 Replies

@alfonsüs ardani have you tried `hover:dark:`
Black-chinned HummingbirdOP
yea, i already tried both ways already

...
        <Link href="/auth/login" className="p-3 border-1 rounded-xl hover:bg-amber-50 hover:dark:bg-amber-600">Sign In / Sign Up</Link>

both just results in amber-600 bg upon hover, regardless of if im on light or dark mode.

its been a while and idk whats up with it, so i'll just not implement light mode and keep dark only, lol
@alfonsüs ardani yeah its not my preferred method of implementing light/dark mode either
Black-chinned HummingbirdOP
if this isn't your preferred method for light/dark, then what is?
@Black-chinned Hummingbird if this isn't your preferred method for light/dark, then what is?
alfonsüs ardani
You see that prefers-colors-scheme dark in global.css? I usually just expand more variables there. Id only use dark:hover: for prototyping new colors
Its weird that it doesnt work. Is your browser even using dark mode?
@alfonsüs ardani Its weird that it doesnt work. Is your browser even using dark mode?
Black-chinned HummingbirdOP
yea im using dark mode. i had this in root layout:
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
      >
        {children}
      </body>
    </html>
  );
}


anyways, i got it working somehow after you brought it up again. maybe i just had it set wrong or something, but after i added className in shadcn button, it works:

import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function Home() {
  return (
    <div className="my-6 px-4 max-w-md mx-auto">
      <div className="text-center space-y-6">
        <h1 className="text-3xl font-bold">Welcome to our App</h1>
        <Button asChild size="lg" className="dark:hover:bg-amber-600 hover:bg-amber-50">
          <Link href="/auth/login">Sign In / Sign Up</Link>
        </Button>

      </div>
    </div>
  );
}


still no idea whats wrong with original code. but shadcn component helps get the intended result, so thats nice.
Answer
alfonsüs ardani
Nice 😭