React Day Theme Toggle

A beautiful day / night theme toggle with his context for your react application

Versions

NPM : 9.6.7

Dependencies

React : 18.2.0

---

Installing

Using npm:

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

Using yarn:

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

---

Working with it

The module exports a component called ThemeContextProvider, that has to wrap your application and provides those two values : {theme, setTheme}, the theme value is a boolean and can be false (for day) / true (for night). So first, wrap your app inside the component ThemeContextProvider.

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>
);

Then you can access the values of the theme state with the custom hook useThemeContext

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;

---

Styles

Default

use this props : style={"classic"}

Desert

use this props : style={"desert"}

Minimalist

use this props : style={"minimalist"}

Second Minimalist

use this props : style={"second_minimalist"}