CODEWITHSUNDEEP
next.jsthemescreate-react-apppackage.jsondarkmode
Sayantan
Sayantan

Reputation: 173

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

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.

screenshot

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

Upvotes: 13

Views: 17590

Answers (5)

Anubrat Sahoo
Anubrat Sahoo

Reputation: 21

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 enter image description here

in order to get rid of the lines

Upvotes: 0

Matthias
Matthias

Reputation: 3900

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.

Upvotes: 0

stefan
stefan

Reputation: 2785

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',
....

Upvotes: 2

anchovy
anchovy

Reputation: 51

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);
  }
}

Upvotes: 4

Motasem Samman
Motasem Samman

Reputation: 406

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

Upvotes: 28

Related Questions