How to override css variables

[SriNandan33]

Hi, I am trying to customize css variables, but they are not reflecting. I tried adding in the :root element

:root {
      --plyr-color-main: red !important;
}

[ilyasdx91]

same

[daviddang91]

Same issue

[Quasarman]

Same issue any solution for this?

[ilyasdx91]

I just interrupted these styles ,!important =)

[Quasarman]

Hello @ilyasdx91,

where exactly did you "interrupt" the styles. Because for me it does not work by just putting a !important behind the variable in :root?

:root {
       --plyr-color-main: #456788 !important; /* Not changing the color */
}

[redxtech]

I know it's a bit late, but I'm fairly certain this has been fixed in the latest version. I tried it in a vue-cli project (vue 3), and a nuxt project (vue 2), and it worked perfectly in both of them. Maybe this has something to do with where you're declaring your variables?

To reproduce my setup, go into either of the nuxt or vue-cli folders in examples/, and add the following code to pages/index.vue (nuxt) or src/App.vue (vue-cli):

<style>
  :root {
    --plyr-color-main: red;
  }
</style>

[Fozilbek-Raimberdiyev]

I solved this problem. I set variable in css file not in vue SFC. Here explained about this https://github.com/sampotts/plyr?tab=readme-ov-file#customizing-the-css