I've moved the dark and light mode related code from my globals.css into a custom file called app_theme.css. I also removed the related bits from next.config.js.

Now the app is stuck in light mode.

Here are the relevant files:

// _app.tsx

import '../styles/globals.css' 
import '../styles/app_theme.css' // Add this line
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <div className="font-roboto">
      <Component {...pageProps} /> 
    </div>
  )
}

/* app_theme.css */

:root {
    --background: 200 20% 98%;
    --btn-background: 200 10% 91%;
    --btn-background-hover: 200 10% 89%;
    --foreground: 200 50% 3%;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --background: 200 50% 3%;
      --btn-background: 200 10% 9%;
      --btn-background-hover: 200 10% 12%;
      --foreground: 200 20% 96%;
    }
  }

// theme.ts

export interface Theme {
  colors: {
    primary: string;
    text: string;
  },
}

export const theme: Theme = {
  colors: {
    primary: '#3BB067',
    text: '#FFFFFF', // Change this to white
  }, 
}
export default theme;

The app is supposed to switch to dark mode and light mode (black & white) based on the user OS/browser preferences, and that's how it worked until I made these changes, however I wanted to simplify the code readability for myself so I want it to work the way I told you.

Can someone tell me what could be the issue ?

Also my globals.css looks like this now:

/*globals.css
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

.animate-in {
  animation: animateIn 0.3s ease 0.15s both;
}

@keyframes animateIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}