Проверка предпочтительной цветовой схемы пользователя может быть полезна при разработке веб-сайтов или приложений, поскольку позволяет обеспечить более персонализированный и визуально привлекательный опыт. В этой статье блога мы рассмотрим несколько методов с примерами кода для определения предпочтительной цветовой схемы пользователя.

Метод 1: использование метода window.matchMedia()

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // User prefers dark color scheme
  console.log('Dark mode is preferred');
} else {
  // User prefers light color scheme
  console.log('Light mode is preferred');
}

Метод 2: доступ к объекту window.localStorage

if (localStorage.getItem('preferredColorScheme') === 'dark') {
  // User prefers dark color scheme
  console.log('Dark mode is preferred');
} else {
  // User prefers light color scheme
  console.log('Light mode is preferred');
}

Метод 3: использование объекта window.navigator

if (window.navigator.userAgent.includes('Dark')) {
  // User prefers dark color scheme
  console.log('Dark mode is preferred');
} else {
  // User prefers light color scheme
  console.log('Light mode is preferred');
}

Метод 4. Анализ медиазапросов CSS

// Define a CSS media query for dark color scheme
const darkSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
// Define a callback function to handle changes in the color scheme
const handleColorSchemeChange = (event) => {
  if (event.matches) {
    // User prefers dark color scheme
    console.log('Dark mode is preferred');
  } else {
    // User prefers light color scheme
    console.log('Light mode is preferred');
  }
};
// Add the callback function as a listener to the media query
darkSchemeQuery.addListener(handleColorSchemeChange);
// Check the initial color scheme preference
handleColorSchemeChange(darkSchemeQuery);

Это всего лишь несколько способов проверить предпочтительную цветовую схему пользователя. Вы можете выбрать тот, который лучше всего соответствует вашим требованиям, и реализовать его в своем проекте.