Enable DarkMode not working properly

[sscrock1234]

I am trying to use switch in bootstrap in order to enable DarkMode

<div
        className="container"
        style={{ color: props.mode === "dark" ? "white" : "black" }}
      >
        <h1>{props.heading}</h1>
        <div className="form-group">
          <textarea
            className="form-control"
            value={text}
            id="exampleFormControlTextarea1"
            rows="8"
            onChange={handleOnChange}
            style={{
              backgroundColor: props.mode === "dark" ? "grey" : "white",
              color: props.mode === "dark" ? "white" : "black",
            }}
          ></textarea>
        </div>

However, the textArea does not change,

Here is App.js code,

function App() {

  const [mode, setMode] = useState("light");

  const toggleMode = () => {

    if (mode === "light") {

      setMode("dark");

      document.body.style.backgroundColor = "grey";

    } else {

      setMode("light");

      document.body.style.backgroundColor = "white";

    }

  };

  return (

    <>

      <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />

      <div className="container">

        <TextForm

          heading="Write your text here"

          button1="Convert To Uppercase"

          button2="Convert To LowerCase"

          button3="Clear"

        />

      </div>

    </>

  );

}

 

[FResher]

Hello sscrock1234 !

as a good advise, put all your css in a aside file '.css',
you'll gain at 'grouping' your style. ( for less codelines )

create one class for 'light' and one other for 'dark' in a first time.
a fair option to load style, is by jquery or native Js : with addClass and removeClass , or css("attr","value");

I'm not used to bootstrap, I can't help you by bootstrap.