Color Mode

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

As of v0.10.0, we added some new helpers to the Chakra Color Mode to simplify the access of the current color mode and the toggle color mode functions.

However since they are not a breaking change, I'm hesitant to document them here as I'd like to see how thy perform in real-world apps.

Simplified Accessing Color Mode

New

#

To enable toggling between Dark and Light modes within your apps, wrap your application in a CColorModeProvider component. Chakra UI globally provides computed variables for the current color mode:

• this.chakraColorMode - The current mode.
• this.chakraToggleColorMode - Function to toggle the Chakra UI Color mode

Try toggling the current colorMode

<template>
  <c-button @click="chakraToggleColorMode">
    Chakra ColorMode: {{ chakraColorMode }}
  </c-button>
</template>

Injecting color mode and toggle helpers#

The CColorModeProvider component also 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#

On 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>

Computing values with mode utility function#

@chakra-ui/vue@^0.10.0 exports a mode function that accepts two arguments for the 'light' and 'dark' mode respectively. When the current color mode is 'light', it returns the first argument. If the color mode is 'dark', it returns the second argument.

import Vue from 'vue'
import Chakra, { mode } from '@chakra-ui/vue'

Vue.use(Chakra, {
  extendTheme: {
    baseStyles: {
      CIconButton: () => ({
        /**
         * When the color mode is `light`, `mode` returns `'blackAlpha.700'`.
         * Otherwise it returns `'whiteAlpha.400'`.
         */
        color: mode('blackAlpha.700', 'whiteAlpha.400')
      })
    }
  }
})

Usage in templates#

The mode function is also made globally available inside your Vue application context so you do not have to import it inside your Vue SFCs. You can access it by invoking this.$mode in the template or in your script.

<template>
  <c-box
    :bg="[
      $mode('orange.600', 'yellow.100'),
      $mode('pink.600', 'green.100')
    ]"
    :color="$mode('white', 'blackAlpha.800')"
    @click="chakraToggleColorMode"
  >
    Box "{{ chakraColorMode }}" mode. Click me to toggle color mode.
  </c-box>
</template>