使用自定义 css Vuetify 主题

Question

假设我有以下内容：

<v-app>
  <div :class="getCustomCss">Blah</div>
<v-app>

getCustomCss() {
  return $this.vuetify.theme.dark ? 'whenThemeIsDark' : 'whenThemeIsLight';
}

<style>
  .whenThemeIsDark {
    border:1px solid white;
  }
  .whenThemeIsLight {
    border:1px solid black;
  }
</style>

在浅色/深色主题之间切换时，更改 div 边框颜色的最佳方法是什么？

我是否坐下来观看 $this.vuetify.theme.dark 属性并手动将边框从 myDarkClass 更改为 myWhiteClass 类似于上面显示的内容？或者我是否以某种方式使用主题/选项中的 customProperties 功能来做到这一点（以及如何？）。或者有没有更好的方法来做到这一点我不知道？

这是一个简单的例子，它只要求 css 在一个地方改变，但一个真正的应用程序可能在不同的页面上有大量的自定义 css，需要像这样的检查。如果到处都有观察者/检查，我很容易看到这会变得混乱。

我已经阅读了https://vuetifyjs.com/en/customization/theme 页面，我觉得自定义属性部分可能是关键，但我不太明白如何将我的示例转换为他们的示例。

Answer 1

theme--light 或 theme--dark 的 css 类应用于 v-app v-application，它将识别哪个主题对您来说是活动的，而无需额外的观察者。

使用您的简化示例：

<style>
  .v-application.theme--light {
    border:1px solid white;
  }

  .v-application.theme--dark{
    border:1px solid black;
  }
</style>