Dark/light mode toggle?

[eterps]

Numerous online resources provide examples on implementing a dark/light mode toggle, each with various nuances and methods.

However, in the quest for simplicity I was wondering if there are straightforward examples specifically applicable to PicoCSS?

[eterps]

Hmm, not really a toggle, but I found an example here: https://codesandbox.io/s/github/picocss/examples/tree/master/v1-company?file=/js/minimal-theme-switcher.js

[Meithal]

Look the v2 documentation https://v2.picocss.com/docs/classless

[therkut]

How can dark/light mode switching be done as on the site?

[COil]

Yes, I like this version too. It should be cool to document it. The JS code should be very concise.
There is snippet in this discussion that also uses a swicth: #642 (comment)

[lucaslarroche]

Vanilla JavaScript example:
https://codesandbox.io/embed/4mrnhq?view=Editor+%2B+Preview&module=%2Fjs%2Fminimal-theme-switcher.js

React example:
https://codesandbox.io/p/devbox/github/picocss/examples/tree/master/v2-react-color-schemes-and-modal?embed=1&file=%2Fsrc%2Fcontexts%2FThemeContext.js

[Deufel]

Here is an easy one

<button class="outline" onclick="document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light')">                   <div style="width:24px;height:24px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lamp-desk"><path d="m14 5-3 3 2 7 8-8-7-2Z"></path><path d="m14 5-3 3-3-3 3-3 3 3Z"></path><path d="M9.5 6.5 4 12l3 6"></path><path d="M3 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H3Z"></path></svg></div>
</button>

[sedyh]

The interesting part is the a class="contrast" thing.

That was very strange. I really want to see a working example with this switch instead of dropdown.

[Yohn]

The interesting part is the a class="contrast" thing.

That was very strange. I really want to see a working example with this switch instead of dropdown.

I'll see what I can come up with later tonight 😉

[eddyizm]

Here is an easy one

<button class="outline" onclick="document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light')">                   <div style="width:24px;height:24px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lamp-desk"><path d="m14 5-3 3 2 7 8-8-7-2Z"></path><path d="m14 5-3 3-3-3 3-3 3 3Z"></path><path d="M9.5 6.5 4 12l3 6"></path><path d="M3 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H3Z"></path></svg></div>
</button>

this is class mate!

[ross-spencer]

Thank you @Deufel 🙏

[ehausen]

Maybe a CSS only solution?
Something like...

#toggle:checked ~ .container {
--pico-primary-background: black;
...
...
}