无法在 Create Next App 中关闭/删除暗模式答案

【问题标题】：Not able to turn off/remove dark mode in Create Next App无法在 Create Next App 中关闭/删除暗模式
【发布时间】：2023-02-10 20:52:05
【问题描述】：

以前使用 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"
  }
}

【问题讨论】：

标签： next.js themes create-react-app package.json darkmode

【解决方案1】：

在 global.css 中删除：

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

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

【讨论】：

【解决方案2】：

暗模式于 2022 年 7 月通过this 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);
  }
}

【讨论】：

我在下一个 13 版本中没有它。它被删除了吗？