Enable DarkMode not working properly

Joined
Mar 9, 2023
Messages
3
Reaction score
0
I am trying to use switch in bootstrap in order to enable DarkMode


Code:
<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,

JavaScript:
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>

    </>

  );

}
 
Last edited:
Joined
Sep 4, 2022
Messages
125
Reaction score
16
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,704
Messages
2,569,334
Members
44,617
Latest member
ConcettaTa

Latest Threads

Top