DarkModeToggle

What is it?

A component you can use to toggle dark mode in a React app based on Tailwind class toggling.

Getting started

Requirements

The component uses @heroicons/react and @headlessui/react. It also assumes that you are using Tailwind and have it properly configured.

Usage

npm install --save DarkModeToggle
or
yarn add DarkModeToggle

Change the tailwind.config.js to

/** @type {import('tailwindcss').Config} */
module.exports = {
    // ...
    darkMode: 'class',
    // ...
}

And add the component where you want to toggle light/dark mode with

import DarkModeToggle from 'DarkModeToggle';

<DarkModeToggle/>

Properties

All props are optionals and used to override a default.

| prop name | default | |------------|---------------------| | lightIcon | SunIcon | | darkIcon | MoonIcon | | systemIcon | ComputerDesktopIcon |

Capabilities

There are 3 possibilities when toggling:

• light mode
• dark mode
• system (this will change based on the system preferences)

It uses media query to check the system settings and local storage to save an eventual override. This means that users will have their choices saved on the next visit.