无法在创建下一个应用程序中关闭/删除暗模式

Question

以前使用 create-next-app 时，我总是会引导一个漂亮的浅色主题“欢迎来到 Next.js”应用程序，但今天当我使用 create-next-app 初始化 next.js 应用程序时，该应用程序会自动使用深色模式因为这是我的系统偏好。以前没有发生过这种情况。

我想删除深色模式并仅保留浅色主题而不更改我的系统首选项，但我无法做到这一点。

这是我的package.json：

 {
  "name": "next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3"
  }
}

Answer 1

在 global.css 中删除：

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}

(prefers-color-scheme) 媒体查询从浏览器读取颜色模式并应用其 CSS 样式

Answer 2

深色模式于 2022 年 7 月通过 此 PR 添加。除了Motasem的回答之外，我还会删除

Home.module.css

中的媒体查询：

@media (prefers-color-scheme: dark) {
  .card,
  .footer {
    border-color: #222;
  }
  .code {
    background: #111;
  }
  .logo img {
    filter: invert(1);
  }
}

编辑2023年2月

看起来这就是现在的媒体查询：

@media (prefers-color-scheme: dark) {
  .vercelLogo {
    filter: invert(1);
  }

  .logo,
  .thirteen img {
    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
  }
}

Answer 3

在 nextjs 13 中也有类似的问题，也将深色模式应用于图像。 除了删除媒体查询之外：

@media (prefers-color-scheme: dark) {
  .....
 }

我还必须将 darkMode: 'class' 添加到 tailwind 配置中：

module.exports = {
   darkMode: 'class',
....

Answer 4

使用

tailwind

和

nextjs

，我必须删除

的所有实例

className='dark:some color'

在代码中。

如果代码中存在任何

@media (prefers-color-scheme: dark)

类，它会自动将

.next

添加到

dark:

输出文件夹中。