Angular - how to tell the difference between prod and dev for user

Im working on an angular project and I have two separate links, one for dev and one prod, for testing different functionalities but I want to be able to change some css for one environment so the user who's testing can know what link he used if he miss clicked the other one. If there is an easier method to do the same thing but you dont need to change css is ok, i just need to show something in gui.

I tried making two css files and then i added them on angular.json for each configuration like this but this didnt work

"stylePreprocessorOptions": {
          "includePaths": [
            "src/styledev.css"
          ]
        }

Creation of different environment file is a better approach

for e.g creating environments/dev.ts

export const environment = {
  production: false,
  devMode: true,
  css: [
    './styles/dev.css',
  ],
};

and one for production like environment/prod.ts

export const environment = {
  production: true,
  devMode: false,
  css: [
    './styles/prod.css',
  ],
};

Then you can use the environment variable to load the appropriate CSS file.

Method 1: (Prefered way)
use the ng serve command with the --configuration flag.

This flag allows you to specify the environment that you want to use when serving your application.

Method 2: (have not tested it but as per my understanding it should work)

In app.component.ts:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [
    environment.css,
  ],
})

I resolved the problem using a variable that i assigned the isDevMode() then in the html file i used this

<mat-toolbar *ngIf="dev === true" style="background-color: red;" color="primary">
</mat-toolbar>

<mat-toolbar *ngIf="dev === false" color="primary">
</mat-toolbar>

now the user can know in which environment is testing