diff --git a/README.md b/README.md index ed76e50..6816619 100644 --- a/README.md +++ b/README.md @@ -21,8 +21,7 @@ Quoting from the [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3) [level 5](https://drafts.csswg.org/mediaqueries-5) [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) specfication… -> The [`'prefers-color-scheme'`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) media feature -> indicates whether the content is displayed normally, or whether colors have been inverted. +> The [`'prefers-color-scheme'`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) media feature reflects the user’s desire that the page use a light or dark color theme. :high_brightness: **`prefersColorScheme()`** is part of :crystal_ball: [**Magica11y**](https://magica11y.github.io), which provides a suite of functions to detect “user-preference” and “environment” media features. @@ -92,12 +91,10 @@ const enableDarkTheme = (preferredColorScheme === colorSchemes.DARK); The `colorSchemes` object contains all the possible values supported by the `'prefers-color-scheme'` media query… -* `colorSchemes.NO_PREFERENCE` (spec: [`'no-preference'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-color-scheme-no-preference)) - > Indicates that the user has made no preference known to the system. * `colorSchemes.LIGHT` (spec: [`'light'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-color-scheme-light)) - > Indicates that user has notified the system that they prefer a page that has a light theme (dark text on light background). + > Indicates that user has expressed the preference for a page that has a light theme (dark text on light background), or has not expressed an active preference (and thus should receive the "web default" of a light theme). * `colorSchemes.DARK` (spec: [`'dark'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-color-scheme-dark)) - > Indicates that user has notified the system that they prefer a page that has a dark theme (light text on dark background). + > Indicates that user has expressed the preference for a page that has a dark theme (light text on dark background). * `null` > The user’s preference could not be determined. diff --git a/src/colorSchemes.js b/src/colorSchemes.js index 1362d39..5a13141 100644 --- a/src/colorSchemes.js +++ b/src/colorSchemes.js @@ -1,11 +1,9 @@ // @flow const colorSchemes: {| - NO_PREFERENCE: string, DARK: string, LIGHT: string, |} = Object.freeze({ - NO_PREFERENCE: 'no-preference', DARK: 'dark', LIGHT: 'light', }); diff --git a/src/prefersColorScheme.js b/src/prefersColorScheme.js index f3e2efa..c1aea93 100644 --- a/src/prefersColorScheme.js +++ b/src/prefersColorScheme.js @@ -4,22 +4,19 @@ import matchUserPreference from '@magica11y/match-user-preference'; import colorSchemes, { type ColorScheme } from './colorSchemes'; -const contrastPreferenceValues: Array = [ - colorSchemes.NO_PREFERENCE, - colorSchemes.DARK, - colorSchemes.LIGHT, -]; +const colorSchemePreferenceValues: Array = [colorSchemes.DARK, colorSchemes.LIGHT]; /** * Detects user’s color scheme preferences * using CSS3 Media Queries level 5 specification for `'prefers-color-scheme'`. * - * @returns Either 'no-preference', 'dark', 'light' or `null` + * @returns Either 'dark', 'light' or `null` * @see https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme */ const prefersColorScheme = (): ?ColorScheme => { - const preferredColorScheme: ?ColorScheme = contrastPreferenceValues.find((contrastPreferenceValue: ColorScheme) => - matchUserPreference('prefers-color-scheme', contrastPreferenceValue), + const preferredColorScheme: ?ColorScheme = colorSchemePreferenceValues.find( + (colorSchemePreferenceValue: ColorScheme) => + matchUserPreference('prefers-color-scheme', colorSchemePreferenceValue), ); if (preferredColorScheme) { diff --git a/test/prefersColorScheme.test.js b/test/prefersColorScheme.test.js index 1019d98..ba9b37b 100644 --- a/test/prefersColorScheme.test.js +++ b/test/prefersColorScheme.test.js @@ -2,42 +2,29 @@ import mockWindowMatchMedia from '@magica11y/match-user-preference/lib/testing/mockWindowMatchMedia'; -import prefersColorScheme, { colorSchemes, type ColorScheme } from '../src'; +import prefersColorScheme, { colorSchemes } from '../src'; describe('prefersColorScheme()', () => { - it('returns a color scheme preference when media-query matches', () => { - type TestParameter = {| - testInput: ColorScheme, - expectedOutput: ColorScheme, - |}; - - const testParameters: Array = [ - { - testInput: colorSchemes.NO_PREFERENCE, - expectedOutput: 'no-preference', - }, - { - testInput: colorSchemes.DARK, - expectedOutput: 'dark', - }, - { - testInput: colorSchemes.LIGHT, - expectedOutput: 'light', - }, - ]; - - testParameters.forEach((testParameter: TestParameter) => { + afterEach(() => { + window.matchMedia.mockClear(); + }); + + it.each` + testInput | expectedOutput + ${colorSchemes.DARK} | ${'dark'} + ${colorSchemes.LIGHT} | ${'light'} + `( + 'returns "$expectedOutput" when color scheme preference media-query matches "$testInput"', + ({ testInput, expectedOutput }) => { window.matchMedia = jest .fn() - .mockImplementation(() => mockWindowMatchMedia(true, `(prefers-color-scheme: ${testParameter.testInput})`)); + .mockImplementation(() => mockWindowMatchMedia(true, `(prefers-color-scheme: ${testInput})`)); const preferredColorScheme = prefersColorScheme(); - expect(preferredColorScheme).toEqual(testParameter.expectedOutput); - - window.matchMedia.mockClear(); - }); - }); + expect(preferredColorScheme).toEqual(expectedOutput); + }, + ); it('returns "null" when preference cannot be determined', () => { window.matchMedia = jest.fn().mockImplementation(() => mockWindowMatchMedia(false, 'not all'));