Vuetify: Dynamic SCSS styling based on selected theme

Question

I want the border of the v-select component to be black when light theme is activated (this works right now), and the border to be white when dark theme is activated (this does not work right now). How can I achieve this?

Code (Playground link):

<template>
  <v-app>
    <v-btn @click="toggleTheme">toggle theme</v-btn>
    <div>
      <v-select
        v-model="selected"
        class="d-inline-flex"
        variant="outlined"
        density="compact"
        :items="['Item1', 'Item2']"
        hide-details
      ></v-select>
    </div>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'
  import { useTheme } from 'vuetify'

  const theme = useTheme()
  const selected = ref('Item1')

  function toggleTheme() {
    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
  }
</script>

<style scoped>
  :deep() .v-field__overlay {
    border: 1px solid black;
  }
</style>

Answer 1

You can set border color from a Vuetify CSS variable that changes from black to white with the selected theme, for example --v-theme-on-background:

:deep() .v-field__overlay {
  border: 1px solid rgb(var(--v-theme-on-background));
}

updated playground