diff --git a/.changeset/smooth-cups-kiss.md b/.changeset/smooth-cups-kiss.md
new file mode 100644
index 00000000..707ecd46
--- /dev/null
+++ b/.changeset/smooth-cups-kiss.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/vue": minor
+"@chakra-ui/nuxt": minor
+---
+
+feat(types): add type exports for color mode & theme providers
diff --git a/packages/chakra-ui-core/types/index.d.ts b/packages/chakra-ui-core/types/index.d.ts
index b232425d..8f7c814a 100644
--- a/packages/chakra-ui-core/types/index.d.ts
+++ b/packages/chakra-ui-core/types/index.d.ts
@@ -3,18 +3,36 @@ import { Theme } from "../../chakra-ui-theme/types"
 import useToast from "../src/CToast"
 import { ToastFactory } from '../src/CToast/CToast'
 
+type ChakraIcons = { [name: string]: Icon };
+
 declare module 'vue/types/vue' {
   export interface Vue {
     $toast: ToastFactory
     $chakra: {
       theme: Theme
-      icons: { [name: string]: Icon }
+      icons: ChakraIcons
     }
-    chakraColorMode: string
-    chakraToggleColorMode: string
   }
 }
 
+declare module '../src/CColorModeProvider' {
+  export interface Provides {
+    $chakraColorMode: () => 'light' | 'dark'
+    $toggleColorMode: () => void
+  }
+}
+
+declare module '../src/CThemeProvider' {
+  export interface Provides {
+    $chakraTheme: Theme
+    $chakraIcons: ChakraIcons
+    $chakraColorMode: () => 'light'
+  }
+}
+
+export { Provides as CColorModeProvides } from '../src/CColorModeProvider'
+export { Provides as CThemeProvides } from '../src/CThemeProvider'
+
 export const useToast: typeof useToast
 export const defaultTheme: Theme
 export * from './component'