我需要将黑暗模式纳入我的项目。 I use NextJs v12.1.3,react 18.1.0<>和>.tailwindcss v3.1.2。 我在官方网站上尝试了,但人工选择对我来说是没有工作的。 它总是以操作系统为主题。
例如,如果我想要把这个主题推向轻视,我就这样做:
<html className="light">
<body className="h-10 w-10">
<div className="bg-white flex w-10 h-10 dark:bg-black"></div>
</body>
</html>
这始终表明本组织的主题。 我还补充说,这是为了迫使它:
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
localStorage.theme === dark ||
(!( theme in localStorage) &&
window.matchMedia( (prefers-color-scheme: dark) ).matches)
) {
document.documentElement.classList.add( dark );
} else {
document.documentElement.classList.remove( dark );
}
// Whenever the user explicitly chooses light mode
localStorage.theme = light ;
我也将此列入<代码>_文件.tsx。 档案:
<Html className="light">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
我还设立了<条码>darkMode: 类别,载于<条码>尾.config.js。
这是我的完整的 tailwind.config.js文件。
const colors = require( tailwindcss/colors );
module.exports = {
purge: [],
darkMode: class ,
content: [
./pages/**/*.{js,ts,jsx,tsx} ,
./components/**/*.{js,ts,jsx,tsx} ,
],
tailwindcss: {},
autoprefixer: {},
theme: {
colors: {
transparent: transparent ,
current: currentColor ,
black: #212121 ,
white: colors.white,
gray: {
...colors.gray,
100: #f0f2f5 ,
200: #DADFE7 ,
300: #a9b5c6 ,
400: #6c809d ,
500: #647697 ,
600: #5a6C87 ,
700: #394556 ,
800: #313B49 ,
900: #181D25 ,
},
teal: {
50: #ECFDFA ,
100: #DAFCF6 ,
200: #B4F8ED ,
300: #8FF5E4 ,
400: #6AF1DB ,
500: #47EED1 ,
600: #15E0BE ,
700: #10A88F ,
800: #0A705F ,
900: #053830 ,
},
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
orange: {
...colors.orange,
300: #ffce30 ,
700: #d49100 ,
},
extend: {
transitionDuration: {
0: 0ms ,
2000: 2000ms ,
},
},
},
},
plugins: [require( @tailwindcss/forms ), require( @tailwindcss/typography )],
};
坦率地说,此时我只想看一看,但我有一些内容也是黑暗的风格,我不想照搬这些内容,因为后来我需要。
你认为我错了什么?
P.S. I. 不想使用next-themes来处理黑暗/光度。