Skip to content

Commit

Permalink
Deprecate 'no-preference' as it is no longer supported
Browse files Browse the repository at this point in the history
Fixes #1
  • Loading branch information
rishabh-ink committed Aug 6, 2021
1 parent 35fd0ee commit ec4470b
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 45 deletions.
9 changes: 3 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 0 additions & 2 deletions src/colorSchemes.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
// @flow

const colorSchemes: {|
NO_PREFERENCE: string,
DARK: string,
LIGHT: string,
|} = Object.freeze({
NO_PREFERENCE: 'no-preference',
DARK: 'dark',
LIGHT: 'light',
});
Expand Down
13 changes: 5 additions & 8 deletions src/prefersColorScheme.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,19 @@ import matchUserPreference from '@magica11y/match-user-preference';

import colorSchemes, { type ColorScheme } from './colorSchemes';

const contrastPreferenceValues: Array<ColorScheme> = [
colorSchemes.NO_PREFERENCE,
colorSchemes.DARK,
colorSchemes.LIGHT,
];
const colorSchemePreferenceValues: Array<ColorScheme> = [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) {
Expand Down
45 changes: 16 additions & 29 deletions test/prefersColorScheme.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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<TestParameter> = [
{
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'));
Expand Down

0 comments on commit ec4470b

Please sign in to comment.