usePrefersDarkMode

usePrefersDarkMode is a custom hook to query the users preference for dark mode.

Return value

The usePrefersDarkMode hook returns a boolean, true if the user prefers dark mode.

Import

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

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

Usage

Editable Example

The user prefers light mode

function Example() {
  const enabled = usePrefersDarkMode();

  return (
    <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" />
      The user prefers {enabled ? 'dark' : 'light'} mode
    </Flex>
  );
}

function Example() {
  const enabled = usePrefersDarkMode();
  return (
    <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" />
      The user prefers {enabled ? 'dark' : 'light'} mode
    </Flex>
  );
}