diff --git a/README.md b/README.md
index aa4d268..f5ab36d 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,11 @@
 # use-dark-mode
 
 A custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a "dark mode" component for your application.
+The user setting persists to `localStorage`.
 
-[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)
+❤️ it? ⭐️ it on [GitHub](https://github.com/donavon/use-dark-mode/stargazers).
+
+[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=master)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)
 
 ![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)
 
@@ -27,21 +30,21 @@ A custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you
 
 ## New in Version 2.x
 
-* `useDarkMode` now persists between sessions. It stores the user setting in
-`localStorage`.
+- `useDarkMode` now persists between sessions. It stores the user setting in
+  `localStorage`.
 
-* It shares dark mode state with all other `useDarkMode` components on the page.
+- It shares dark mode state with all other `useDarkMode` components on the page.
 
-* It shares dark mode state with all other tabs/browser windows.
+- It shares dark mode state with all other tabs/browser windows.
 
-* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query
-(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))
-and a system that supports dark mode, such as macOS Mojave.
+- The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query
+  (currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))
+  and a system that supports dark mode, such as macOS Mojave.
 
-* Changing the system dark mode state will also change the state of `useDarkMode`
-(i.e, change to light mode in the system will change to light mode in your app).
+- Changing the system dark mode state will also change the state of `useDarkMode`
+  (i.e, change to light mode in the system will change to light mode in your app).
 
-* Support for Server Side Rendering (SSR) in version 2.2 and above.
+- Support for Server Side Rendering (SSR) in version 2.2 and above.
 
 ## Requirement
 
@@ -56,20 +59,22 @@ $ npm i use-dark-mode
 ## Usage
 
 ```js
-const darkMode = useDarkMode(initialState, optionalConfigObject);
+const darkMode = useDarkMode(initialState, darkModeConfig);
 ```
 
-### Config
+### Parameters
 
 You pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode
-by default) and an optional configuration object. The configuration object contains the following.
+by default) and an optional `darkModeConfig` object. The configuration object may contain the following keys.
 
-| Key         | Description                                                                                                                                                                                                                                                                                        |
-| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |
-| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |
-| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |
-| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |
+| Key               | Description                                                                                                                                                                                                                                                                                                               |
+| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `classNameDark`   | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                                                |
+| `classNameLight`  | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                                               |
+| `element`         | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                                           |
+| `onChange`        | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |
+| `storageKey`      | A string that will be used by the `storageProvider` to persist the dark mode value. If you specify a value of `null`, nothing will not be persisted. Default = `darkMode`.                                                                                                                                                                                                                   |
+| `storageProvider` | A storage provider. Default = `localStorage`. You will generally never need to change this value.                                                                                                                                                                                                                       |
 
 ### Return object
 
@@ -82,6 +87,10 @@ A `darkMode` object is returned with the following properties.
 | `disable()` | A function that allows you to set dark mode to `false`. |
 | `toggle()`  | A function that allows you to toggle dark mode.         |
 
+Note that because the methods don't require any parameters, you can call them
+direcly from an `onClick` handler from a button, for example
+(i.e., no lambda function is required).
+
 ## Example
 
 Here is a simple component that uses `useDarkMode` to provide a dark mode toggle control.
@@ -125,20 +134,19 @@ To prevent this, I've included some vanilla JavaScript that you can insert in yo
 You can either insert the contents of this file in a `<script>` tag or automate the
 step in your build process.
 
-## Live demo
+Note that if you change any of the default—such as `storageKey` or `classNameDark` for example—the `noflash.js` file will need to be modified with the same values.
+
+## Sample Apps
 
-You can view/edit a dark mode demo app on CodeSandbox.
+Here is a list of apps build with `use-dark-mode`.
+If you have an app you would like to include on this list, open a PR.
 
-[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)
+* [Demo App on CodeSandbox](https://codesandbox.io/s/mzj64x80ny) - by [@donavon](https://twitter.com/donavon)
 
 ## License
 
 **[MIT](LICENSE)** Licensed
 
----
-
-A special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.
-
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
diff --git a/__tests__/index.test.js b/__tests__/index.test.js
index ca7ae9c..25505ce 100644
--- a/__tests__/index.test.js
+++ b/__tests__/index.test.js
@@ -1,101 +1,210 @@
-import { testHook, cleanup } from 'react-testing-library';
+import { testHook, act, cleanup } from 'react-testing-library';
 import 'jest-dom/extend-expect';
 
 import useDarkMode from '../src';
 
 afterEach(cleanup);
 
-const createTestElement = obj => ({
+const createTestElement = arr => ({
   classList: {
     add: (className) => {
-      obj.method = 'add';
-      obj.className = className;
+      arr.push({ method: 'add', className });
     },
     remove: (className) => {
-      obj.method = 'remove';
-      obj.className = className;
+      arr.push({ method: 'remove', className });
     },
   },
 });
 
-describe('useDarkMode', () => {
-  test('import useDarkMode from "use-dark-mode"', () => {
-    expect(typeof useDarkMode).toBe('function');
+describe('useDarkMode without onChange', () => {
+  test('initializing with a default value will return false', () => {
+    let value;
+    testHook(() => {
+      ({ value } = useDarkMode(undefined, { storageKey: null }));
+    });
+    expect(value).toBe(false);
   });
 
-  // test('you can pass an `initialValue`', () => {
-  //   let value;
-  //   testHook(() => {
-  //     ({ value } = useDarkMode(true, { element: createTestElement({}) }));
-  //   });
-  //   expect(value).toBe(true);
-  // });
-
-  // test('`initialValue` defaults to `false`', () => {
-  //   let value;
-  //   testHook(() => {
-  //     ({ value } = useDarkMode(undefined, { element: createTestElement({}) }));
-  //   });
-  //   expect(value).toBe(false);
-  // });
-
-  // test('`config` is optional', () => {
-  //   let value;
-  //   testHook(() => {
-  //     ({ value } = useDarkMode());
-  //   });
-  //   expect(value).toBe(false);
-  // });
-
-  // test('`config.className` is applied to the element `config.element`', (done) => {
-  //   const test = {};
-  //   testHook(() => useDarkMode(true, { className: 'foo', element: createTestElement(test) }));
-  //   setTimeout(() => {
-  //     expect(test).toEqual({ className: 'foo', method: 'add' });
-  //     done();
-  //   }, 1);
-  // });
-
-  // test('you can pass a `config.onChange` that is called with the current value of dark mode', (done) => {
-  //   const onChange = (isDarkMode) => {
-  //     expect(isDarkMode).toBe(true);
-  //     done();
-  //   };
-  //   testHook(() => useDarkMode(true, { onChange }));
-  // });
-
-  // test('you can call `darkMode.enable` to set dark mode', () => {
-  //   let value;
-  //   let enable;
-  //   testHook(() => {
-  //     ({ value, enable } = useDarkMode(false, { element: createTestElement({}) }));
-  //   });
-  //   expect(value).toBe(false);
-  //   enable();
-  //   expect(value).toBe(true);
-  // });
-
-  // test('you can call `darkMode.disable` to clear dark mode', () => {
-  //   let value;
-  //   let disable;
-  //   testHook(() => {
-  //     ({ value, disable } = useDarkMode(true, { element: createTestElement({}) }));
-  //   });
-  //   expect(value).toBe(true);
-  //   disable();
-  //   expect(value).toBe(false);
-  // });
-
-  // test('you can call `darkMode.toggle` to toggle dark mode on/off/on', () => {
-  //   let value;
-  //   let toggle;
-  //   testHook(() => {
-  //     ({ value, toggle } = useDarkMode(true, { element: createTestElement({}) }));
-  //   });
-  //   expect(value).toBe(true);
-  //   toggle();
-  //   expect(value).toBe(false);
-  //   toggle();
-  //   expect(value).toBe(true);
-  // });
+  test('initializing with a value of false will return false', () => {
+    let value;
+    testHook(() => {
+      ({ value } = useDarkMode(false, { storageKey: null }));
+    });
+    expect(value).toBe(false);
+  });
+
+  test('initializing with a initial value of true will return true', () => {
+    let value;
+    testHook(() => {
+      ({ value } = useDarkMode(true, { storageKey: null }));
+    });
+    expect(value).toBe(true);
+  });
+
+  test('calling `enable` will return `true`', () => {
+    let value;
+    let enable;
+    testHook(() => {
+      ({ value, enable } = useDarkMode(false, { storageKey: null }));
+    });
+    act(enable);
+    expect(value).toBe(true);
+  });
+
+  test('calling `disable` will return `true`', () => {
+    let value;
+    let disable;
+    testHook(() => {
+      ({ value, disable } = useDarkMode(true, { storageKey: null }));
+    });
+    act(disable);
+    expect(value).toBe(false);
+  });
+
+  test('calling `toggle` will return flip from `true` to `false` and vice versa', () => {
+    let value;
+    let toggle;
+    testHook(() => {
+      ({ value, toggle } = useDarkMode(true, { storageKey: null }));
+    });
+    act(toggle);
+    expect(value).toBe(false);
+    act(toggle);
+    expect(value).toBe(true);
+  });
+
+  test('a media change to "light mode" will return true', () => {
+    let callback;
+
+    const mockGlobal = {
+      matchMedia: media => ({
+        media,
+        match: false,
+        addListener: (handler) => { callback = handler; },
+        removeistener: () => {},
+      }),
+    };
+
+    let value;
+    testHook(() => {
+      ({ value } = useDarkMode(false, { storageKey: null, global: mockGlobal }));
+    });
+    callback({ matches: true });
+    expect(value).toBe(true);
+  });
+
+  test('a media change to "dark mode" will return false', () => {
+    let callback;
+
+    const mockGlobal = {
+      matchMedia: media => ({
+        media,
+        match: true,
+        addListener: (handler) => { callback = handler; },
+        removeistener: () => {},
+      }),
+    };
+
+    let value;
+    testHook(() => {
+      ({ value } = useDarkMode(true, { storageKey: null, global: mockGlobal }));
+    });
+    callback({ matches: false });
+    expect(value).toBe(false);
+  });
+});
+
+describe('useDarkMode with onChange', () => {
+  test('calling `enable` will call handler with `true`', () => {
+    let enable;
+    const handler = jest.fn();
+    testHook(() => {
+      ({ enable } = useDarkMode(false, { storageKey: null, onChange: handler }));
+    });
+    act(enable);
+    expect(handler).toHaveBeenCalledWith(true);
+  });
+  test('calling `disable` will call handler with `true`', () => {
+    let disable;
+    const handler = jest.fn();
+    testHook(() => {
+      ({ disable } = useDarkMode(true, { storageKey: null, onChange: handler }));
+    });
+    act(disable);
+    expect(handler).toHaveBeenCalledWith(false);
+  });
+});
+
+describe('useDarkMode accepts a default `config`', () => {
+  test('calling `disable` will call handler with `true`', () => {
+    let value;
+    testHook(() => {
+      ({ value } = useDarkMode(true));
+    });
+    expect(value).toBe(true);
+  });
+});
+
+describe('useDarkMode and default `onChange`', () => {
+  test('`classNameDark` and `classNameDark` default', () => {
+    const calls = [];
+    const mockElement = createTestElement(calls);
+
+    testHook(() => {
+      (useDarkMode(true, {
+        storageKey: null,
+        element: mockElement,
+      }));
+    });
+    expect(calls.length).toBe(2);
+    expect(calls[0]).toEqual({ method: 'add', className: 'dark-mode' });
+    expect(calls[1]).toEqual({ method: 'remove', className: 'light-mode' });
+  });
+
+  test('`classNameDark` and `classNameDark` can be specified in `config`', () => {
+    const calls = [];
+    const mockElement = createTestElement(calls);
+
+    let toggle;
+    testHook(() => {
+      ({ toggle } = useDarkMode(true, {
+        storageKey: null,
+        element: mockElement,
+        classNameDark: 'd',
+        classNameLight: 'l',
+      }));
+    });
+    expect(calls.length).toBe(2);
+    expect(calls[0]).toEqual({ method: 'add', className: 'd' });
+    expect(calls[1]).toEqual({ method: 'remove', className: 'l' });
+
+    act(toggle);
+    expect(calls.length).toBe(4);
+    expect(calls[2]).toEqual({ method: 'add', className: 'l' });
+    expect(calls[3]).toEqual({ method: 'remove', className: 'd' });
+  });
+
+  test('you can specify a custom `storageProvider` and a `storageKey', () => {
+    const data = [];
+    const mockProvider = {
+      getItem: () => null,
+      setItem: (key, value) => { data.push([key, value]); },
+    };
+
+    let toggle;
+    testHook(() => {
+      ({ toggle } = useDarkMode(true, {
+        storageKey: 'key',
+        storageProvider: mockProvider,
+        onChange: () => {},
+      }));
+    });
+    expect(data.length).toBe(1);
+    expect(data[0]).toEqual(['key', 'true']);
+
+    act(toggle);
+
+    expect(data.length).toBe(2);
+    expect(data[1]).toEqual(['key', 'false']);
+  });
 });
diff --git a/__tests__/initialize.test.js b/__tests__/initialize.test.js
new file mode 100644
index 0000000..aeffb85
--- /dev/null
+++ b/__tests__/initialize.test.js
@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import 'jest-dom/extend-expect';
+
+import initialize from '../src/initialize';
+
+const noop = () => {};
+
+const createTestElement = arr => ({
+  classList: {
+    add: (className) => {
+      arr.push({ method: 'add', className });
+    },
+    remove: (className) => {
+      arr.push({ method: 'remove', className });
+    },
+  },
+});
+
+const mockedWindowSupported = {
+  matchMedia: query => ({
+    addListener: noop,
+    removeListener: noop,
+    media: query,
+    matches: true,
+  }),
+};
+
+const mockedWindowNotSupported = {
+  matchMedia: () => ({
+    addListener: noop,
+    removeListener: noop,
+    media: 'not all',
+    matches: false,
+  }),
+};
+
+const testSuite = (g = global, { getInitialValue, getDefaultOnChange, mediaQueryEventTarget }) => {
+  const global = g;
+
+  describe('getInitialValue', () => {
+    test('import { getInitialValue } from "./utils"', () => {
+      expect(typeof getInitialValue).toBe('function');
+    });
+    test('is passed an initial value and returns that same value if isColorSchemeQuerySupported', () => {
+      const mql = global.matchMedia
+        ? global.matchMedia('(prefers-color-scheme: dark)')
+        : {};
+      const isColorSchemeQuerySupported = mql.media === '(prefers-color-scheme: dark)';
+
+      // const isColorSchemeQuerySupported = !!global.matchMedia;
+
+      if (isColorSchemeQuerySupported) {
+        expect(getInitialValue('foo')).toBe(true);
+      } else {
+        expect(getInitialValue('foo')).toBe('foo');
+      }
+    });
+  });
+
+  describe('mediaQueryEventTarget', () => {
+    test('is an object that supports an addEventListener method', () => {
+      expect(typeof mediaQueryEventTarget.addEventListener).toBe('function');
+      expect(mediaQueryEventTarget.addEventListener()).toBeUndefined();
+    });
+    test('is an object that supports an removeEventListener method', () => {
+      expect(typeof mediaQueryEventTarget.removeEventListener).toBe('function');
+      expect(mediaQueryEventTarget.removeEventListener()).toBeUndefined();
+    });
+  });
+
+  describe('getDefaultOnChange', () => {
+    test('is a function', () => {
+      expect(typeof getDefaultOnChange).toBe('function');
+    });
+    test('you pass it `element`, `classNameDark`, and `classNameLight`', () => {
+      const test = [];
+      const mockElement = createTestElement(test);
+      const defaultOnChange = getDefaultOnChange(mockElement, 'foo', 'bar');
+      expect(typeof defaultOnChange).toBe('function');
+    });
+    test('these are all optional', () => {
+      const defaultOnChange = getDefaultOnChange();
+      expect(typeof defaultOnChange).toBe('function');
+    });
+    test('it returns a function', () => {
+      expect(typeof getDefaultOnChange()).toBe('function');
+    });
+    test('if you pass it `false`, the "light mode" class is added to the element', () => {
+      const calls = [];
+      const mockElement = createTestElement(calls);
+      const defaultOnChange = getDefaultOnChange(mockElement, 'dark', 'light');
+      defaultOnChange(false);
+
+      expect(calls.length).toBe(2);
+      expect(calls[0]).toEqual({ method: 'add', className: 'light' });
+      expect(calls[1]).toEqual({ method: 'remove', className: 'dark' });
+    });
+    test('if you pass it `true`, the "dark mode" class is added to the element', () => {
+      const calls = [];
+      const mockElement = createTestElement(calls);
+      const defaultOnChange = getDefaultOnChange(mockElement, 'dark', 'light');
+      defaultOnChange(true);
+
+      expect(calls.length).toBe(2);
+      expect(calls[0]).toEqual({ method: 'add', className: 'dark' });
+      expect(calls[1]).toEqual({ method: 'remove', className: 'light' });
+    });
+  });
+};
+
+describe('calling initialize', () => {
+  test('with key)', () => {
+    const { usePersistedDarkModeState } = initialize('key');
+    expect(usePersistedDarkModeState).not.toBe(useState);
+  });
+
+  test('without key)', () => {
+    const { usePersistedDarkModeState } = initialize();
+    expect(usePersistedDarkModeState).toBe(useState);
+  });
+});
+
+describe('initialize with default', () => {
+  const global = undefined;
+  testSuite(global, initialize(null, null, global));
+});
+describe('initialize with an empty object (SSR)', () => {
+  const global = {};
+  testSuite(global, initialize(null, null, global));
+});
+describe('initialize with a mock `window` (browser with dark mode support)', () => {
+  const global = mockedWindowSupported;
+  testSuite(global, initialize(null, null, global));
+});
+describe('initialize with a mock `window` (browser without dark mode support)', () => {
+  const global = mockedWindowNotSupported;
+  testSuite(global, initialize(null, null, global));
+});
diff --git a/package-lock.json b/package-lock.json
index bf8759c..1f1e825 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "use-dark-mode",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index f77ceef..91e8aae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,9 @@
 {
   "name": "use-dark-mode",
-  "version": "2.2.2",
+  "publishConfig": {
+    "tag": "latest"
+  },
+  "version": "2.3.0",
   "description": "A custom React Hook to help you implement a \"dark mode\" component.",
   "main": "dist/use-dark-mode.js",
   "umd:main": "dist/use-dark-mode.umd.js",
@@ -52,14 +55,15 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "branches": 0,
-        "functions": 0,
-        "lines": 0,
-        "statements": 0
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
       }
     }
   },
   "dependencies": {
+    "@use-it/event-listener": "^0.1.2",
     "use-persisted-state": "^0.3.0"
   }
 }
diff --git a/src/index.js b/src/index.js
index c3342d7..fcd2ab7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,45 +1,50 @@
 import { useEffect, useCallback, useMemo } from 'react';
+import useEventListener from '@use-it/event-listener';
 
-import {
-  usePersistedDarkModeState,
-  getInitialValue,
-  getOnChange,
-  mql,
-} from './utils';
+import initialize from './initialize';
 
 const ONCE = [];
 
-const useDarkMode = (initialValue = false, config = {}) => {
-  const [state, setState] = usePersistedDarkModeState(
-    getInitialValue(initialValue)
-  );
-
-  const {
-    onChange, element, classNameDark, classNameLight,
-  } = config;
-
-  const stateChangeCallback = useMemo(() => getOnChange(config), [
-    onChange,
+const useDarkMode = (
+  initialValue = false,
+  {
     element,
     classNameDark,
     classNameLight,
-  ]);
+    onChange,
+    storageKey = 'darkMode',
+    storageProvider,
+    global,
+  } = {}
+) => {
+  const {
+    usePersistedDarkModeState,
+    getDefaultOnChange,
+    getInitialValue,
+    mediaQueryEventTarget,
+  } = useMemo(
+    () => initialize(storageKey, storageProvider, global),
+    [storageKey, storageProvider, global]
+  );
+
+  const [state, setState] = usePersistedDarkModeState(getInitialValue(initialValue));
 
-  useEffect(
-    () => {
-      stateChangeCallback(state);
-    },
-    [stateChangeCallback, state]
+  const stateChangeCallback = useMemo(
+    () => onChange || getDefaultOnChange(element, classNameDark, classNameLight),
+    [onChange, element, classNameDark, classNameLight]
   );
 
+  // Call the onChange handler
   useEffect(() => {
-    const mediaChangeHandler = ({ matches }) => setState(matches);
-
-    mql.addListener(mediaChangeHandler);
-    return () => {
-      mql.removeListener(mediaChangeHandler);
-    };
-  }, ONCE);
+    stateChangeCallback(state);
+  }, [stateChangeCallback, state]);
+
+  // Listen for media changes and set state.
+  useEventListener(
+    'change',
+    ({ matches }) => setState(matches),
+    mediaQueryEventTarget
+  );
 
   return {
     value: state,
diff --git a/src/initialize.js b/src/initialize.js
new file mode 100644
index 0000000..791384d
--- /dev/null
+++ b/src/initialize.js
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import createPersistedState from 'use-persisted-state';
+
+const noop = () => {};
+
+const mockElement = {
+  classList: {
+    add: noop,
+    remove: noop,
+  },
+};
+
+const preferDarkQuery = '(prefers-color-scheme: dark)';
+
+const initialize = (storageKey, storageProvider, glbl = global) => {
+  const usePersistedDarkModeState = storageKey
+    ? createPersistedState(storageKey, storageProvider)
+    : useState;
+
+  const mql = glbl.matchMedia ? glbl.matchMedia(preferDarkQuery) : {};
+
+  const mediaQueryEventTarget = {
+    addEventListener: (_, handler) => mql.addListener && mql.addListener(handler),
+    removeEventListener: (_, handler) => mql.removeListener && mql.removeListener(handler),
+  };
+
+  const isColorSchemeQuerySupported = mql.media === preferDarkQuery;
+
+  const getInitialValue = usersInitialState => (
+    isColorSchemeQuerySupported ? mql.matches : usersInitialState
+  );
+
+  // Mock element if SSR else real body element.
+  const defaultElement = (glbl.document && glbl.document.body) || mockElement;
+
+  const getDefaultOnChange = (
+    element = defaultElement,
+    classNameDark = 'dark-mode',
+    classNameLight = 'light-mode'
+  ) => (val) => {
+    element.classList.add(val ? classNameDark : classNameLight);
+    element.classList.remove(val ? classNameLight : classNameDark);
+  };
+
+  return {
+    usePersistedDarkModeState,
+    getDefaultOnChange,
+    mediaQueryEventTarget,
+    getInitialValue,
+  };
+};
+
+export default initialize;
diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index 83e6461..0000000
--- a/src/utils.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import createPersistedState from 'use-persisted-state';
-
-const usePersistedDarkModeState = createPersistedState('darkMode');
-
-const noop = () => {};
-
-const mockElement = {
-  classList: {
-    add: noop,
-    remove: noop,
-  },
-};
-
-// Mock element if SSR else real body element.
-const defaultElement = (global.document && global.document.body) || mockElement;
-
-const preferDarkQuery = '(prefers-color-scheme: dark)';
-
-const defaultClassNameDark = 'dark-mode';
-const defaultClassNameLight = 'light-mode';
-
-const defaultConfig = {
-  classNameDark: defaultClassNameDark,
-  classNameLight: defaultClassNameLight,
-  element: defaultElement,
-};
-
-const mql = global.matchMedia
-  ? global.matchMedia(preferDarkQuery)
-  : {
-    addListener: noop,
-    removeListener: noop,
-  };
-
-const setDOMClass = (element, method, className) => {
-  element.classList[method](className);
-};
-
-const isColorSchemeQuerySupported = mql.media === preferDarkQuery;
-
-const getInitialValue = usersInitialState => (
-  isColorSchemeQuerySupported ? mql.matches : usersInitialState
-);
-
-const getOnChange = (config) => {
-  const { element, classNameDark, classNameLight } = {
-    ...defaultConfig,
-    ...config,
-  };
-
-  const defaultOnChange = (val) => {
-    setDOMClass(element, val ? 'add' : 'remove', classNameDark);
-    setDOMClass(element, !val ? 'add' : 'remove', classNameLight);
-  };
-
-  return config.onChange || defaultOnChange;
-};
-
-export {
-  usePersistedDarkModeState,
-  getInitialValue,
-  getOnChange,
-  mql,
-};
diff --git a/types/index.d.ts b/types/index.d.ts
index 821d12f..1d92329 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,11 +1,20 @@
 declare module 'use-dark-mode' {
+  /**
+   * A config objet allowing you to specify certain aspects of `useDarkMode`
+   */
   export interface DarkModeConfig {
-    classNameDark?: string;
-    classNameLight?: string;
-    element?: HTMLElement;
-    onChange?: (val?: boolean) => void;
+    classNameDark?: string; // A className to set "dark mode". Default = "dark-mode".
+    classNameLight?: string; // A className to set "light mode". Default = "light-mode".
+    element?: HTMLElement; // The element to apply the className. Default = `document.body`
+    onChange?: (val?: boolean) => void; // Overide the default className handler with a custom callback.
+    storageKey?: string; // Specify the `localStorage` key. Default = "darkMode". Sewt to `null` to disable persistent storage.
+    storageProvider?: WindowLocalStorage; // A storage provider. Default = `localStorage`.
+    global?: Window; // The global object. Default = `window`.
   }
 
+  /**
+   * An object returned frm a call to `useDarkMode`.
+   */
   export interface DarkMode {
     readonly value: boolean;
     enable: () => void;
@@ -13,6 +22,9 @@ declare module 'use-dark-mode' {
     toggle: () => void;
   }
 
+  /**
+   * A custom React Hook to help you implement a "dark mode" component for your application.
+   */
   export default function useDarkMode(
     initialState?: boolean,
     config?: DarkModeConfig