Dark-mode-context NPM

dark-mode-context

A simple context provider for dark mode. It can be used in combination with Tailwind CSS to apply dark mode class with support for respecting the user's system preferences.

It also includes a few components that Utilise Headless UI to make a accesable menu to control the dark mode. Note: this not tested yet.

A Demo can be found here, and the source code can be found here.

Install

npm install --save dark-mode-context
yarn add dark-mode-context

Usage

import React, { Component } from 'react'

import { DarkModeProvider,DarkModeMenu } from 'dark-mode-context'

const App = () => (
  <DarkModeProvider injectDarkClass>
    <div>
      <h1>Hello World</h1>
      <DarkModeMenu />
    </div>
  </DarkModeProvider>
)

import React, { Component } from 'react'
import { useDarkModeContext, DarkModeProvider } from 'dark-mode-context'

const MyButton = () => {
  const {isDark, toggleDarkMode} = useDarkModeContext()

  return (
    <button onClick={toggleDarkMode}>
      {isDark ? 'Dark Mode' : 'Light Mode'}
    </button>
  )
}

const App = () => (
  <DarkModeProvider injectDarkClass>
    <div>
      <h1>Hello World</h1>
      <MyButton />
    </div>
  </DarkModeProvider>
)

Props

DarkModeProvider

injectDarkClass: boolean - Whether the DarkModeProvider should start in dark mode or not. Defaults to false
wrapAs: React.ElementType | undefined - The element to wrap the children in. Defaults to undefined
darkClassName: string - The class name to be used for dark mode. Defaults to dark
lightClassName: string - The class name to be used for light mode. Defaults to ''
children: React.ReactNode - The children of the DarkModeProvider

Note: when wrapAs is not set, and injectDarkClass is set to true, the dark class will be added to the root element <html>.

DarkModeMenu

as: React.ElementType - The element to be used for the menu. Defaults to React.Fragment
className: string | undefined - The class name to be used for the menu. Defaults to undefined
darkBtn: React.ReactNode - The button to be used for dark mode. Defaults to DarkBtn
lightBtn: React.ReactNode - The button to be used for light mode. Defaults to LightBtn
systemBtn: React.ReactNode - The button to be used for system mode. Defaults to SystemBtn
menuToggleBtn: React.ReactNode - The button to be used for toggling the menu. Defaults to MenuToggleBtn

Note: This component requires HeadlessUI to be installed, which can be done by running npm install --save headlessui.

DarkBtn, LightBtn, SystemBtn, MenuToggleBtn

onClick: () => void - The function to be called when the button is clicked. Defaults to undefined
className: string | undefined - The class name to be used for the button. Defaults to undefined

Note: These components uses Tailwind CSS to style the button. they can be styled by passing a class name to the className prop.

License

dark mode context provider react tailwindcss tailwindcss-dark-mode react-tailwindcss react-context hooks context-provider context-provider-hooks

@infinitebrahmanuniverse/nolb-dar @everything-registry/sub-chunk-1442

1.0.0-alpha.3

4 years ago

1.0.0-alpha.2

4 years ago

1.0.0-alpha.1

4 years ago