search

aacassandra / vue3-progressbar

https://www.npmjs.com/package/@aacassandra/vue3-progressbar
MIT License
55 stars 14 forks source link

Dark mode #10

Open martinszeltins opened 2 years ago

martinszeltins commented 2 years ago

My app uses light and dark modes where the selector is added to html. Is there a way I can customize the progress bar depending on light/dark mode?

<html class="dark">
...
atif0075 commented 1 year ago

you can watch for changes and style it like below

watch(
  () => store.darkMode,
  () => {
    if (store.darkMode) {
      document.getElementById("nBar").style.background =
        "linear-gradient(to right,rgb(29, 216, 69),rgb(30, 175, 78),rgb(17, 24, 39))";
    } else {
      document.getElementById("nBar").style.background =
        "linear-gradient(to right, rgb(29, 78, 216), rgb(30, 64, 175), rgb(17, 24, 39))";
    }
  }
)