useDarkMode

useDarkMode is a custom hook to handle toggling dark mode and storing it in local storage. It will also get the user's preference to set the initial state.

Return value

The useDarkMode hook returns an an array with currentValue, and a setter.

Import

import { useDarkMode } from '@sajari-ui/core';

import { useDarkMode } from '@sajari-ui/core';

Usage

Editable Example

Dark mode

Currently in light mode

function Example() {
  const [enabled, setEnabled] = useDarkMode();

  return (
    <>
      <Switch checked={enabled} readOnly onChange={(e) => setEnabled(e.target.checked)}>
        Dark mode
      </Switch>

      <Flex
        alignItems="items-center"
        backgroundColor={enabled ? 'bg-gray-900' : 'bg-gray-50'}
        textColor={enabled ? 'text-white' : 'text-gray-600'}
        transitionProperty="transition-all"
        transitionDuration="duration-200"
        borderRadius="rounded"
        margin="mt-4"
        padding={['px-4', 'py-2']}
      >
        <Icon name={enabled ? 'moon' : 'sun'} margin="mr-3" />
        Currently in {enabled ? 'dark' : 'light'} mode
      </Flex>
    </>
  );
}

function Example() {
  const [enabled, setEnabled] = useDarkMode();
  return (
    <>
      <Switch checked={enabled} readOnly onChange={(e) => setEnabled(e.target.checked)}>
        Dark mode
      </Switch>
      <Flex
        alignItems="items-center"
        backgroundColor={enabled ? 'bg-gray-900' : 'bg-gray-50'}
        textColor={enabled ? 'text-white' : 'text-gray-600'}
        transitionProperty="transition-all"
        transitionDuration="duration-200"
        borderRadius="rounded"
        margin="mt-4"
        padding={['px-4', 'py-2']}
      >
        <Icon name={enabled ? 'moon' : 'sun'} margin="mr-3" />
        Currently in {enabled ? 'dark' : 'light'} mode
      </Flex>
    </>
  );
}