Skip to content

Gatsby plugin to prevent a flash of default styles when using the use-dark-mode hook

License

Notifications You must be signed in to change notification settings

wKovacs64/gatsby-plugin-use-dark-mode

Repository files navigation

npm version Build Status

A Gatsby plugin to prevent a flash of default styles when using the use-dark-mode hook if the user is not using the default theme. Specifically, this plugin handles the injection of the noflash.js logic.

Install

npm install gatsby-plugin-use-dark-mode use-dark-mode

Usage

Add the plugin to your gatsby-config.js.

module.exports = {
  plugins: [
    'gatsby-plugin-use-dark-mode',
  ],
};

Follow the use-dark-mode documentation for further instructions.

Advanced Configuration

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:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-use-dark-mode',
      options: {
        classNameDark: 'dark-mode',
        classNameLight: 'light-mode',
        storageKey: 'darkMode',
        minify: true,
      },
    },
  ],
};

Note: You will also need to pass the corresponding options to useDarkMode.

Limitations

useDarkMode can be configured to specify which DOM element receives the class and to use an alternate storage provider if desired. This plugin does not currently support those options, so it will only work if you are using the defaults (document.body and localStorage).