feat: add option to specify the storage key (#2)

README.md

@@ -31,9 +31,9 @@ Follow the [`use-dark-mode`][udm] documentation for further instructions.
 
 ### Advanced Configuration
 
-If you would like to specify the class names used (which you will also be
-passing to [`useDarkMode`][udm-parameters]) or skip the script minification
-process, you may do so through plugin options:
+If you would like to change the class names that are applied, specify the
+storage key, or skip the script minification process, you may do so through
+plugin options:
 
 ```js
 // gatsby-config.js
@@ -44,13 +44,17 @@ module.exports = {
       options: {
         classNameDark: 'dark-mode',
         classNameLight: 'light-mode',
+        storageKey: 'darkMode',
         minify: true,
       },
     },
   ],
 };
 ```
 
+> Note: You will also need to pass the corresponding [options to
+> `useDarkMode`][udm-parameters].
+
 ## Limitations
 
 [`useDarkMode`][udm] can be [configured][udm-parameters] to specify which DOM

src/gatsby-ssr.js

@@ -5,8 +5,8 @@ export const onRenderBody = ({ setPreBodyComponents }, pluginOptions) => {
   // eslint-disable-next-line no-param-reassign
   delete pluginOptions.plugins;
 
-  const { classNameDark, classNameLight, minify } = pluginOptions;
-  const props = { classNameDark, classNameLight, minify };
+  const { classNameDark, classNameLight, storageKey, minify } = pluginOptions;
+  const props = { classNameDark, classNameLight, storageKey, minify };
 
   setPreBodyComponents([
     <ThemeHydrationScriptTag key="gatsby-plugin-use-dark-mode" {...props} />,

src/theme-hydration-script-tag.js

@@ -7,11 +7,9 @@ import Terser from 'terser';
 const generateNoFlashScript = ({
   classNameDark = 'dark-mode',
   classNameLight = 'light-mode',
+  storageKey = 'darkMode',
 }) => `
-  (function(classNameDark, classNameLight) {
-    // Change these if you use something different in your hook.
-    var storageKey = 'darkMode';
-
+  (function(classNameDark, classNameLight, storageKey) {
     function setClassOnDocumentBody(darkMode) {
       document.body.classList.add(darkMode ? classNameDark : classNameLight);
       document.body.classList.remove(darkMode ? classNameLight : classNameDark);
@@ -42,13 +40,14 @@ const generateNoFlashScript = ({
       var isDarkMode = document.body.classList.contains(classNameDark);
       localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
     }
-  })('${classNameDark}', '${classNameLight}');
+  })('${classNameDark}', '${classNameLight}', '${storageKey}');
 `;
 
-const ThemeHydrationScriptTag = ({ classNameDark, classNameLight, minify }) => {
+const ThemeHydrationScriptTag = ({ classNameDark, classNameLight, storageKey, minify }) => {
   const noFlashScript = generateNoFlashScript({
     classNameDark,
     classNameLight,
+    storageKey,
   });
 
   const finalNoFlashScript = minify
@@ -62,12 +61,14 @@ const ThemeHydrationScriptTag = ({ classNameDark, classNameLight, minify }) => {
 ThemeHydrationScriptTag.propTypes = {
   classNameDark: PropTypes.string,
   classNameLight: PropTypes.string,
+  storageKey: PropTypes.string,
   minify: PropTypes.bool,
 };
 
 ThemeHydrationScriptTag.defaultProps = {
   classNameDark: undefined,
   classNameLight: undefined,
+  storageKey: undefined,
   minify: true,
 };