Context theming works when app is run but not working when app is built

[decaluwepatrick]

Hi!

I use Context theming in my app, so that I can call a different layout dynamically, depending on a color passed as a get parameter in the url.

When I launch "npm start" to test my app it works perfectly, but when I use it with "npm run build", and visit the created page on my server, the app always loads the default theme, even when calling for a different color.

I am still a beginner in react, hope there is something I don't miss here. Any help would be great.

Code extract:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
/*import './index-green.css'
import './index-blue.css'*/
import { ThemeProvider } from 'react-css-themr';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { persistStore } from 'redux-persist'
import 'core-js/fn/array/find';
import 'core-js/fn/array/find-index';
import 'core-js/fn/array/map';

import configureStore from './store/configureStore';
const store = configureStore();
persistStore(store, {
    blacklist: [
        'event',
        'polls',
        'chat',
        'userProfile',
        'homeSubPage'
    ]
});

let params = new URLSearchParams(window.location.search);
let color = params.get('color');

let contextTheme;

switch (color) {
  case "blue":
    contextTheme  = {
      theme1: require('./assets/index-green.css'),
      theme2: require('./assets/index-blue.css')
    };
    break;

  default:
  contextTheme  = {
    theme1: require('./assets/index-blue.css'),
    theme2: require('./assets/index-green.css')
  };
}

console.log("color is : "+ color); /* with npm start, blue has blue theme, but with npm run build, blue has green theme as well */

ReactDOM.render(
      <ThemeProvider theme={contextTheme}>
      <Provider store={store}>
        <App />
      </Provider>
      </ThemeProvider>

    , document.getElementById('root'));
registerServiceWorker();

And the scripts part in the package.json:

    "name": "widget2",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "autosize": "^4.0.0",
        "core-js": "^2.5.1",
        "es6-promise": "^4.1.1",
        "isomorphic-fetch": "^2.2.1",
        "lodash": "^4.17.4",
        "masonry-layout": "^4.2.0",
        "moment": "^2.19.1",
        "node-sass-chokidar": "0.0.3",
        "normalize.css": "^7.0.0",
        "npm-run-all": "^4.0.2",
        "prevent-parent-scroll": "0.0.6",
        "react": "^15.6.1",
        "react-css-themr": "^2.1.2",
        "react-dom": "^15.6.1",
        "react-facebook-login": "^3.6.2",
        "react-lazyload": "^2.2.7",
        "react-redux": "^5.0.5",
        "react-scripts": "1.0.10",
        "react-transition-group": "^1.2.0",
        "redux": "^3.7.2",
        "redux-persist": "^4.10.1",
        "redux-thunk": "^2.2.0",
        "url-search-params": "^0.10.0"
    },
    "scripts": {
        "start-js": "react-scripts start",
        "start": "npm-run-all -p watch-css start-js",
        "build": "npm run build-css && react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
        "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive"
    },
    "homepage": "/widget2/build",
    "devDependencies": {
        "raw-loader": "^0.5.1"
    }
}