Here is the technique I used with React, Bootstrap, and SASS:
Inside an index.scss file:
div#blue {
@import './blue.scss';
}
div#red {
@import './red.scss';
}
// Including the rest of Bootstrap
// It seems necessary to import twice for fonts to work properly
@import "node_modules/bootstrap/scss/bootstrap";
Then in the red.scss file, I customized Bootstrap as needed:
$theme-colors: (
"primary": red,
);
// Importing the rest of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
The blue.scss file follows a similar structure.
Finally, let's look at my top-level React component:
import './index.css'
import * as React from 'react'
import Button from 'react-bootstrap/Button'
export const Container = () => {
const [color, setColor] = useState('red');
const buttonClick = () => {
if (color === 'red') setColor('blue')
if (color === 'blue') setColor('red')
}
return (
<div id={theme} >
Switch themes...
<Button variant="primary" onClick={buttonClick}>Button</Button>
</div>
)
}
By clicking the button, the color will toggle between red and blue. While using a className over a div selector may be more advisable, this approach has been effective for me so far. Its robustness in complex applications remains to be fully determined.