Is there a "Dark Mode" toggle available?

[tianfanghan]

Most of designs nowadays support Dark Mode, I'm loving MARP vscode very much , and using it in my teaching by a HTML format.
I'm asking is there any way to make a toggle button like someother apps, which can change between a light mode and dark mode on html by the audience themeselves.

Thank you.

[yhatt]

In Marp, the dark color scheme, called as invert, is a one of color variants of the built-in theme. So it just works by adding and removing invert class to each <section> elements.

<button onclick="document.querySelectorAll('section').forEach((e) => e.classList.toggle('invert'))">Toggle appearance</button>

[tianfanghan]

Thank you, I'll try this, and come back later.

[tianfanghan]

I'm back, it's perfect. all done.

[tianfanghan]

Another idea, is there a way to add the toggle button on the toolbar below?

[tianfanghan]

So that audiance can choose themeself

[yhatt]

No. The slide Markdown normally cannot interfere with navigation interface.

Marp built-in themes have made for representing the same slide view for everyone, including the color scheme. If users can choose different color variants, it may make the inconsistent result of Markdown conversion. And the author should take care of the slide view in every color variants (e.g. the contrast between background and image). These do not match to our goal "Users only have to focus on writing down the story".

Please note it's not meaning that Marp disallows changing colors in runtime. The previously answered way is still working. And you also can make the slide that it matches colors with user's system appearance by using @media prefers-color-scheme in the custom theme CSS.