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

[therkut]

Thank you for your support, but how can it be done with the icon like on the site?

Kind regards.

[lucaslarroche]

Pico CSS website uses this for the animated icon: https://toggles.dev/

[kim-fransson]

@lucaslarroche 👋 Instead of creating a new discussion, I will use this thread instead.

I was looking how you guys implemented the theme toggle on https://picocss.com/

<a class="contrast" aria-label="Turn off dark mode" data-discover="true" href="/">
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="currentColor" class="icon-theme-toggle  moon">
      <clipPath id="theme-toggle-cutout">
         <path d="M0-11h25a1 1 0 0017 13v30H0Z"></path>
      </clipPath>
      <g clip-path="url(#theme-toggle-cutout)">
         <circle cx="16" cy="16" r="8.4"></circle>
         <path d="M18.3 3.2c0 1.3-1 2.3-2.3 2.3s-2.3-1-2.3-2.3S14.7.9 16 .9s2.3 1 2.3 2.3zm-4.6 25.6c0-1.3 1-2.3 2.3-2.3s2.3 1 2.3 2.3-1 2.3-2.3 2.3-2.3-1-2.3-2.3zm15.1-10.5c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zM3.2 13.7c1.3 0 2.3 1 2.3 2.3s-1 2.3-2.3 2.3S.9 17.3.9 16s1-2.3 2.3-2.3zm5.8-7C9 7.9 7.9 9 6.7 9S4.4 8 4.4 6.7s1-2.3 2.3-2.3S9 5.4 9 6.7zm16.3 21c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zm2.4-21c0 1.3-1 2.3-2.3 2.3S23 7.9 23 6.7s1-2.3 2.3-2.3 2.4 1 2.4 2.3zM6.7 23C8 23 9 24 9 25.3s-1 2.3-2.3 2.3-2.3-1-2.3-2.3 1-2.3 2.3-2.3z"></path>
      </g>
   </svg>
</a>

The interesting part is the <a class="contrast" aria-label="Turn off dark mode" data-discover="true" href="/">

I assume the reason is to align the styles with the other "links" on the nav. But it looks weird, because its not semantically a link (it always link to the same page, but with a side effect to change dark/light mode). And I tested it on some html validators and it looks correct.

So to my question 😄

Do you want to share the backstory of this implementation, because I'm super interested to know more 😄

[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>

[ehausen]

Maybe a CSS only solution?
Something like...

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