How to Change Icon Color in React in Dark and Light Mode?-CodePudding

const mystyle = {
height: "30px",
marginTop: "10px",

}; const mycolor = { color: "green" }

<InfoBox

          size="150"
          Number="My Number 1"
          Name="Update Now"
          icon={<FontAwesomeIcon icon={faComment} style={{...mystyle, ...mycolor}}/>}
          classes="icon-primary"
        />

CodePudding user response：

<FontAwesomeIcon icon={faComment} color={mycolor} style={{...mystyle}}

CodePudding user response：

how are you tracking the mode change? if that is a variable or a state variable then you can simply add a ternary operator in style object. depending on the mode, you can use your style using ternary operator.

for example:

<h2
    style={
      count > 0
        ? {backgroundColor: 'lime', color: 'white'}
        : {backgroundColor: 'salmon', color: 'powderblue'}
    }
  >
    Count: {count}
  </h2>

Or, Follow this link: Ternary operator on style with React Js Es 6