useColorMode ​

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.

View Source Edit this page on GitHub

Demo ​

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

<script setup lang="ts">
import {useTemplateRef} from 'vue'
import {useColorMode} from 'bootstrap-vue-next'
import {type BCard} from 'bootstrap-vue-next/components/BCard'

const target = useTemplateRef('target')

const mode = useColorMode({
  selector: target,
})

const changeColor = () => {
  mode.value = mode.value === 'dark' ? 'light' : 'dark'
}
</script>