set dark mode using react hooks typescript

Question

React beginner here, english is not my mother language sory for mistakes, i have been looking for setting dark mode on my website, examples what i have seen are mostly toggle between dark and light and you need to specify each colors inside those two. My point is how can i toggle between dark and light(this light should be my default colors set in css)

In my components each has its own css(own colors).If i want to have dark mode which toggles between dark and default css, for example changing background color, how would it be?

my code:

 import React, {useState, useEffect } from "react"; ... <div className="app"> <Switch> <Route path="/a"> <A /> </Route> <Route path="/c"> <C /> </Route> <Route path="/b"> <B /> </Route> <Route path="/"> <Redirect to="/a" /> </Route> </Switch> </div>

if need more information, i can give.

Answer 1

You can use a context provider to globally use and update the darkMode state and the local storage to make it persistent on each session. Make sure to parse your data before setting a item into the local storage.

Here is a live demo