title: How to change color in Vue-Plyr?
body: <p>In <a href="https://github.com/sampotts/plyr/issues/662" rel="nofollow noreferrer">this git issue</a> it is discussed how to change the color of <code>vue-plyr</code> user interface. <strong>Sampotts</strong> mentions a way by changing <code>css variables</code>. I've been trying to do that without success.</p>
  <p>In the <code>node_modules/plyr/src/sass/settings</code> directory there is a <code>colors.scss</code> file but changes to the color variables do not seem to affect player color:</p>
  <pre><code>:root {
    --plyr-color-main: yellow;
  }
  
  $plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
  $plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default;
  </code></pre>