If it is the same origin, you should be able to specify the parent window.

const isDark = useDark({
  window:window.parent.window,
  disableTransition: false // For some reason an error occurs, so set it to false for now.
});

If it is the same origin, you should be able to specify the parent window.

const isDark = useDark({
  window:window.parent.window,
  disableTransition: false // For some reason an error occurs, so set it to false for now.
});

Thank you for the reply. Were you able to confirm this issue with my reproduction case?

Unfortunately, that did not work. In Button.vue, I did:

	const isDark = useDark({
		window: window.parent.window,
		disableTransition: false // For some reason an error occurs, so set it to false for now.
	});

I then started storybook ( npm run storybook ). I then clicked the button, in both light and dark mode. In both cases, it logged the current isDark.value as false. This is incorrect.

I did confirm that the html element in the iframe had class="dark".

I am not sure that window.parent.window will work with sandboxed iframe.

ah. I misunderstood the problem!
I would like to look into it if I have time

@eric-g-97477
useDark is not able to follow the theme change of storybook, so it seems that it will be necessary to follow it manually.
Like this

	decorators: [
		withThemeByClassName({
			themes: {
				light: 'light',
				dark: 'dark'
			},
			defaultTheme: 'light'
		}),
		(Story, context) => {
			const [globals] = useGlobals()
			const isDark = useDark();
			nextTick(() => {
				isDark.value = globals.theme === 'dark'
			})
			return Story(context)
		},
	]

@eric-g-97477 useDark is not able to follow the theme change of storybook, so it seems that it will be necessary to follow it manually. Like this

I am curious as to why it is not able to detect the changing class in the html tag...?

In my reproduction project, I changed my preview.ts file to look like:

import type { Preview } from '@storybook/vue3';
import { withThemeByClassName } from '@storybook/addon-themes';

import { nextTick } from 'vue';
import { useDark } from '@vueuse/core';
import { useGlobals } from '@storybook/manager-api';

const preview: Preview = {
	parameters: {
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/i
			}
		}
	},
	decorators: [
		withThemeByClassName({
			themes: {
				light: 'light',
				dark: 'dark'
			},
			defaultTheme: 'light'
		}),
		(Story, context) => {
			const [globals] = useGlobals();
			const isDark = useDark();
			nextTick(() => {
				isDark.value = globals.theme === 'dark';
			});
			return Story(context);
		}
	]
};

export default preview;
```

Unfortunately, this resulted in the following error when I ran the story:
```
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  at useContext (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-USEVLOEB.js?v=c78e8b09:1062:29))
  at useStorybookApi (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_manager-api.js?v=c78e8b09:8486:49))
  at useGlobals (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_manager-api.js?v=c78e8b09:8570:11))
  at preview.decorators (/.storybook/preview.ts?t=1734352889319:23:25))
  at hookified (/sb-preview/runtime.js:3640:13))
  at /node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-D44KDWF7.js?v=c78e8b09:88:33
  at /node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-D44KDWF7.js?v=c78e8b09:90:108
  at withOutline (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_addon-essentials_outline_preview.js?v=c78e8b09:438:43))
  at hookified (/sb-preview/runtime.js:3640:13))
```

@eric-g-97477
Since useDark does not monitor the DOM, I think there is a discrepancy with the storybook theme.
Oops, there was no error in my environment, but what about this?

		(Story, context) => {
			const isDark = useDark();
			nextTick(() => {
				isDark.value = context.globals.theme === 'dark';
			});
			return Story(context);
		},

	const isDark = useDark();
			nextTick(() => {
				isDark.value = context.globals.theme === 'dark';
			});
			return Story(context);

Yep. That one worked. I wonder what was different about our environments. Why were you able to use useGlobals and I was not...?

It is also interesting that useDark does not monitor the DOM. I would have thought that would be necessary. I will have to look into how it is actually working when I get the chance. Perhaps there would be a way to have useDark work regardless of environment.

In any case, thank you for the workaround.

@eric-g-97477 Since useDark does not monitor the DOM, I think there is a discrepancy with the storybook theme. Oops, there was no error in my environment, but what about this?

Oh, I did see one more issue with this solution, but it is a minor one. There is an initialization problem. I did:

		(Story, context) => {
			const isDark = useDark();
			nextTick(() => {
				console.log(
					'🚀 ~ file: preview.ts:29 ~ nextTick ~ context.globals.theme:',
					context.globals.theme
				);

				isDark.value = context.globals.theme === 'dark';
			});
			return Story(context);
		}

When the story is first run (make sure you use a new browser window), what is logged is:

🚀 ~ file: preview.ts:29 ~ nextTick ~ context.globals.theme: 

context.globals.theme has not been initialized. This code is executed again when the theme changes by pressing the button. After that, it works without issue.

@eric-g-97477 Since useDark does not monitor the DOM, I think there is a discrepancy with the storybook theme. Oops, there was no error in my environment, but what about this?

Oh, I did see one more issue with this solution, but it is a minor one. There is an initialization problem. I did:

		(Story, context) => {
			const isDark = useDark();
			nextTick(() => {
				console.log(
					'🚀 ~ file: preview.ts:29 ~ nextTick ~ context.globals.theme:',
					context.globals.theme
				);

				isDark.value = context.globals.theme === 'dark';
			});
			return Story(context);
		}

When the story is first run (make sure you use a new browser window), what is logged is:

🚀 ~ file: preview.ts:29 ~ nextTick ~ context.globals.theme: 

context.globals.theme has not been initialized. This code is executed again when the theme changes by pressing the button. After that, it works without issue.

if the function can be async you can await nextTick() so you dont return the context before next tick