usePreferredColorScheme

Returns dark or light based on the user's color scheme preference (prefers-color-scheme).

• light: Returned when the user prefers the light theme on their system, or has not indicated any preference.
• dark: Returned when the user has indicated they prefer the dark theme on their system.

Users can specify their preferred theme in their operating system settings or user agent settings.

Code

🔗 View source code

Interface

typescript

const usePreferredColorScheme: () => "dark" | "light"

Remarks

References

• Prefers Color Scheme - MDN

Usage

typescript

import { usePreferredColorScheme } from '@modern-kit/react';

const Example = () => {
  const colorScheme = usePreferredColorScheme();

  return (
    <div>
      <p>Try changing the theme in your OS system settings.</p>
      <p>ColorScheme: <b>{colorScheme}</b></p>
    </div>
  );
};

Example

Image

1. Light Theme

2. Dark Theme