color-mode.mdx

Color Mode

Most @chakra-ui/vue components are dark mode compatible. You can also toggle between dark and light modes in your chakra applications.

Enable Color Mode Toggling

To enable toggling between Dark and Light modes within your apps, wrap your application in a CColorModeProvider component. This component provides two variables in it's descendant's context using the provide/inject API:

• $chakraColorMode => This is a function that returns the current mode. Use it the computed property.
• $toggleColorMode => This function toggles the current color mode value.

Below is an example of how to use the above variables:

In your main.js

import Vue from 'vue'
import Chakra, { CThemeProvider, CColorModeProvider CReset } from '@chakra-ui/vue'
import App from './App.vue'

Vue.use(Chakra)

new Vue({
  el: '#app',
  render: (h) => h(CThemeProvider, [
    h(CColorModeProvider, [
      h(CReset),
      h(App)
    ])
  ])
}).$mount()

In any component that needs the Chakra color mode, you can now access it by injecting it into that component's state:

In your App.vue file.

<template>
  <c-box>
    <c-button @click="$toggleColorMode">
      Chakra ColorMode: {{ colorMode }}
    </c-button>
  </c-box>
</template>

<script lang="js">

export default {
  name: 'App',
  inject: ['$chakraColorMode', '$toggleColorMode'],
  computed: {
    /**
     * In order to preserve reactivity, Chakra provides the color mode
     * inside the `$chakraColorMode` function. This function returns the current
     * color mode.
     */
    colorMode () {
      return this.$chakraColorMode()
    }
  },
}
</script>

Forcing a specific mode

In some occasions, you might want Chakra components to look the same in both light and dark modes. To achieve this, wrap the component in CLightMode or CDarkMode component. Doing this will override the global $chakraColorMode.

Click the "Toggle Mode" button to see it in action.

<template>
  <c-stack should-wrap-children is-inline>
    <c-light-mode>
      <c-button size="sm" variant-color="blue">
        Light Mode Always
      </c-button>
    </c-light-mode>

    <c-dark-mode>
      <c-button  size="sm" variant-color="blue">
        Dark Mode Always
      </c-button>
    </c-dark-mode>

    <c-button size="sm" variant-color="blue" @click="$toggleColorMode">
      Toggle Color Mode
    </c-button>
  </c-stack>
</template>

<script lang="js">

export default {
  name: 'App',
  inject: ['$toggleColorMode']
}
</script>