title: How can I globally style the scrollbar in Vuetify according to the user's theme?
body: <p>I've created a custom css file that applies styles to the global scrollbar! But, I'd like to only show a dark scrollbar to users when $vuetify.theme.dark is set to true.</p>
  <p>Is there a way that I can apply scrollbar css globally once that theme variable changes?</p>
  <p>Here's my App.vue file</p>
  <pre><code>&lt;template&gt;
    &lt;v-app
      id=&quot;inspire&quot;
      :style=&quot;{ background: $vuetify.theme.themes[theme].background }&quot;
    &gt;
      &lt;header-bar /&gt;
      &lt;v-main&gt;
        &lt;v-container fluid fill-height&gt;
          &lt;keep-alive&gt;
            &lt;router-view /&gt;
          &lt;/keep-alive&gt;
        &lt;/v-container&gt;
      &lt;/v-main&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import HeaderBar from &quot;./components/Navigation/HeaderBar.vue&quot;;
  import store from &quot;./store&quot;;
  
  export default {
    name: &quot;App&quot;,
    components: {
      HeaderBar,
    },
    computed: {
      theme() {
        return this.$vuetify.theme.dark ? &quot;dark&quot; : &quot;light&quot;;
      },
    },
    store: store,
    beforeCreate() {
      this.$store.commit(&quot;initializeStore&quot;);
  
      this.$vuetify.theme.dark = this.$store.state.DarkMode;
    },
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  @import &quot;./DarkScrollbar.css&quot;;
  
  html {
    overflow: auto !important;
  }
  
  .v-btn.theme--light.v-btn--has-bg:not(.primary):not(.success):not(.error) {
    background-color: #ffffff;
  }
  &lt;/style&gt;
  </code></pre>
  <p>In the above, I've created a computed variable &quot;theme&quot; to store the theme's name, which I believe I can place a watcher and trigger a function call on change.</p>
  <p>Here's the contents of the DarkScrollbar.css file that I'm wanting to dynamically toggle!</p>
  <pre><code>/* Dark Scrollbar CSS */
  ::placeholder {
    color: #b2aba1;
  }
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    background-color: #555b00 !important;
    color: #e8e6e3 !important;
  }
  ::-webkit-scrollbar {
    background-color: #202324;
    color: #aba499;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #454a4d;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #575e62;
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: #484e51;
  }
  ::-webkit-scrollbar-corner {
    background-color: #181a1b;
  }
  ::selection {
    background-color: #004daa !important;
    color: #e8e6e3 !important;
  }
  ::-moz-selection {
    background-color: #004daa !important;
    color: #e8e6e3 !important;
  }
  </code></pre>