CODEWITHSUNDEEP
cssreactjsreduxthemesstyling
Amiry
Amiry

Reputation: 360

What is the best way to switch between web app's themes with React & Redux?

I want to implement an option to switch between two themes in my React and Redux web app.

I have 2 different CSS files, one for each theme. Right now in order to apply a CSS file's stylings, I simply import it at the head of my App.js. 

import '../styles/theme1.css';

const App = (props) => {
    return (
      <div>
        <Header />
        <Container/>
      </div>
    );
};

const mapStateToProps = (state) => ({
    theme: state.settings.theme  // can return 'theme1' / 'theme2'
});

export default withRouter(connect(mapStateToProps)(App));

So I want to import stylings according to the app's state ('theme1' or 'theme2').
I could think of some messy ways and found some ready-made packages for that, but I want to know if there is a conventional way to do so, efficiently and as clean as possible.

this is a create-react-app kit.

Thank you.

Upvotes: 0

Views: 987

Answers (2)

davemaloney
davemaloney

Reputation: 31

One possibility depending on how your taskrunner configuration is set up would be to introduce React-Helmet, which would allow you to change the CSS reference in your <head> depending on the theme.

import React from "react";
import {Helmet} from "react-helmet";

function StyleSwitch (props) {
  return (
    <Helmet>
      <link rel="stylesheet" href={props.stylesheet} />
    </Helmet>
  );
};

Upvotes: 1

krmzv
krmzv

Reputation: 387

Try using scss/sass - I think it could simplify the whole process, because it allows you to nest classes/elements.

For example, lets assume you switch between two states, theme1 and theme2:

<div className={this.state.theme}>
   <h2>Some text</h2>
</div>

And your .scss file should look like

.theme1{
   background-color: black;

     h2 {
      color: white;
     }
}

.theme2{
  background-color: white;

    h2{
     color: black;
    }
}

Upvotes: 0

Related Questions