Custom Port seems to break this addon?

[K3TH3R]

This is a bit of a strange one, but it appears that for some reason this addon breaks when you try to use a custom port with the following error:

Sample repo is here: https://github.com/K3TH3R/storybook-dark-mode-issue

If you just clone the repo, and then run npm run storybook, everything works fine. If you run npm run storybook-fail, you'll see the error in the console. The only difference between these two package.json scripts is the usage of a port that isn't the standard 6006 port.

[hipstersmoothie]

Could you take a stab at a PR?

[AGS1130]

Although my error is not exactly the same as the original issuer, it appears to be coming from the same place.

I found that my error is coming from the Tool.jsx file, specifically the toggleDarkClass function. Following the stack trace, it appears to start from the initialization of Tool.jsx, where the store function is grabbing Storybook's sb-addon-themes-3 object in the local storage, but the necessary properties are not in place for toggleDarkClass to execute correctly. Specifically, the lightClass property from the local storage.

This is what the local storage is returning for me:

// window.localStorage["sb-addon-themes-3"]
{
  "classTarget": "html",
  "dark": {
    "base": "dark",
    "colorPrimary": "#FF4785",
    "colorSecondary": "#029CFD",
    "appBg": "#222425",
    "appContentBg": "#1B1C1D",
    "appPreviewBg": "#FFFFFF",
    "appBorderColor": "rgba(255,255,255,.1)",
    "appBorderRadius": 4,
    "fontBase": "\"Nunito Sans\", -apple-system, \".SFNSText-Regular\", \"San Francisco\", BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "fontCode": "ui-monospace, Menlo, Monaco, \"Roboto Mono\", \"Oxygen Mono\", \"Ubuntu Monospace\", \"Source Code Pro\", \"Droid Sans Mono\", \"Courier New\", monospace",
    "textColor": "#C9CDCF",
    "textInverseColor": "#222425",
    "textMutedColor": "#798186",
    "barTextColor": "#798186",
    "barHoverColor": "#029CFD",
    "barSelectedColor": "#029CFD",
    "barBg": "#292C2E",
    "buttonBg": "#222425",
    "buttonBorder": "rgba(255,255,255,.1)",
    "booleanBg": "#222425",
    "booleanSelectedBg": "#2E3438",
    "inputBg": "#1B1C1D",
    "inputBorder": "rgba(255,255,255,.1)",
    "inputTextColor": "#FFFFFF",
    "inputBorderRadius": 4
  },
  "darkClass": "dark",
  "light": {
    "base": "light",
    "colorPrimary": "#FF4785",
    "colorSecondary": "#029CFD",
    "appBg": "#F6F9FC",
    "appContentBg": "#FFFFFF",
    "appPreviewBg": "#FFFFFF",
    "appBorderColor": "hsla(203, 50%, 30%, 0.15)",
    "appBorderRadius": 4,
    "fontBase": "\"Nunito Sans\", -apple-system, \".SFNSText-Regular\", \"San Francisco\", BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "fontCode": "ui-monospace, Menlo, Monaco, \"Roboto Mono\", \"Oxygen Mono\", \"Ubuntu Monospace\", \"Source Code Pro\", \"Droid Sans Mono\", \"Courier New\", monospace",
    "textColor": "#2E3438",
    "textInverseColor": "#FFFFFF",
    "textMutedColor": "#5C6870",
    "barTextColor": "#73828C",
    "barHoverColor": "#029CFD",
    "barSelectedColor": "#029CFD",
    "barBg": "#FFFFFF",
    "buttonBg": "#F6F9FC",
    "buttonBorder": "#D9E8F2",
    "booleanBg": "#ECF4F9",
    "booleanSelectedBg": "#FFFFFF",
    "inputBg": "#FFFFFF",
    "inputBorder": "hsla(203, 50%, 30%, 0.15)",
    "inputTextColor": "#2E3438",
    "inputBorderRadius": 4
  },
  "lightClass": "", // <-- Breaking issue
  "stylePreview": true,
  "userHasExplicitlySetTheTheme": true,
  "current": "light"
}

This is my preview.ts file:

// .storybook/preview.ts
import type { Preview } from "@storybook/react";

export default {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i
      }
    },
    darkMode: {
      classTarget: "html",
      darkClass: "dark",
      lightClass: "light",
      stylePreview: true
    }
  }
} as Preview;

[K3TH3R]

Could you take a stab at a PR?

I unfortunately don't have any experience with the Storybook extensions API and I'm not sure how to start investigating this further. I basically came to the same outcome as @AGS1130 did, which is that the lightClass property doesn't seem to be properly getting passed from Storybook into this extension. I have the following configuration settings in my preview.ts:

darkMode: {
  classTarget: 'html',
  darkClass: 'theme-dark',
  lightClass: 'theme-light',
  stylePreview: true,
},

But after forking/linking the repo and trying to investigate it locally, the lightClass property is always showing as an empty string:

Which is particularly strange given that the classTarget and darkClass properties are getting passed along properly?

[K3TH3R]

Okay, I think I figured it out. If the sb-addon-themes-3 already exists in your local storage, it doesn't get replaced/upgraded. Basically, out of curiosity I deleted the sb-addon-themes-3 in local storage, restarted my Storybook, and everything is working fine now.

Not sure how you want to handle this @hipstersmoothie, but we can probably close this out?