You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →

Book a Demo Install Sign in

react-next-theme

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-next-theme

npm react-next-theme is a simple and flexible theme switcher for React and Next.js. It enables seamless toggling between light and dark modes, supports user preferences, and stores the selected theme in local storage. Easily integrate it into any Next.js

1.0.0

Source

npm

Version published: 9 months ago

Weekly downloads: 10

Maintainers: 0

Weekly downloads

Created: 9 months ago

Source

Here's an updated README.md file with the new package name, react-next-theme, and ready for users to copy-paste the code snippets and installation instructions:

# react-next-theme

`react-next-theme` is a simple and flexible theme switcher for React and Next.js. It allows for seamless toggling between light and dark modes, supports user preferences, and stores the selected theme in local storage.

## Features

- **Automatic Theme Detection**: Detects system-level theme preferences (light/dark).
- **Persistent Theme**: Automatically saves and loads the user's preferred theme using `localStorage`.
- **Easy Integration**: Simple integration with React and Next.js projects.
- **CSS Variables**: Uses CSS variables for dynamic theming.

## Installation

You can install the `react-next-theme` package using npm or yarn:

```bash
npm install react-next-theme

yarn add react-next-theme

Usage

React

To use the package in a React application, follow these steps:

Wrap Your App with ThemeProvider

In your main file (e.g., src/main.jsx or src/index.js), wrap your app in the ThemeProvider to provide theme context to the entire application.

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css'; // Import your global CSS
import { ThemeProvider } from 'react-next-theme';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Use useTheme to Toggle Theme

In your components, you can use the useTheme hook to toggle between light and dark modes:

// src/App.jsx
import React from 'react';
import { useTheme } from 'react-next-theme';

const App = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick={toggleTheme}>
        Toggle to {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </div>
  );
};

export default App;

Add CSS for Themes

Add CSS for your light and dark themes in your global styles (src/index.css):

/* src/index.css */

/* Default Light Theme */
:root {
  --bg-color: #ffffff;
  --text-color: #213547;
  --link-color: #646cff;
  --link-hover-color: #747bff;
  --button-bg-color: #f9f9f9;
  --button-text-color: #213547;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

[data-theme='dark'] {
  --bg-color: #242424;
  --text-color: rgba(255, 255, 255, 0.87);
  --link-color: #646cff;
  --link-hover-color: #535bf2;
  --button-bg-color: #1a1a1a;
  --button-text-color: #ffffff;
}

Next.js

react-next-theme works seamlessly with both the App Router and Pages Router in Next.js.

Next.js (App Router)

Wrap Your App with ThemeProvider

In app/layout.js or app/layout.tsx, wrap your app with ThemeProvider:

// app/layout.js
import './globals.css'; // Import global CSS
import { ThemeProvider } from 'react-next-theme';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Use useTheme to Toggle Theme

In any page or component, use the useTheme hook:

// app/page.js
import { useTheme } from 'react-next-theme';

export default function HomePage() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick={toggleTheme}>
        Toggle to {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </div>
  );
}

Add Global CSS

Add your CSS for light and dark themes in globals.css:

/* styles/globals.css */

:root {
  --bg-color: #ffffff;
  --text-color: #213547;
  --link-color: #646cff;
  --link-hover-color: #747bff;
  --button-bg-color: #f9f9f9;
  --button-text-color: #213547;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

[data-theme='dark'] {
  --bg-color: #242424;
  --text-color: rgba(255, 255, 255, 0.87);
  --link-color: #646cff;
  --link-hover-color: #535bf2;
  --button-bg-color: #1a1a1a;
  --button-text-color: #ffffff;
}

Next.js (Pages Router)

Wrap Your App with ThemeProvider

In pages/_app.js, wrap your app with ThemeProvider:

// pages/_app.js
import '../styles/globals.css';
import { ThemeProvider } from 'react-next-theme';

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

Use useTheme to Toggle Theme

In any page or component, use the useTheme hook:

// pages/index.js
import { useTheme } from 'react-next-theme';

export default function Home() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick={toggleTheme}>
        Toggle to {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </div>
  );
}

Add Global CSS

Add your CSS in globals.css:

/* styles/globals.css */

:root {
  --bg-color: #ffffff;
  --text-color: #213547;
  --link-color: #646cff;
  --link-hover-color: #747bff;
  --button-bg-color: #f9f9f9;
  --button-text-color: #213547;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

[data-theme='dark'] {
  --bg-color: #242424;
  --text-color: rgba(255, 255, 255, 0.87);
  --link-color: #646cff;
  --link-hover-color: #535bf2;
  --button-bg-color: #1a1a1a;
  --button-text-color: #ffffff;
}

Local Storage Support

The react-next-theme package automatically stores the user's theme preference in localStorage and loads it on page reload. This ensures a consistent experience across sessions.

System Preferences Detection

react-next-theme also detects the user's system-level theme preference (light or dark) using the prefers-color-scheme media query and applies it as the default theme if no preference is stored in localStorage.

License

react-next-theme is licensed under the MIT License.

Keywords

FAQs

What is react-next-theme?

Is react-next-theme popular?

Is react-next-theme well maintained?

Package last updated on 22 Oct 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-next-theme

Usage

React

Next.js

Next.js (App Router)

Next.js (Pages Router)

Local Storage Support

System Preferences Detection

License

Keywords

Related posts

Tracking Protestware Spread: 28 npm Packages Affected by Payload Targeting Russian-Language Users

Contagious Interview Campaign Escalates With 67 Malicious npm Packages and New Malware Loader