Not able to turn off/remove dark mode in Create Next App

Question

Previously using create-next-app, I always got a nice light themed 'Welcome to Next.js' application bootstrapped, but today when I initialized a next.js app with create-next-app, the application is using dark mode automatically since it is my system preference. This did not happen before.

I want to remove the dark mode and keep it light themed only without changing my system preference, but I am not able to do that.

This is my 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"
  }
}

Reifel

Answer 1

in global.css remove:

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

(prefers-color-scheme) media query reads the color mode from your browser and applies its CSS styles

Pyrotechnic

This answers the OP's question. But here's my opinion - if we remove this, then the CSS are not applied even if the user prefers dark mode. Because what this @media does is, it reads user's preference from system settings and conditionally applies the enclosing CSS. There are some discrepancies between turning this off by removing this vs the user turning off dark mode (Ex. font colors are different) – Highfalutin

Answer 2

Dark mode was added in July of 2022 through this PR. In addition to Motasem's answer, I'd also remove the media queries in Home.module.css:

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

Edit February 2023

Looks like this is now the media query:

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

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

Plash

I don't have that in a next 13 build. Was it removed? – Wongawonga

Answer 3

Had a similar problem, in nextjs 13, that also applied dark mode to Image. Besides removing the media query:

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

I also had to add darkMode: 'class' to tailwind config:

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

Instructive

Answer 4

also remove this

body { color: rgb(var(--foreground-rgb)); background: linear-gradient( to bottom, transparent, rgb(var(--background-end-rgb)) ) rgb(var(--background-start-rgb)); }

to

in order to get rid of the lines

Hedveh

Answer 5

Using tailwind and nextjs, I had to remove all instances of

className='dark:some color'

in the code.

It automatically adds the @media (prefers-color-scheme: dark) in the .next output folder if there is any dark: class in the code.

Saltworks