React Is it good way to use classnames for managing multiple themes?

Question

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?

Answer 1

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