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

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 样式