next.jsthemescreate-react-apppackage.jsondarkmode

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

Solution

  • 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