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

userSu5m1 0
Viewed 31
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"
/>
reactjs css
2 Answers
<FontAwesomeIcon icon={faComment} color={mycolor} style={{...mystyle}}
vatsal soni0

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

hhhameem0
Related