diff --git a/src/mantine-hooks/src/use-color-scheme/use-color-scheme.story.tsx b/src/mantine-hooks/src/use-color-scheme/use-color-scheme.story.tsx
new file mode 100644
index 00000000000..02593e809ba
--- /dev/null
+++ b/src/mantine-hooks/src/use-color-scheme/use-color-scheme.story.tsx
@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { useColorScheme } from './use-color-scheme';
+
+const Demo = () => {
+ const colorScheme = useColorScheme(undefined, {
+ getInitialValueInEffect: false,
+ });
+ const [history, setHistory] = useState([]);
+
+ useEffect(() => {
+ setHistory((current) => [...current, colorScheme]);
+ }, [colorScheme, setHistory]);
+
+ return (
+
+ {history.map((mode, i) => (
+
Color Scheme: {mode}
+ ))}
+
+ );
+};
+
+storiesOf('Hooks/use-color-scheme', module).add('General usage', () => (
+
+
+
+));
diff --git a/src/mantine-hooks/src/use-color-scheme/use-color-scheme.test.tsx b/src/mantine-hooks/src/use-color-scheme/use-color-scheme.test.tsx
new file mode 100644
index 00000000000..6771b44dd56
--- /dev/null
+++ b/src/mantine-hooks/src/use-color-scheme/use-color-scheme.test.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+// import { renderHook } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react';
+import { useColorScheme } from './use-color-scheme';
+
+describe('@maintine/hooks/use-color-scheme', () => {
+ let trace = jest.fn<(colorScheme: string) => void, string[]>();
+ const mockmatchMedia = jest.fn().mockImplementation(() => ({
+ matches: true,
+ media: '',
+ onchange: null,
+ addListener: jest.fn(),
+ removeListener: jest.fn(),
+ }));
+ const retainMatchMedia = window.matchMedia;
+ beforeEach(() => {
+ trace = jest.fn();
+ window.matchMedia = retainMatchMedia;
+ });
+ function WrapperComponent({
+ initialValue,
+ getInitialValueInEffect = true,
+ }: {
+ initialValue?: 'light' | 'dark';
+ getInitialValueInEffect?: boolean;
+ }) {
+ const colorScheme = useColorScheme(initialValue, {
+ getInitialValueInEffect,
+ });
+ trace(colorScheme);
+ return <>{colorScheme}>;
+ }
+
+ it('correctly returns initial dark state without useEffect', async () => {
+ render();
+ expect(trace).toHaveBeenCalledTimes(2);
+ expect(trace.mock.calls[0][0]).toBe('dark');
+ expect(trace.mock.calls[1][0]).toBe('light');
+ });
+ it('correctly returns initial dark state state without useEffect', async () => {
+ window.matchMedia = mockmatchMedia;
+ render();
+ expect(trace).toHaveBeenCalledTimes(1);
+ expect(trace.mock.calls[0][0]).toBe('dark');
+ });
+
+ it('correctly returns initial light state with useEffect', async () => {
+ render();
+ expect(trace).toHaveBeenCalledTimes(2);
+ expect(trace.mock.calls[0][0]).toBe('dark');
+ expect(trace.mock.calls[1][0]).toBe('light');
+ });
+ it('correctly returns initial dark state with useEffect', async () => {
+ window.matchMedia = mockmatchMedia;
+ render();
+ expect(trace).toHaveBeenCalledTimes(1);
+ expect(trace.mock.calls[0][0]).toBe('dark');
+ });
+ it('correctly returns initial light state with deafult props', async () => {
+ render();
+ expect(trace).toHaveBeenCalledTimes(1);
+ expect(trace.mock.calls[0][0]).toBe('light');
+ });
+ it('correctly returns initial dark state with deafult props', async () => {
+ window.matchMedia = mockmatchMedia;
+ render();
+ expect(trace).toHaveBeenCalledTimes(2);
+ expect(trace.mock.calls[0][0]).toBe('light');
+ expect(trace.mock.calls[1][0]).toBe('dark');
+ });
+});
diff --git a/src/mantine-hooks/src/use-media-query/use-media-query.ts b/src/mantine-hooks/src/use-media-query/use-media-query.ts
index 923eaf485da..88f04b4abc4 100644
--- a/src/mantine-hooks/src/use-media-query/use-media-query.ts
+++ b/src/mantine-hooks/src/use-media-query/use-media-query.ts
@@ -40,7 +40,7 @@ export function useMediaQuery(
}
) {
const [matches, setMatches] = useState(
- getInitialValueInEffect ? false : getInitialValue(query, initialValue)
+ getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
);
const queryRef = useRef();