react-hook-theme

Switch between dark and light mode in your React application with ease.

Features

• Provides the theme context to components
• Hook to retrieve and change the current theme
• Optional toggle to switch between dark and light mode
• Automatic detection of users' browser settings
• Optionally persists the selected theme to local storage
• Ready for Next.js

Example

Check out the CodeSandbox for a working example.

Another example is also included in the example folder of the repository.

Installation

yarn add react-hook-theme

# or

npm install react-hook-theme

Basic usage

Provider

Wrap the application in the ThemeProvider. Optionally provide settings via the options prop.

/*
 * index.tsx
 */

import { ThemeProvider } from 'react-hook-theme';

// ...
<ThemeProvider
    options={{
        theme: 'dark',
        save: true,
    }}
>
    <App />
</ThemeProvider>;
// ...

Options Prop

| Name | Type | Required | Description | Default | | ----- | ------- | -------- | ---------------------------------------- | ------- | | theme | Theme | | The default theme as a fallback | dark | | save | boolean | | Save theme to local storage when changed | false |

Styling of Dark / Light Mode

Adjust the styling of your app by utilizing css variables:

/*
 * style.css
 */

:root {
    --background: #fff;
    --primary: #000;
}

[data-theme='light'] {
    --background: #fff;
    --primary: #000;
}

[data-theme='dark'] {
    --background: #282c34;
    --primary: #fff;
}

// ...

body {
    background-color: var(--background);
    color: var(--primary);
}

Toggle

Optionally use the toggle component to render a switch to change between dark and light mode.

/*
 * App.tsx
 */

import { Toggle } from 'react-hook-theme';

// styling
import 'react-hook-theme/dist/styles/style.css';

// ...
<header>
    <Toggle />
</header>;

Props

| Name | Type | Required | Description | Default | | ---- | ------ | -------- | ------------------------------------- | ---------- | | id | string | | Sets the html id of the input element | rht-toggle |

Hooks

Use the provided useTheme hook to access or update the current theme

/*
 * App.tsx
 */

import { useTheme } from 'react-hook-theme';

// ...
const { theme, setTheme } = useTheme();

Return

| Object Name | Type | Description | | ----------- | ---------------------- | ------------------------ | | theme | Theme | The current theme | | setTheme | (theme: Theme) => void | Update the current theme | | options | ThemeOptions | Configuration of hook |