fingerprintjs

1
export const enum ContrastPreference {
2
  Less = -1,
3
  None = 0,
4
  More = 1,
5
  // "Max" can be added in future
6
  ForcedColors = 10,
7
}
8

9
/**
10
 * @see https://www.w3.org/TR/mediaqueries-5/#prefers-contrast
11
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
12
 */
13
export default function getContrastPreference(): number | undefined {
14
  if (doesMatch('no-preference')) {
15
    return ContrastPreference.None
16
  }
17
  // The sources contradict on the keywords. Probably 'high' and 'low' will never be implemented.
18
  // Need to check it when all browsers implement the feature.
19
  if (doesMatch('high') || doesMatch('more')) {
20
    return ContrastPreference.More
21
  }
22
  if (doesMatch('low') || doesMatch('less')) {
23
    return ContrastPreference.Less
24
  }
25
  if (doesMatch('forced')) {
26
    return ContrastPreference.ForcedColors
27
  }
28
  return undefined
29
}
30

31
function doesMatch(value: string) {
32
  return matchMedia(`(prefers-contrast: ${value})`).matches
33
}
34