当使用Next.js 13.4和next-theme将主题切换为深色时，如何为Tailwind CSS中的类应用不同的样式？

hec6srdp 于 2023-08-04 发布在其他

关注(0)|答案(2)|浏览(145)

当使用Next.js 13.4和next-theme将主题切换为深色时，如何为Tailwind CSS中的类应用不同的样式？
我试图在Tailwind CSS中使用next-theme在Next.js 13.4中设置一个黑暗主题。在我的globals.css文件中，我为一个类定义了样式，如下所示：

.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;
}

字符串
现在，我想在主题切换为深色时为同一个类应用不同的样式。例如，我想在黑暗模式下更改背景颜色和文本颜色。我如何才能做到这一点？具体来说，当主题切换为深色时，如何为具有类渐变的div激活不同的样式？

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

型
任何关于如何在Tailwind CSS中使用Next.js和next-theme处理此问题的帮助或指导都将不胜感激。谢谢你，谢谢

next.js

来源：https://stackoverflow.com/questions/76739928/how-to-apply-different-styles-for-a-class-in-tailwind-css-when-the-theme-is-swit

2条答案

按热度按时间

uqcuzwp81#

您可以使用prefers-color-scheme在媒体查询中定义深色样式。
举例来说：

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

字符串

赞(0）回复(0）举报 2023-08-04

azpvetkf2#

正如文档所述，您需要采用可变方法。像这样：

: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;
}

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

当使用Next.js 13.4和next-theme将主题切换为深色时，如何为Tailwind CSS中的类应用不同的样式？

2条答案

相关问题

热门标签

最新问答