@sit-onyx/storybook-utils 1.0.0-alpha.84 → 1.0.0-alpha.85

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.84",
+  "version": "1.0.0-alpha.85",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/preview.ts

@@ -3,9 +3,10 @@ import { addons } from "@storybook/preview-api";
 import { type ThemeVars } from "@storybook/theming";
 import { type Preview } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
+import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
 
-import { ONYX_BREAKPOINTS, createTheme } from "./theme";
 import { requiredGlobalType, withRequired } from "./required";
+import { ONYX_BREAKPOINTS, createTheme } from "./theme";
 
 const themes = {
   light: createTheme(),
@@ -18,7 +19,6 @@ const themes = {
  * - Improved Vue-specific code highlighting (e.g. using `@` instead of `v-on:`)
  * - Setup for dark mode (including docs page). Requires addon `storybook-dark-mode` to be enabled in .storybook/main.ts file
  * - Custom Storybook theme using onyx colors (light and dark mode)
- * - Support for setting the light/dark mode when Storybook is embedded as an iframe (via query parameter, e.g. `?theme=dark`)
  * - Configure viewports / breakpoints as defined by onyx
  *
  * @param overrides Custom preview / overrides, will be deep merged with the default preview.
@@ -57,13 +57,7 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
       docs: {
         // see: https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-840701971
         get theme(): ThemeVars {
-          // support setting the theme via query parameters, useful if docs are embedded via an iframe
-          const params = new URLSearchParams(window.location.search);
-          const themeParam = params.get("theme");
-
-          const isDark = themeParam
-            ? themeParam === "dark"
-            : parent.document.body.classList.contains("dark");
+          const isDark = parent.document.body.classList.contains("dark");
 
           if (isDark) {
             document.body.classList.remove("light");
@@ -105,11 +99,6 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
 
   const channel = addons.getChannel();
 
-  // TODO: import from storybook-dark-mode instead
-  // but this is currently leading to Storybook build errors with Storybook 8
-  // import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
-  const DARK_MODE_EVENT_NAME = "DARK_MODE";
-
   // our "workaround" above for dynamically setting the docs theme needs a page-reload after
   // the theme has changed to take effect:
   channel.once(DOCS_RENDERED, () => {