useColorMode provides a convenient utility to adjust the global color theme of your application. You can also use it to target specific components by using a template ref or a selector. Bootstrap's default behavior dictates that color modes are applied to all children in the branch. useColorMode is simply a wrapper for the vueuse utility.


  <BCard ref="target">
    <BButton @click="changeColor"> Current color: {{ mode }} </BButton>

<script setup lang="ts">
import {useColorMode} from 'bootstrap-vue-next'

const target = ref<HTMLElement | null>(null)

const mode = useColorMode({
  selector: target,

const changeColor = () => {
  mode.value = mode.value === 'dark' ? 'light' : 'dark'