hd-utils/lib/utils/browser/getUserColorSchemePreference.js

A handy utils for modern JS developers

import isBrowser from '../validation/isBrowser';
import getWindowObj from './getWindow';
/**
 * @description Retrieves the user's preferred color scheme ('light' or 'dark') based on their system settings.
 * @example
 * const userColorScheme = getUserColorSchemePreference();
 *
 * container.style.backgroundColor = userColorScheme === 'dark' ? '#121212' : '#ffffff';
 *
 */
export default function getUserColorSchemePreference() {
    let color = 'light';
    if (!isBrowser())
        return color;
    const window = getWindowObj();
    if (window.matchMedia &&
        window.matchMedia('(prefers-color-scheme: dark)').matches) {
        color = 'dark';
    }
    return color;
}