title: Vuetify themes with custom css
body: <p>Let's assume I have something like the following:</p>
  
  <pre><code>&lt;v-app&gt;
    &lt;div :class="getCustomCss"&gt;Blah&lt;/div&gt;
  &lt;v-app&gt;
  
  getCustomCss() {
    return $this.vuetify.theme.dark ? 'whenThemeIsDark' : 'whenThemeIsLight';
  }
  
  &lt;style&gt;
    .whenThemeIsDark {
      border:1px solid white;
    }
    .whenThemeIsLight {
      border:1px solid black;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>What would be the best way to change the color of the divs border when toggling between light/dark themes?</p>
  
  <p>Do I sit and watch the $this.vuetify.theme.dark property and manually change the border from the myDarkClass to myWhiteClass similar to what's shown above?  Or do I somehow use the customProperties feature in the theme/options to do this (and how?).  Or is there a better way of doing this I'm unaware of? </p>
  
  <p>This is a simple example which only requests the css to change in one spot, but a real application may have tons of custom css on different pages that would keep needing checks like this. I could easily see that getting messy if there are watchers/checks everywhere.</p>
  
  <p>I have read the <a href="https://vuetifyjs.com/en/customization/theme" rel="nofollow noreferrer">https://vuetifyjs.com/en/customization/theme</a> page and I have a feeling the Custom Properties section may be the key, but I'm not quite getting how to translate my example to their example.</p>