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.

Demo

HTML

vue

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

<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'
}
</script>

useColorMode ​

Demo ​

useColorMode

Demo