CODEWITHSUNDEEP
cssreactjsnext.jstailwind-css
antonkornilov-ua
antonkornilov-ua

Reputation: 133

How to apply different styles for a class in Tailwind CSS when the theme is switched to dark using Next.js 13.4 and next-theme?

How to apply different styles for a class in Tailwind CSS when the theme is switched to dark using Next.js 13.4 and next-theme?

I'm trying to set up a dark theme in Tailwind CSS with Next.js 13.4 using next-theme. In my globals.css file, I have defined styles for a class as follows:

.gradient {
    height: fit-content;
    z-index: 3;
    width: 100%;
    max-width: 640px;
    background-image: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 1) 0px, transparent 0%),
        radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
        radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
        radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
        radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
        radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(150%);
    top: 80px;
    opacity: 0.15;
}

Now, I want to apply different styles for the same class when the theme is switched to dark. For instance, I want to change the background color and text color when in dark mode. How can I achieve this? Specifically, how do I activate different styles for the div with the class gradient when the theme is switched to dark?

 <div className='main'>
     <div className='gradient' />
 </div>

Any help or guidance on how to handle this in Tailwind CSS with Next.js and next-theme would be greatly appreciated. Thank you!

Upvotes: 0

Views: 1105

Answers (2)

Ogrodev
Ogrodev

Reputation: 326

As the docs says, you need to go for a variable approach. Like so:

:root {
  /* Your default theme */
  --gradient-background: white; /* here goes the default theme gradient */
}

[data-theme='dark'] {
  --gradient-background: black; /* here goes the dark theme gradient */
}

.gradient {
    height: fit-content;
    z-index: 3;
    width: 100%;
    max-width: 640px;
    background: var(--gradient-background);
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(150%);
    top: 80px;
    opacity: 0.15;
}

Upvotes: 0

Simone
Simone

Reputation: 21282

You can define your dark styles in a media query using prefers-color-scheme.

For example:

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .gradient {
    ...your CSS here...
  }
}

Upvotes: -1

Related Questions