Nuxt 3 Color Mode Storyblok Visual Editor Issue - Cannot read properties of undefined (reading 'getColorScheme')

[schneider-carlo]

Version

@nuxtjs/color-mode: v3.2.0,
@storyblok/nuxt: v5.1.0,
nuxt: v3.2.2

Reproduction Link

git@github.com:schneider-carlo/nuxt-3-storyblok-color-mode-issue.git

Steps to reproduce

Storyblok Part

login to storyblok and create new space in eu
then go to settings and then to visual editor
set the location to https://localhost:3000/
go to access tokens and copy the preview access token

Nuxt Part

git clone git@github.com:schneider-carlo/nuxt-3-storyblok-color-mode-issue.git
cd nuxt-3-storyblok-color-mode-issue
yarn install
mkcert localhost
mv .env.example .env
open the .env file and replace <INSERT_STORYBLOK_ACCESS_TOKEN_HERE> by the copied storyblok access token
yarn dev

What is Expected?

Now when you open https://localhost:3000/ in a new tab of your browser everything works fine. You can see that have you color mode class on the html element and get no error.
When you open storyblok and click on content and then on the home page everything should also work fine.

What is actually happening?

When the visual editor of the home page is being opened you will see a big error message:
Cannot read properties of undefined (reading 'getColorScheme')
In the Terminal are also a some warnings and issues.
Now when I am going in the nuxt.config.ts and remove the color mode module from the modules array and rerun yarn dev, the issues are gone.

Question

What can I do that I can use the color mode module combined with the storyblok visual editor?

[haidertm]

Issue is closed, just adding the comment for anyone facing the issue in future.

Deleting the localstorage fixed the issue for me.