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

bjg7j2ky 于 2023-02-12 发布在其他

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

以前使用create-next-app时，我总是能引导一个很好的以“Welcome to Next.js”为主题的应用程序，但今天当我使用create-next-app初始化一个next.js应用程序时，应用程序自动使用黑暗模式，因为这是我的系统首选项。

我想删除黑暗模式，并保持它的轻主题只在不改变我的系统首选项，但我无法做到这一点。
这是我的包裹

{
  "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

来源：https://stackoverflow.com/questions/73184522/not-able-to-turn-off-remove-dark-mode-in-create-next-app

2条答案

按热度按时间

xoshrz7s1#

在global.css中删除：

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

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

赞(0）回复(0）举报 2023-02-12

yacmzcpb2#

黑暗模式是在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);
  }
}

赞(0）回复(0）举报 2023-02-12

我来回答

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

2条答案

相关问题

热门标签

最新问答