Toggle light and dark mode programmatically

[Lyokolux]

Is there a way to update the dark mode on a button click.

Here the default dark mode:

When the button is triggered, the body class -dark is removed. Some UI elements stays dark though:

The class -dark is applied on multiple components.
The workaround I found is to parse every node containing the class (document.querySelectorAll('.-dark')), then remove it for each node.
Something like:

watchEffect(() => {
  if (isDark.value === false) {
    document.querySelectorAll('.-dark').forEach((node) => node.classList.remove('-dark'))
  } else {
    document.querySelectorAll('[class*=input-wrapper]').forEach((node) => node.classList.add('-dark'))
    document.querySelectorAll('[class*=button]').forEach((node) => node.classList.add('-dark'))
  }
})

Is there a better way?

[alexgrozav]

Hey @Lyokolux! Can you provide a small reproduction repo so I can look further into this?

[alexgrozav]

Also, have you followed this guide for the button's functionality?

https://www.inkline.io/docs/introduction/guides/dark-mode

[Lyokolux]

I didn't follow it as I missed it in the documentation. My bad. This discussion can be closed. Thanks for it!

[alexgrozav]

No worries! Glad I could help :)