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