docs: add `` utility documentation to the color-mode page

Author: codebender828

website/pages/color-mode.mdx

@@ -127,3 +127,45 @@ export default {
 }
 </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.
+
+```js
+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.
+
+```vue live=true
+<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>
+```

website/pages/overriding-component-styles.mdx

@@ -49,7 +49,7 @@ Vue.use(Chakra, {
 })
 ```
 
-### Using the `mode` function
+### With the `mode` function
 `@chakra-ui/vue@^0.10.0` also 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.
 
 ```js
@@ -59,7 +59,7 @@ import Chakra, { mode } from '@chakra-ui/vue'
 Vue.use(Chakra, {
   extendTheme: {
     baseStyles: {
-      CIconButton: ({ colorMode }) => ({
+      CIconButton: () => ({
         /**
          * When the color mode is `light`, `mode` returns `'blackAlpha.700'`.
          * Otherwise it returns `'whiteAlpha.400'`.