$ npm install -s react-day-theme-toggle

Using yarn:

$ yarn install -s react-day-theme-toggle

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";
import {ThemeContextProvider} from "react-day-theme-toggle/ThemeContextProvider";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
      <ThemeContextProvider>
          <App/>
      </ThemeContextProvider>
  </React.StrictMode>
);

import {useThemeContext} from "react-day-theme-toggle/ThemeContextProvider";

function App() {

    const {theme, setTheme} = useThemeContext()

    return (
        <div>
            {theme}
        </div>
    );
}

export default App;

Finally use the component DayNightToggle to display a nice toggle in your header or somewhere else. We will be allowing you to choose different style versions of the toggle in next versions.

Beware to wrap the component in a div, the toggle will take 100% of its parent width.

import React from 'react';
import DayNightToggle from "react-day-theme-toggle/DayNightToggle";

const Header = () => {
    return (
        <div>
            <DayNightToggle style={"classic"}/>
        </div>
    );
};

export default Header;