Vuetify buttons have a tint to their background color for unknown reason

I have a nuxt3 app using vuetify and I'm running into this issue where some of my buttons have this tint that I can't seem to get rid of. I have an app bar at the top of the screen with buttons that point to different routes. Whichever button has the active route has this light tint on it's background when it should just be transparent. I can't seem to get rid it in my code. Any ideas?

components/TopNavbar.vue

<template>
    <div>
        <v-app-bar height="125" class="bar">
            <v-row>
                <v-col cols="6" lg="2" xl="2">
                    <v-btn
                        to="/"
                        variant="text"
                    >Test</v-btn>
                </v-col>
                <v-col cols="8" align="center">
                    <v-btn
                        to="/"
                        variant="text"
                        class="navButton"
                        :style="{ borderBottom: isActive('/').value ? '2px solid purple' : 'none' }"
                    >Home</v-btn>
                    <v-btn
                        to="/about"
                        variant="text"
                        class="navButton"
                        :style="{ borderBottom: isActive('/about').value ? '2px solid purple' : 'none' }"
                    >About</v-btn>
                </v-col>
            </v-row>
        </v-app-bar>
    </div>
</template>

<script setup>
    const route = useRoute()
    const currentRoute = ref('/')


    watch(
        () => route.fullPath,
        async newRoute => {
            currentRoute.value = newRoute
        },
        { immediate: true }
    )

</script>

<style scoped>
    .bar {
        background: black;
        border-bottom: 2px solid purple;
        color: rgb(207, 48, 207);
    }

    .navButton {
        background-color: transparent !important;
    }

    .navButton:hover,
    .navButton.v-btn--active {
        background-color: transparent !important;
    }

    .navButton .v-btn__overlay,
    .navButton .v-btn__underlay {
        background-color: transparent !important;
    }

    .navButton.v-btn--active.v-btn--variant-text {
        background-color: transparent !important;
    }
</style>

layouts/default.vue

<template>
    <v-app class="app-background">
        <ClientOnly>
            <TopNavbar />
            <v-main>
                <NuxtPage />
            </v-main>
        </ClientOnly>
    </v-app>
</template>

<script setup>
    import TopNavbar from "~/components/TopNavbar.vue"
    definePageMeta({
        ssr: false,
    })
</script>

<style>
    html, body {
        background-color: #2f3136;
        background-image: linear-gradient(to right, #1a1b1e 35%, #050d22);
        height: 100%;
        margin: 0;
        font-family: Roboto, Helvetica Neue, sans-serif;
    }

    .app-background {
        background-color: transparent !important;
        background-image: linear-gradient(to right, #1a1b1e 35%, #050d22);
        min-height: 100vh;
    }
</style>

pages/index.vue

<template>
    <div>Hi</div>
    <v-btn variant="text">Hello World</v-btn>
</template>

<script setup>

    definePageMeta({
        layout: "default",
        ssr: false,
    })
</script>

<style scoped>

</style>

plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css'
import "@fortawesome/fontawesome-free/css/all.css";
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import * as labsComponents from 'vuetify/labs/components'
import { fa } from "vuetify/iconsets/fa";
import { aliases, mdi } from "vuetify/lib/iconsets/mdi";

export default defineNuxtPlugin((app) => {
    const vuetify = createVuetify({
        components: { ...components, ...labsComponents },
        directives,
        icons: {
            defaultSet: "mdi",
            aliases,
            sets: {
                mdi,
                fa,
            },
        },
        theme: {
            themes: {
                dark: {
                    colors: {
                        background: '#101010',
                        primary: '#FFF629',
                        secondary: '#ffffff',
                        accent: '#654284',
                        surface: '#1c1c1c',
                        error: "#f44336",
                        info: "#2196F3",
                        success: "#4caf50",
                        text: '#ffffff',
                        avatar: '#654284',
                        appbar: '#101010',
                        inputbg: '#202020',
                        "warning-bg": '#fff3cd',
                        "warning-text": '#856405',
                        'on-surface-variant': '#00000000',
                        stripe: '#635BFF'
                    }
                },
                light: {
                    colors: {
                        background: '#FFFFFF',
                        primary: '#D6CB00',
                        secondary: '#000000',
                        accent: '#9E7BBC',
                        surface: '#ffffff',
                        error: "#f44336",
                        info: "#2196F3",
                        success: "#4caf50",
                        text: '#000000',
                        avatar: '#FFF629',
                        appbar: '#654284',
                        'on-surface-variant': '#00000000',
                        stripe: '#635BFF'
                    }
                }
            },
            defaultTheme: 'dark'
        }

    })
    app.vueApp.use(vuetify)
})

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2025-06-12',
  devtools: { enabled: true },
  ssr: false,
  build: { transpile: ["vuetify"]},
  vite: {
    optimizeDeps: {
      include: []
    },
    build: {
      rollupOptions: {
        external: []
      }
    }
  },
  css: ["@/assets/global.css"]
})

Inspect the VBtn in the DOM and you'll see it's comprised of three subcomponents:

• v-btn__overlay
• v-btn__underlay
• v-btn__content

The overlay would be causing the tint you describe. It's actually a white background with reduced opacity. To target nested elements within <style scoped> you need to use the deep selector, like this:

.v-btn--active :deep(.v-btn__overlay) {
  display: none; /* or opacity: 0 */
}