useColorMode

View Source

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>
  <ClientOnly>
    <BCard ref="target">
      <BButton @click="changeColor"> Current color: {{ mode }} </BButton>
    </BCard>
  </ClientOnly>
</template>

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

const target = ref<InstanceType<typeof BCard> | null>(null)

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

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

useColorMode

Demo ​

Demo