Pfthb

I'm working a project that will dynamically allow the user to change themes, and uses reactstrap and styled-components under the hood. We want to configure all of the variables via SASS, which is working fine. In order to make those variables available to styled-components, we have been using sass-extract-loader to create theme objects.

This all works great when we statically choose one of the themes, but I haven't been able to get it working dynamically reliably. I have two issues:

1) In development, it works fine to switch the theme once. If I change it again, my non-styled-components (i.e., raw reactstrap components) are styled with the second theme. I believe this is because the second theme is loading and overriding the original CSS.
2) In production, I get the same mix as #1 by default (i.e., because all of the CSS files are being put together into a single bundle, reactstrap components are styled one way, while styled-components "honors" the theme).

I believe the best option for us is to have the themes in two separate CSS files, and to toggle "alternate" rels on them. I just don't know how to configure CRA not to put all of the CSS into a single main bundle, and let me manually add links to alternate stylesheets. If I can split them out into separate files, I believe I can just add tags and dynamically swap the rel="alternate" property.

There may well be better ways to accomplish this. My understanding is that the easiest way to control the Bootstrap themes is via SASS variables, and I'd like to make sure those variables don't have to be re-defined when using them in styled-components.

If you want to apply styles conditionally, you can import your stylesheets in your index.js file and make it available to all your components through the context API. First of all we import the CSS files into index.js.

import themeA from './css/themeA.css';
import themeB from './css/themeB.css';

However, by using it this way, you cannot have element selectors in both CSS files, because they would be globally applied from both files. However, you could import an extra stylesheet that complements the selected theme, in which you define the element selectors.

By using CSS modules, you avoid the need for element selectors. You may want to read this article if you are unfamiliar with CSS modules: https://javascriptplayground.com/css-modules-webpack-react/

If you still need to apply element selectors in one theme, you can do so, but they will also get applied in your other theme this way.

 import './css/default.css';

This example below is a modified version from the React documentation: https://reactjs.org/docs/context.html

In this example, we draw a button that changes the global theme when
it its clicked. There are three parts in this example that are crucial
to understand if you want to use React its context API.

1. Creating a Context.
Creating a Context is being done by assigning the return value of React.createContext(yourValue) to a variable. This variable can then be used to use the Provider or Consumer component inside your React components.

const ThemeContext = React.createContext();

2. Providing a value by passing it to your Provider component as prop. Now your value is accessible to all your components.

class App extends React.Component 
 swapTheme() 
 this.setState( withThemeA: !this.state.withThemeA );
 
 render() 
 const theme = this.state.withThemeA ? themeA : themeB;
 return (
 <ThemeContext.Provider value=theme>
 <ThemedButton onClick=this.swapTheme />
 </ThemeContext.Provider>
 );
 

3. Listening to updates with the Consumer component.
To listen for changes, you need to use the Consumer component. The passed function receives the theme as an argument so it can be assigned to the className prop of the button element.

class ThemedButton extends React.Component 
 render() 
 return <ThemeContext.Consumer>
 theme => <button className=theme.Button>click me</button>
 </ThemeContext.Consumer>;
 
}