Next-theme NPM

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

Install the package as a dependency

npm install next-theme

or with yarn

yarn add next-theme

Usage

We need to wrap the component tree with our component and so it's recommend we do this in the _app file. If you haven't already got one, create a custom _app and wrap the Component with our ThemeProvider.

// Example pages/_app.js
import { ThemeProvider } from "next-theme";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Then we you can use our hook useTheme() to access and change the current theme

// Example hook usage
import { ThemeProvider } from "next-theme";
import useTheme from "next-theme";

function ThemeButtons() {
  const {setTheme, toggle, theme} = useTheme();
  return (
    <h1>Current theme: {theme}</h1>
    <button type="button" onClick={toggle}>
      Toggle theme
    </button>
    <button type="button" onClick={() => setTheme("light")}>
      Light theme
    </button>
    <button type="button" onClick={() => setTheme("dark")}>
      Dark theme
    </button>
  );
}

About The Project

I built this project to make theme handling much easier and hassell free. It's amazing how hard it is to handle theme changes so I hope this project makes your life easier

Features:

No horrible flash of incorrect theme (FOIT)
Easy to use hook and wrapper
Highly customisable
Lightweight

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.