0

Consider the following code:-

  render() {
      const headerClasses=classnames({
        "Header":true,
        "Header---dark":this.props.theme.dark,
        "Header--light":this.props.theme.light
      })
    return (
      <div className={headerClasses}>
            Header content goes here
      </div>
    )
  }

My application is going to have only two themes. one dark and one light. I am trying to store the theme in redux store and changing the classnames accordingly using classnames. Is it a valid approach or an anti-pattern?. What is the easiest way to manage theme in larger application?

Unity Hour
  • 550
  • 2
  • 7
  • 22
  • Arguably the easiest way would be to set a single class on the `body` element (e.g. `theme-light`). Based on that, you can then change all your styles within CSS only. Your approach seems to be very repetitive as you would have to add that everywhere. – str Nov 22 '18 at 12:56
  • I would check out Styled Components. It has support for multiple themes – weibenfalk Nov 22 '18 at 13:04

1 Answers1

0
  1. Have a state attribute with theme, and all corresponding data
  2. Set the theme of your components to this.props.currentTheme
  3. When you change the theme, you're just changing the data in currentTheme and all else will change too
mewc
  • 1,253
  • 1
  • 15
  • 24