How to change React UI theme according to the environment

4 min readJun 26, 2021

As you may know for the most cases, we can use environment variables for different environments rather than hard coding the API URLs, API Keys, and other config stuff. The mostly using environments are development and production. 😆

This is another use case, which may want to use environment configurations.

I wanted to change the theme according to the environment. Same app for two or more different vendors. 😃 This is the best solution, if the same app gives to different customers, they may delightfully, if the app has same theme which mapping to their business theme.

env-cmd

A simple node program for executing commands using an environment from an env file.

For the different environment configuration stuff I use ‘.env-cmdrc.json’ file. We can write our configs as json format, which give more readability and maintainability. Which should locate at the root directory.(see figure 1)

How to install

npm install env-cmd or npm install -g env-cmd

example of .env-cmdrc.json file

{
“client1”: {
“REACT_APP_NAME”: “client-1”
},
“client2”: {
“REACT_APP_NAME”: “client-2”
}
}

Above, json config I put two configuration environment for two different clients. Which is client-1 and client-2. All the configs names should start prefix with “REACT_APP”.

Then I can access those environment configs by using {process.env.property_name} code block.

According to above json file, we can get REACT_APP_Header property value by,

{process.env.REACT_APP_NAME}

How can we start with needed environment?

In package.json file, there is script section. As my example,

“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”
}

In that script we can see command from the left side (json property name). The right side, we can see particular script file. While changing left side property, we can set out an argument, As above example, we can start the react app by using “npm run start” command. Here we use “start” property name as argument. As the same way we can set our argument according to environment.

“scripts”: {
“start:client1”: “env-cmd -e client1 react-scripts start”,
“start:client2”: “env-cmd -e client2 react-scripts start”,
“build:client1”: “env-cmd -e client1 react-scripts build”,
“build:client2”: “env-cmd -e client2 react-scripts build”
}

Here I set separate arguments for separate environments. As property value, I set env-cmd script by passing the environment name, which I mentioned in the .env-cmdrc.json. So I can start the app for the client1 (environment variable) by using “npm run start:client1”.

Ok, now I finished the basic configurations. Let’s move to styling part.

Here I’m using SCSS files for styling. Then I can pass style values as parameters. Before use SCSS file, it is required to install node-sass package.

npm install node-sass

Here is my project structure,

According to the above image, I create a resource folder inside ‘src’. Likewise I create separate ‘scss’ files for the different client and there is main style.scss file, which will be imported by other ‘env.scss’ files.

resource/env/client1/env.scss