🌙 Themed Toaster ─ Wrapper for `react-hot-toast` to add theming support using `next-themes` & `react-use`

Toaster.component.tsx

import { Toaster as RHToaster } from 'react-hot-toast';
import { useMedia } from 'react-use';
import { useTheme } from 'next-themes';

import type { WithProps } from '~/types';

enum ThemeType {
  LIGHT = 'light',
  DARK = 'dark',
  SYSTEM = 'system',
}

const colors = {
  gray: {
    50: '...',
    100: '...',
    200: '...',
    300: '...',
    400: '...',
    500: '...',
    600: '...',
    700: '...',
    800: '...',
    900: '...',
  },
};

interface ToasterProps extends WithProps<typeof RHToaster> {}

export function Toaster({ toastOptions, ...rest }: ToasterProps): JSX.Element {
  const { theme } = useTheme();

  const prefersDarkColorScheme = useMedia(
    '(prefers-color-scheme: dark)',
    false
  );

  const isDark =
    theme === ThemeType.SYSTEM
      ? prefersDarkColorScheme
      : theme === ThemeType.DARK;

  return (
    <RHToaster
      {...rest}
      toastOptions={{
        ...toastOptions,
        style: {
          ...toastOptions?.style,
          background: isDark ? colors?.gray[900] : colors?.gray[50],
          borderColor: isDark ? colors?.gray[800] : colors?.gray[100],
          borderWidth: '2px',
          color: isDark ? colors?.gray[400] : colors?.gray[700],
        },
      }}
    />
  );
}