Console: Distinguish between different environments clearly

### Is your proposal related to a problem?
Yes, it's a real story, I have my app in three environments (local development, test, and prod) and last week I just had open all of my environments in different tabs in my browser. I just wanted to test a SQL query in my localhost so I wrote my update query to update some rows and then I copied that from my editor to the SQL window in the Hasura console and clicked `Run` button and I realized all of the sudden that I run this script accidentally on my prod database.
Fortunately, I had a good backup that I restored. Also, my app is not so big and I did that at midnight when no user was logged in so I'm sure I'm good.
I asked my colleague and he also had the same issue before, so I think it's a common issue that may be happening to other users.

### Describe the solution you'd like
As a solution I think it's good to choose a different theme or color for each environment then it's clear visually that you are in which environment. For example something like this:

Prod Env:

Test Env:

Local Env:

### Describe alternatives you've considered
We can add an environment variable flag or simple setting to set Hasura console as a `read only` mode then you can disable some dangerous features like: `SQL` or `mutations` or `edit` and `delete` button in the data viewer to prevent these actions in prod, something like this:

### If the feature is approved, would you be willing to submit a PR?
Unfortunately, I don't have a lot of time but I definitely try to contribute as much as I can.

Please use :+1: if you like this feature idea.

No files, tests, or entry points are named. Start by reviewing the Hasura Console UI and its environment/configuration handling, then compare the proposed visual environment distinction with the alternative read-only mode; done means users can clearly identify the active environment before running or editing database operations.

Written by the indexing model from the issue text.