sun/moon toggle button is hidden after installation

[cjxe]

The problem

I installed and configured the "storybook-dark-mode" addon. The dark mode toggle button is only visible in incognito mode or other browsers.

✅ Current solution

Some data is saved in the Local Storage. I deleted that by right-clicking on some blank space > navigating to the Application tab > expanding the Local Storage tab and deleting it.

Potential solutions that failed

1- I did a hard refresh (shift + R). 2- I cleared browser cookies (even though none were related to localhost:6006). 3- Disabled all Chrome extensions. 4- Restarted the computer.

Config files

// .storybook.preview.js

import { themes } from '@storybook/theming';
import '../src/styles/globals.css';

const preview = {
  parameters: {
    darkMode: {
      current: 'dark',
      darkClass: 'dark',
      classTarget: 'html',
      stylePreview: true,
    },
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    layout: 'fullscreen',
  },
};

export default preview;

Environment

MacOS version: Monterey 12.6 Chrome version: 111.0.5563.64 (Official Build) (arm64) Storybook version: Storybook 7.0.0-beta.57 for nextjs

--

An issue was previously opened regarding this but never resolved: https://github.com/hipstersmoothie/storybook-dark-mode/issues/184

[mrowrpurr]

Thank you! I lost so many hours on this, uninstalling and re-installing the npm package and clearing my cache, etc.

Thank you, clearing Local Storage fixed it for me 🌞🌚