diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 466878c0..95f189a4 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -88,6 +88,7 @@ export default defineConfig({
           items: [
             // { text: 'useSearch', link: '/guide/composables/useSearch' },
             // { text: 'useSort', link: '/guide/composables/useSort' },
+            { text: 'useAnu', link: '/guide/composables/useAnu' },
             { text: 'useGroupModel', link: '/guide/composables/useGroupModel' },
           ],
         },
@@ -119,6 +120,8 @@ export default defineConfig({
     },
   },
   markdown: {
+    // ℹ️ We only enabled this in development so that we can highlight code lines by seeing line number without calculating it in our editor.
+    lineNumbers: process.env.NODE_ENV === 'development',
     theme: 'dracula',
     config: md => {
       md.use(Container, 'card', {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 99408faa..d31dc0b5 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -11,9 +11,7 @@ import './style.css'
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
-    app.use(anu, {
-      registerComponents: true,
-    })
+    app.use(anu)
 
     // Register demos as components
     const demos = import.meta.globEager('../../components/demos/**/*.vue')
diff --git a/docs/components/demos/chip/DemoChipClosable.vue b/docs/components/demos/chip/DemoChipClosable.vue
index 3b61bb1d..8f01a3ce 100644
--- a/docs/components/demos/chip/DemoChipClosable.vue
+++ b/docs/components/demos/chip/DemoChipClosable.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
+import { defaultThemeColors } from 'anu-vue'
 import { computed, ref } from 'vue'
 
-const chips = ref([
-  { title: 'Primary', color: 'primary', isOpen: true },
-  { title: 'Success', color: 'success', isOpen: true },
-  { title: 'Info', color: 'info', isOpen: true },
-  { title: 'Warning', color: 'warning', isOpen: true },
-  { title: 'Danger', color: 'danger', isOpen: true },
-])
+const chips = ref(defaultThemeColors.map(c => ({
+  color: c,
+  isClosed: false,
+})))
 
-const allChipsClosed = computed(() => chips.value.every(chip => !chip.isOpen))
-const reset = () => chips.value.forEach(chip => chip.isOpen = true)
+const allChipsClosed = computed(() => chips.value.every(chip => !chip.isClosed))
+const reset = () => chips.value.forEach(chip => chip.isClosed = true)
 </script>
 
 <template>
   <div class="flex flex-wrap gap-2">
     <AChip
       v-for="chip in chips"
-      :key="chip.title"
-      v-model="chip.isOpen"
+      :key="chip.color"
+      v-model="chip.isClosed"
       :color="chip.color"
       closable
+      class="capitalize"
     >
-      {{ chip.title }}
+      {{ chip.color }}
     </AChip>
 
     <div class="w-full">
diff --git a/docs/components/demos/radio/DemoRadioColor.vue b/docs/components/demos/radio/DemoRadioColor.vue
index 53e69b79..108f053a 100644
--- a/docs/components/demos/radio/DemoRadioColor.vue
+++ b/docs/components/demos/radio/DemoRadioColor.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
+import { defaultThemeColors } from 'anu-vue'
 import { ref } from 'vue'
 
 const favoriteFruit = ref()
-const colors = ['primary', 'success', 'info', 'warning', 'danger']
 </script>
 
 <template>
   <div class="flex flex-col gap-y-3 mt-6">
     <ARadio
-      v-for="color in colors"
+      v-for="color in defaultThemeColors"
       :key="color"
       v-model="favoriteFruit"
       name="radio-color"
diff --git a/docs/guide/composables/useAnu.md b/docs/guide/composables/useAnu.md
new file mode 100644
index 00000000..8ffa538d
--- /dev/null
+++ b/docs/guide/composables/useAnu.md
@@ -0,0 +1,77 @@
+# useAnu
+
+`useAnu` composable provides API for interactive with Anu.
+
+## Basic
+
+`useAnu` provides following reactive variables:
+
+- `themes: ConfigThemes` => Registered themes. You can modify colors & CSS variables at runtime 😍
+- `activeThemeName: string` => Name of the active theme in your app
+- `activeTheme: ({ name: string, theme: ThemeOptions })` => Convenient computed property to get details of active theme. Don't modify it 🙅🏻‍♂️
+
+```ts
+import { useAnu } from 'anu-vue';
+
+const { themes, activeThemeName, activeTheme } = useAnu()
+```
+
+## Changing Active Theme
+
+You can change the active theme at runtime by modifying the `activeThemeName` ref.
+
+```ts{5}
+import { useAnu } from 'anu-vue';
+
+const { activeThemeName } = useAnu()
+
+activeThemeName.value = 'dark'
+```
+
+## Active Theme Details
+
+Use `activeTheme` computed property to get the details of active theme.
+
+```ts{6-7}
+import { computed } from 'vue';
+import { useAnu } from 'anu-vue';
+
+const { activeTheme } = useAnu()
+
+const activeThemeName = computed(() => activeTheme.value.name)
+const primaryColor = computed(() => activeTheme.value.theme.colors.primary)
+```
+
+:::warning
+Modifying `activeTheme` computed property won't do anything so never mutate this computed property.
+:::
+
+## Modifying Themes
+
+You can modify any theme at runtime via `theme` ref.
+
+```ts{8,12}
+import { useAnu } from 'anu-vue';
+
+const { themes } = useAnu()
+
+// Change primary color for all themes
+for (const themeName in themes.value) {
+  const theme = themes.value[themeName]
+  theme.colors.primary = '235, 97.7%, 66.3%'
+}
+
+// Or you can also change the primary color for single theme
+themes.value.light.colors.primary = '235, 97.7%, 66.3%'
+```
+
+<br>
+
+---
+
+<br>
+
+Related documentation:
+
+- [Theme](/guide/features/theme.md)
+- [Colors](/guide/getting-started/customization.html#color)
diff --git a/docs/guide/features/theme.md b/docs/guide/features/theme.md
index beabe519..e8e286ed 100644
--- a/docs/guide/features/theme.md
+++ b/docs/guide/features/theme.md
@@ -2,59 +2,125 @@
 
 Anu officially supports light & dark theme. Anu also allows users to customize the appearance of their application by providing a custom theme or modifying the existing.
 
-This is achieved through the use of CSS variables, which can be defined and modified at runtime. This means that users can change the theme of their application on the fly. This allows for a more flexible and dynamic user experience, as users can tailor the appearance of their application to their personal preferences or to match the branding of their organization.
+This is achieved through the use of CSS variables, which can be defined and modified at runtime (via `useAnu` composable). This means that users can change the theme of their application on the fly. This allows for a more flexible and dynamic user experience, as users can tailor the appearance of their application to their personal preferences or to match the branding of their organization.
 
-Light theme is enabled by default. If you want to switch to dark mode just apply `.dark` class to root `html` element.
+Light theme is enabled by default. If you want to switch to dark mode use `initialTheme` option while registering anu.
 
-```html
-<html class="dark">
-    <!-- ... -->
-</html>
-```
+```ts{9-11}
+import { createApp } from 'vue'
+import App from './App.vue'
+import { anu } from 'anu-vue'
 
-You can check list of available CSS variables in [preset-theme-default](https://github.com/jd-solanki/anu/blob/main/packages/preset-theme-default/src/scss/index.scss).
+// other stuff
 
-## How to customize the theme?
+const app = createApp(App)
+
+app.use(anu, {
+  initialTheme: 'dark',
+})
+```
 
-To customize any of the existing theme, light or dark, you just have to override the CSS variable.
+## How to customize the theme?
 
-Assume your theme color is `#5563fd`. Just convert it to [hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) format and override the `--a-primary` root CSS variable in your stylesheet.
+To customize any of the existing theme, light or dark, you just have to override the theme option.
 
-```vue{6}
-<!-- App.vue -->
-<template>
-    <ABtn>Button</ABtn>
-</template>
+Assume your theme color is `#5563fd`. Just convert it to [hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) format and override the `primary` color via anu options.
 
-<style>
-:root {
-    --a-primary: 235, 97.7%, 66.3%;
-}
-</style>
+```ts{5}
+app.use(anu, {
+  themes: {
+    light: {
+      colors: {
+        primary: '235, 98%, 66%',
+      },
+    },
+  },
+})
 ```
 
 Done 🥳
 
-If you want to change the CSS variant in the dark theme, just update the selector:
-
-```diff
-- :root
-+ :root.dark
-```
+Do note that, this will only update the primary color for light theme.
 
 ## How to create custom theme?
 
-Creating a custom theme is as easy as defining new values for the existing CSS variables.
+Creating a custom theme is as easy as defining new values for the existing theme colors.
 
 Create a new CSS selector for `:root` with the theme name (assuming `coffee`) and write down the CSS variables with the desired values:
 
-```css
-:root.coffee {
-    ---a-primary: 27, 39%, 77%,
-    /* other CSS variables */
-}
+```ts{5}
+app.use(anu, {
+  themes: {
+    class: 'a-theme-coffee',
+    coffee: {
+      colors: {
+        primary: '27, 39%, 77%',
+        // other theme colors
+      },
+    },
+  },
+})
 ```
 
 Now just add class `coffee` to the html element: `html.coffee`.
 
 Don't forget to include the CSS file in your entrypoint 😜
+
+## How to add new color?
+
+Anu provides **primary**, **success**, **info**, **warning** & **danger** colors by default.
+
+Additionally, you can also add new colors to the palette. Add new color to the palette via theme option:
+
+```ts{5,10}
+app.use(anu, {
+  themes: {
+    light: {
+      colors: {
+        secondary: '0, 0%, 50%',
+      },
+    },
+    dark: {
+      colors: {
+        secondary: '0, 0%, 25%',
+      },
+    },
+  },
+})
+```
+
+Passing options to anu config will merge them and will result in new color **secondary** added to existing theme palette.
+
+Additionally, You also have to add this new color in Anu's UnoCSS preset.
+
+> _Working on omitting this preset step. Guide WIP._
+
+Finally let's use new color 😍
+
+```vue
+<template>
+  <ABtn color="secondary">Secondary</ABtn>
+</template>
+```
+
+<br>
+
+---
+
+<br>
+
+:::tip Default Colors
+You can get array of default colors provide by anu from `defaultThemeColors` export.
+
+```ts
+import { defaultThemeColors } from 'anu-vue'
+```
+
+:::
+
+<br>
+
+Related documentation:
+
+- [`useAnu` composable](/guide/composables/useAnu.md)
+- [Colors](/guide/getting-started/customization.html#color)
diff --git a/docs/guide/getting-started/customization.md b/docs/guide/getting-started/customization.md
index 1d7fd3fb..4ff11b51 100644
--- a/docs/guide/getting-started/customization.md
+++ b/docs/guide/getting-started/customization.md
@@ -1,16 +1,24 @@
 <script setup lang="ts">
 import { useCssVar } from '@vueuse/core';
+import { useAnu } from 'anu-vue';
 import { computed } from 'vue';
 
-const primaryColor = useCssVar('--a-primary')
+const { activeTheme, themes } = useAnu()
 const vpBrandHue = useCssVar('--vp-brand-hue')
-const isPrimaryChanged = computed(() => primaryColor.value.startsWith('235'))
+const isPrimaryChanged = computed(() => activeTheme.value.theme?.colors.primary?.startsWith('235'))
 
 const updatePrimaryColor = () => {
-    // To update the look & feel of whole template, update VitePress primary color as well
-    vpBrandHue.value = isPrimaryChanged.value ? '265' : '235'
+  const primaryColor = activeTheme.value.theme.colors.primary
+  const primaryHue = isPrimaryChanged.value ? '265' : '235'
 
-    primaryColor.value = `${isPrimaryChanged.value ? '265' : '235'}, 97.7%, 66.3%`
+  // To update the look & feel of whole template, update VitePress primary color as well
+  vpBrandHue.value = primaryHue
+
+  // ℹ️ Change primary color for all themes. You can also just change the primary color of current/active theme 😇
+  for (const themeName in themes.value) {
+    const theme = themes.value[themeName]
+    theme.colors.primary = `${primaryHue}, 97.7%, 66.3%`
+  }
 }
 </script>
 
@@ -18,9 +26,9 @@ const updatePrimaryColor = () => {
 
 ## Color
 
-Anu uses [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) color format to define colors. You can configure theme colors via [CSS variables(custom properties)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+Anu uses [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) color format to define and use colors. You can update theme colors via [themes](/guide/features/theme.md) configurations.
 
-To customize theme color, set a CSS variable in your CSS with color name prefixed with `a-` (_e.g. `--a-primary`_). Below is the list of colors you can configure.
+Below is the list of default colors. You can also [add new colors](/guide/features/theme.html#how-to-add-new-color) to the palette.
 
 <div class="flex gap-6 flex-wrap">
     <ACard variant="fill" color="primary" class="rounded-2xl shadow-2xl shadow-primary shadow-opacity-40 w-26 h-26 font-semibold grid place-items-center">Primary</ACard>
@@ -32,9 +40,16 @@ To customize theme color, set a CSS variable in your CSS with color name prefixe
 
 <ABtn class="mt-8" :class="isPrimaryChanged ? 'bg-[hsl(265,97.7%,66.3%)]' : 'bg-[hsl(235,97.7%,66.3%)]'" @click="updatePrimaryColor">{{ isPrimaryChanged ? 'Reset' : 'Change' }} primary</ABtn>
 
+<br />
+<br />
+
+Also checkout related documentation:
+
+- [`useAnu` composable](/guide/composables/useAnu.md)
+
 ## CSS variables
 
-Besides colors, Anu uses CSS variables for other stuff for providing maximum flexibility and customization on the fly. All anu's CSS variables are prefixed with `a-`.
+For the most part, Anu uses CSS variables for other stuff to providing maximum flexibility and customization on the fly. All anu's CSS variables are prefixed with `a-`.
 
 :::details View all CSS vars
 Below is CSS vars defined for preset theme default's light theme:
@@ -69,7 +84,7 @@ Just change the colors to Bootstrap's color and see the magic 😍
 ![Bootstrap buttons using anu](/images/guide/anu-bootstrap-btns.png)
 :::
 
-You can refer to available shortcuts in [this](https://github.com/jd-solanki/anu/blob/main/packages/anu-vue/src/presets/theme-default/index.ts) file.
+You can refer to available shortcuts in [this](https://github.com/jd-solanki/anu/blob/main/packages/preset-theme-default/src/shortcuts.ts) file.
 
 If you like this simple customization don't forget to give a **star on Github**. If you don't like it give a triple star 😉.
 
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 32823de0..8619e57a 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -16,6 +16,9 @@
         "paths": {
             "@anu/*": [
                 "../packages/anu-vue/*"
+            ],
+            "anu-vue": [
+                "../packages/anu-vue"
             ]
         }
     },
@@ -29,4 +32,4 @@
         "**/*.md",
         ".vitepress/shims.d.ts"
     ]
-}
\ No newline at end of file
+}
diff --git a/packages/anu-vue/src/composables/index.ts b/packages/anu-vue/src/composables/index.ts
index e4a23d61..0bccdf70 100644
--- a/packages/anu-vue/src/composables/index.ts
+++ b/packages/anu-vue/src/composables/index.ts
@@ -1,3 +1,4 @@
+export * from './useAnu'
 export * from './useColor'
 export * from './useConfigurable'
 export * from './useDOMScrollLock'
diff --git a/packages/anu-vue/src/composables/useAnu.ts b/packages/anu-vue/src/composables/useAnu.ts
new file mode 100644
index 00000000..a1971b90
--- /dev/null
+++ b/packages/anu-vue/src/composables/useAnu.ts
@@ -0,0 +1,64 @@
+import type { ConfigThemes, PluginOptions } from '../plugin'
+import { createCustomGlobalState } from '@/composables/useCustomCreateGlobalState'
+
+const getThemeColorsCss = (themes: ConfigThemes) => {
+  return Object.entries(themes)
+    .map(
+      ([themeName, theme]) => `${theme.class ? `.${theme.class}` : ':root'}{${Object.entries(theme.colors).concat(Object.entries(theme.cssVars)).map(([varName, val]) => `--a-${varName}:${val};`).join('')}}`,
+    )
+    .join('')
+}
+
+export interface AnuComposableOptions {
+  themes: PluginOptions['themes']
+  initialTheme: PluginOptions['initialTheme']
+}
+
+export const useAnu = createCustomGlobalState((options: AnuComposableOptions) => {
+  console.log('useAnu called with options', options)
+
+  const themes = ref(options.themes)
+  const activeThemeName = ref(options.initialTheme)
+  const activeTheme = computed(() => ({
+    name: activeThemeName.value,
+    theme: themes.value[activeThemeName.value],
+  }))
+  const themeColorsCss = ref('')
+  useStyleTag(themeColorsCss)
+
+  /*
+    ℹ️ `Object.values(themes.value).map(theme => [theme.colors, theme.cssVars]).flat()` will allow watching for colors & css vars of all themes 😮
+
+    Object.values(themes.value) => [<lightThemeConfig>, <darkThemeConfig>] => Each theme's theme value/config
+    Object.values(themes.value).map(theme => [theme.colors, theme.cssVars]) => [[<lightThemeColors>, <lightThemeCssVars>], [<darkThemeColors>, <darkThemeCssVars>]] => Will return nested array with colors & css variables
+    Finally flat the array to get list of each theme's color & css var [<lightThemeColor>, <lightThemeCssVars>, <darkThemeColors>, <darkThemeCssVars>] ✨
+  */
+  watch(
+    () => Object.values(themes.value).map(theme => [theme.colors, theme.cssVars]).flat(),
+    () => {
+      themeColorsCss.value = getThemeColorsCss(themes.value)
+    },
+    { deep: true, immediate: true },
+  )
+
+  // Toggle theme class
+  watch(activeThemeName, (newThemeName, oldThemeName) => {
+    const newTheme = themes.value[newThemeName]
+
+    if (newTheme && newTheme.class)
+      document.documentElement.classList.toggle(newTheme.class)
+
+    // ℹ️ Initially, `oldThemeName` will be undefined
+    if (oldThemeName) {
+      const oldTheme = themes.value[oldThemeName]
+      if (oldTheme && oldTheme.class)
+        document.documentElement.classList.toggle(oldTheme.class)
+    }
+  }, { immediate: true })
+
+  return {
+    themes,
+    activeThemeName,
+    activeTheme,
+  }
+})
diff --git a/packages/anu-vue/src/composables/useColor.ts b/packages/anu-vue/src/composables/useColor.ts
index a7ddec55..0c25e392 100644
--- a/packages/anu-vue/src/composables/useColor.ts
+++ b/packages/anu-vue/src/composables/useColor.ts
@@ -1,17 +1,27 @@
 import type { MaybeRef } from '@vueuse/core'
-import type { StyleValue } from 'vue'
+import type { ComputedRef, StyleValue } from 'vue'
+import { useAnu } from '@/composables/useAnu'
 import type { ColorProp } from '@/composables/useProps'
 
+export const isThemeColor = (color: ColorProp | null): ComputedRef<boolean> => computed(() => {
+  let activeThemeColors: string[] = []
+
+  const { activeTheme } = useAnu()
+  activeThemeColors = Object.keys(activeTheme.value.theme.colors)
+
+  return !!(color && (activeThemeColors as ColorProp[]).includes(color))
+})
+
 export const useColor = (color: MaybeRef<ColorProp>, cssVarName: MaybeRef<string>, as: 'text' | 'bg' = 'text') => {
   const styles = computed(() => {
     const _color = unref(color)
     const cssVar = computed(() => `--a-${unref(cssVarName)}`)
 
     const property = as === 'bg' ? 'background-color' : 'color'
-    const isThemeColor = ['primary', 'success', 'info', 'warning', 'danger'].includes(_color as string)
+    const _isThemeColor = isThemeColor(_color)
 
     const _styles = {
-      [cssVar.value]: isThemeColor ? `hsl(var(--a-${_color}))` : _color,
+      [cssVar.value]: _isThemeColor.value ? `hsl(var(--a-${_color}))` : _color,
       [property]: `var(${cssVar.value})`,
     } as StyleValue
 
diff --git a/packages/anu-vue/src/composables/useCustomCreateGlobalState.ts b/packages/anu-vue/src/composables/useCustomCreateGlobalState.ts
new file mode 100644
index 00000000..6b618503
--- /dev/null
+++ b/packages/anu-vue/src/composables/useCustomCreateGlobalState.ts
@@ -0,0 +1,26 @@
+// ℹ️ Waiting for: https://github.com/vueuse/vueuse/pull/2790
+
+export type CreateGlobalStateReturn<T> = (...args: any[]) => T
+
+/**
+ * Keep states in the global scope to be reusable across Vue instances.
+ *
+ * @see https://vueuse.org/createGlobalState
+ * @param stateFactory A factory function to create the state
+ */
+export function createCustomGlobalState<T>(
+  stateFactory: (...args: any[]) => T,
+): CreateGlobalStateReturn<T> {
+  let initialized = false
+  let state: T
+  const scope = effectScope(true)
+
+  return (...args: any[]) => {
+    if (!initialized) {
+      state = scope.run(() => stateFactory(...args))!
+      initialized = true
+    }
+
+    return state
+  }
+}
diff --git a/packages/anu-vue/src/composables/useLayer.ts b/packages/anu-vue/src/composables/useLayer.ts
index 0af46771..74c6fc72 100644
--- a/packages/anu-vue/src/composables/useLayer.ts
+++ b/packages/anu-vue/src/composables/useLayer.ts
@@ -2,10 +2,10 @@ import type { MaybeRef } from '@vueuse/core'
 import { defu } from 'defu'
 import type { ComponentObjectPropsOptions } from 'vue'
 import { ref, unref, watch } from 'vue'
+import { isThemeColor } from '@/composables/useColor'
 import type { ColorProp } from '@/composables/useProps'
 import { color } from '@/composables/useProps'
 import { useTypographyColor } from '@/composables/useTypographyColor'
-import { isThemeColor } from '@/utils/color'
 import { colord } from '@/utils/colord'
 
 export interface LayerProps {
@@ -84,7 +84,7 @@ export const useLayer = () => {
       We also have colord as dependency for now. We might remove this in future once Anu is more popular and mature.
     */
 
-    if (_isThemeColor) {
+    if (_isThemeColor.value) {
       styles.push({ '--a-layer-c': `var(--a-${propColor})` })
 
       if (propVariant === 'fill') {
diff --git a/packages/anu-vue/src/composables/useProps.ts b/packages/anu-vue/src/composables/useProps.ts
index 85db3c33..321dcb57 100644
--- a/packages/anu-vue/src/composables/useProps.ts
+++ b/packages/anu-vue/src/composables/useProps.ts
@@ -1,12 +1,11 @@
 import { createDefu } from 'defu'
 import type { PropType } from 'vue'
 import type { ConfigurableValue } from '@/composables/useConfigurable'
+import type { ThemeColors } from '@/plugin'
 import type { NamedColors } from '@/utils/color'
 import type { LooseAutocomplete } from '@/utils/typescripts'
 
-export const themeColors = ['primary', 'success', 'info', 'warning', 'danger'] as const
-export type ThemeColor = typeof themeColors[number]
-export type ColorProp = LooseAutocomplete<ThemeColor | NamedColors> | undefined
+export type ColorProp = LooseAutocomplete<ThemeColors | NamedColors> | undefined
 
 export const color = {
   type: [String, undefined] as PropType<ColorProp>,
diff --git a/packages/anu-vue/src/composables/useTypographyColor.ts b/packages/anu-vue/src/composables/useTypographyColor.ts
index 8fb5a3a1..6d3820db 100644
--- a/packages/anu-vue/src/composables/useTypographyColor.ts
+++ b/packages/anu-vue/src/composables/useTypographyColor.ts
@@ -2,7 +2,7 @@ import type { MaybeComputedRef } from '@vueuse/core'
 import { resolveUnref } from '@vueuse/core'
 import type { ColorProp } from './useProps'
 import { colord } from '@/utils/colord'
-import { isThemeColor } from '@/utils/color'
+import { isThemeColor } from '@/composables/useColor'
 
 const calculateColor = (_isThemeColor: boolean, _color: ColorProp | null, _variant: string) => {
   const classes = []
@@ -48,7 +48,7 @@ export const useTypographyColor = (color: MaybeComputedRef<ColorProp | null>, va
   const _isThemeColor = isThemeColor(_color)
 
   watch([() => color, () => variant], () => {
-    const calculatedColor = calculateColor(_isThemeColor, _color, _variant)
+    const calculatedColor = calculateColor(_isThemeColor.value, _color, _variant)
     typographyClasses.value = calculatedColor.classes
     typographyStyles.value = calculatedColor.styles
   }, { immediate: true })
diff --git a/packages/anu-vue/src/index.ts b/packages/anu-vue/src/index.ts
index 87ea372c..fa7a0982 100644
--- a/packages/anu-vue/src/index.ts
+++ b/packages/anu-vue/src/index.ts
@@ -1,37 +1,14 @@
-import { defu } from 'defu'
-import type { App } from 'vue'
-import * as components from './components'
-import './scss/index.scss'
-
-export interface PluginOptions {
-  registerComponents: boolean
-}
-
-const optionsDefaults: Partial<PluginOptions> = {
-  registerComponents: true,
-}
-
-const plugin = {
-  install(app: App, options: Partial<PluginOptions> = {}) {
-    const _options = defu(options, optionsDefaults)
-
-    if (_options.registerComponents) {
-      for (const prop in components) {
-      // @ts-expect-error: I want to index import using string
-        const component = components[prop]
-        app.component(component.name, component)
-      }
-    }
-  },
-}
+import '@/scss/index.scss'
 
 export { AnuComponentResolver } from './componentResolver'
 export * from './components'
 export * from './composables'
 export * as composables from './composables'
-export { presetAnu } from './preset'
+export { plugin as anu } from './plugin'
+export type { PluginOptions, ThemeColors, ThemeOptions as ThemeOption } from './plugin'
+export { defaultThemeColors, presetAnu } from './preset'
 export * from './symbols'
-export { plugin as anu }
+
 export const presetIconExtraProperties = {
   'height': '1.2em',
   'width': '1.2em',
diff --git a/packages/anu-vue/src/plugin.ts b/packages/anu-vue/src/plugin.ts
new file mode 100644
index 00000000..92988bfe
--- /dev/null
+++ b/packages/anu-vue/src/plugin.ts
@@ -0,0 +1,74 @@
+import { defu } from 'defu'
+import type { PartialDeep } from 'type-fest'
+import type { App } from 'vue'
+import * as components from '@/components'
+import { useAnu } from '@/composables/useAnu'
+import { ANU_CONFIG } from '@/symbols'
+
+export type ThemeColors = 'primary' | 'success' | 'info' | 'warning' | 'danger'
+export type DefaultThemes = 'light' | 'dark'
+
+export interface ThemeOptions {
+  class: string
+  colors: Record<ThemeColors, string>
+  cssVars: Record<string, string>
+}
+
+export type ConfigThemes = Record<DefaultThemes, ThemeOptions>
+
+export interface PluginOptions {
+  registerComponents: boolean
+  initialTheme: keyof ConfigThemes
+  themes: ConfigThemes
+}
+
+const configDefaults: PluginOptions = {
+  registerComponents: true,
+  initialTheme: 'light',
+  themes: {
+    light: {
+      class: '',
+      colors: {
+        primary: '265, 97.7%, 66.3%',
+        success: '94.5, 100%, 39.6%',
+        info: '200.1, 100%, 54.3%',
+        warning: '42.4, 100%, 50%',
+        danger: '358.3, 100%, 64.9%',
+      },
+      cssVars: {},
+    },
+    dark: {
+      class: 'dark',
+      colors: {
+        primary: '261, 73%, 66.3%',
+        success: '94.5, 73%, 39.6%',
+        info: '200.1, 73%, 54.3%',
+        warning: '42.4, 73%, 50%',
+        danger: '358.3, 73%, 64.9%',
+      },
+      cssVars: {},
+    },
+  },
+}
+
+export const plugin = {
+  install(app: App, options: PartialDeep<PluginOptions> = {}) {
+    const config = defu(options, configDefaults)
+
+    if (config.registerComponents) {
+      for (const prop in components) {
+      // @ts-expect-error: I want to index import using string
+        const component = components[prop]
+        app.component(component.name, component)
+      }
+    }
+
+    app.provide(ANU_CONFIG, config)
+
+    // Initialize Anu instance with config values
+    useAnu({
+      initialTheme: config.initialTheme,
+      themes: config.themes,
+    })
+  },
+}
diff --git a/packages/anu-vue/src/preset/index.ts b/packages/anu-vue/src/preset/index.ts
index e3e9a525..695c2318 100644
--- a/packages/anu-vue/src/preset/index.ts
+++ b/packages/anu-vue/src/preset/index.ts
@@ -1,8 +1,37 @@
 import type { Preset } from '@unocss/core'
+import { defu } from 'defu'
+
+export const defaultThemeColors = ['primary', 'success', 'info', 'warning', 'danger']
+
+export const presetDefaults = {
+  colors: defaultThemeColors,
+}
+
+export function presetAnu(options: Partial<typeof presetDefaults> = {}): Preset {
+  const _options: typeof presetDefaults = defu(options, presetDefaults)
 
-export function presetAnu(): Preset {
   return {
     name: '@anu-vue/preset-core',
+    theme: {
+      colors: Object.fromEntries(
+        _options.colors.map(c => [c, `hsl(var(--a-${c}))`]),
+      ),
+    },
+    safelist: [
+      // TODO: We can remove this color safelist if we use leverage `--a-color` CSS var
+      ..._options.colors.map(c => `bg-${c}`),
+      ..._options.colors.map(c => `hover:bg-${c}`),
+
+      ..._options.colors.map(c => `border-${c}`),
+      ..._options.colors.map(c => `text-${c}`),
+      ..._options.colors.map(c => `shadow-${c}`),
+      ..._options.colors.map(c => `after:bg-${c}`),
+
+      // Typography
+      ..._options.colors.map(c => `a-title-${c}`),
+      ..._options.colors.map(c => `a-subtitle-${c}`),
+      ...['top', 'right', 'bottom', 'left'].map(dir => `a-drawer-anchor-${dir}`),
+    ],
     variants: [
       (matcher: string) => {
         if (!matcher.startsWith('i:'))
diff --git a/packages/anu-vue/src/symbols.ts b/packages/anu-vue/src/symbols.ts
index 4395ed6d..5f8af358 100644
--- a/packages/anu-vue/src/symbols.ts
+++ b/packages/anu-vue/src/symbols.ts
@@ -1,3 +1,4 @@
 import type { InjectionKey } from 'vue'
+import type { PluginOptions } from '@/plugin'
 
-export const spacingSymbol = Symbol('spacingSymbol') as InjectionKey<number>
+export const ANU_CONFIG = Symbol('ANU_CONFIG') as InjectionKey<PluginOptions>
diff --git a/packages/anu-vue/src/utils/color.ts b/packages/anu-vue/src/utils/color.ts
index ea93d49d..78d284b7 100644
--- a/packages/anu-vue/src/utils/color.ts
+++ b/packages/anu-vue/src/utils/color.ts
@@ -1,5 +1,3 @@
-import type { ColorProp } from '@/composables/useProps'
-
 // ℹ️ Extracted from https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
 export const namedColors = Object.freeze({
   // CSS Level 1
@@ -271,5 +269,3 @@ export const getContrastColor = (color: string): string => {
   // If the color could not be parsed, return black as the contrast color
   return darkContrastColor
 }
-
-export const isThemeColor = (color: ColorProp | null): boolean => !!(color && (['primary', 'success', 'info', 'warning', 'danger'] as ColorProp[]).includes(color))
diff --git a/packages/anu-vue/src/utils/helpers.ts b/packages/anu-vue/src/utils/helpers.ts
index 4b3047e3..4b087aaf 100644
--- a/packages/anu-vue/src/utils/helpers.ts
+++ b/packages/anu-vue/src/utils/helpers.ts
@@ -5,7 +5,7 @@ export const isEmpty = (value: unknown): boolean => {
   if (value === null || value === undefined || value === '')
     return true
 
-  return !!(Array.isArray(value) && value.length === 0)
+  return !!(Array.isArray(value) && value.length === 0) || JSON.stringify(value) === '{}'
 }
 
 // 👉 IsNullOrUndefined
diff --git a/packages/anu-vue/tsconfig.json b/packages/anu-vue/tsconfig.json
index 39b6616c..2ef7c02c 100644
--- a/packages/anu-vue/tsconfig.json
+++ b/packages/anu-vue/tsconfig.json
@@ -22,7 +22,7 @@
         "*"
       ],
       "anu-vue": [
-        "./src"
+        "."
       ]
     },
     "types": [
@@ -47,11 +47,12 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "auto-imports.d.ts",
-    "shims.d.ts"
+    "shims.d.ts",
+    "volar.d.ts"
   ],
   "references": [
     {
       "path": "./tsconfig.node.json"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/preset-theme-default/src/index.ts b/packages/preset-theme-default/src/index.ts
index 8a8c517f..625267e3 100644
--- a/packages/preset-theme-default/src/index.ts
+++ b/packages/preset-theme-default/src/index.ts
@@ -3,44 +3,18 @@ import { rules } from './rules'
 import { shortcuts } from './shortcuts'
 import { variants } from './variants'
 
-// ℹ️ We will need this import to generate the CSS file for preset-theme-default. We are just temporary disabling this.
-// import './scss/index.scss'
-
 interface PresetOptions {
   shortcutOverrides?: Exclude<Preset['shortcuts'], undefined>
 }
 
-// TODO: Pass this to Anu plugin so that it can use the classes defined by theme preset
-export const colors = ['primary', 'success', 'info', 'warning', 'danger'] as const
-export type Colors = typeof colors
-
 export function presetThemeDefault(options: PresetOptions = {}): Preset {
   return {
     name: '@anu-vue/preset-theme-default',
     theme: {
       colors: {
-        primary: 'hsl(var(--a-primary))',
-        success: 'hsl(var(--a-success))',
-        info: 'hsl(var(--a-info))',
-        warning: 'hsl(var(--a-warning))',
-        danger: 'hsl(var(--a-danger))',
         a: { border: 'hsla(var(--a-base-c),var(--a-border-opacity))' },
       },
     },
-    safelist: [
-      ...colors.map(c => `bg-${c}`),
-      ...colors.map(c => `hover:bg-${c}`),
-
-      ...colors.map(c => `border-${c}`),
-      ...colors.map(c => `text-${c}`),
-      ...colors.map(c => `shadow-${c}`),
-      ...colors.map(c => `after:bg-${c}`),
-
-      // Typography
-      ...colors.map(c => `a-title-${c}`),
-      ...colors.map(c => `a-subtitle-${c}`),
-      ...['top', 'right', 'bottom', 'left'].map(dir => `a-drawer-anchor-${dir}`),
-    ],
     rules,
     shortcuts: options.shortcutOverrides === undefined
       ? shortcuts
diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss
index aa161ab2..1097289b 100644
--- a/packages/preset-theme-default/src/scss/index.scss
+++ b/packages/preset-theme-default/src/scss/index.scss
@@ -28,12 +28,6 @@ $body-color: hsla(var(--a-base-c), 0.68);
     --a-backdrop-c: 0, 0%, 0%;
     --a-backdrop-opacity: 0.35;
 
-    --a-primary: 265, 97.7%, 66.3%;
-    --a-success: 94.5, 100%, 39.6%;
-    --a-info: 200.1, 100%, 54.3%;
-    --a-warning: 42.4, 100%, 50%;
-    --a-danger: 358.3, 100%, 64.9%;
-
     // TODO: Add support to customize contrast color in => packages/anu-vue/src/utils/colord.ts
     // Contrast colors
     // --a-contrast-dark: #000;
@@ -79,12 +73,6 @@ $body-color: hsla(var(--a-base-c), 0.68);
   --a-loader-overlay-bg-opacity: 0.75;
   --a-backdrop-opacity: 0.5;
 
-  --a-primary: 261, 73%, 66.3%;
-  --a-success: 94.5, 73%, 39.6%;
-  --a-info: 200.1, 73%, 54.3%;
-  --a-warning: 42.4, 73%, 50%;
-  --a-danger: 358.3, 73%, 64.9%;
-
   // SECTION Components
 
   // 👉 Switch
diff --git a/packages/preset-theme-default/src/shortcuts.ts b/packages/preset-theme-default/src/shortcuts.ts
index 3d198ac1..399f9061 100644
--- a/packages/preset-theme-default/src/shortcuts.ts
+++ b/packages/preset-theme-default/src/shortcuts.ts
@@ -132,7 +132,7 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
 
     // 👉 Select
     'a-select-floating': '[--a-transition-slide-up-transform:6px]',
-    'a-select-options-container': '',
+    'a-select-options-container': 'z-10',
     'a-select-options-list': 'spacing-75',
 
     // 👉 Switch
diff --git a/tsconfig.json b/tsconfig.json
index 59965976..0e4627ac 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,7 @@
         "jsx": "preserve",
         "types": [
             "node",
-            "unplugin-vue-macros/macros-global",
+            "unplugin-vue-macros/macros-global"
         ]
     },
     "vueCompilerOptions": {
@@ -35,4 +35,4 @@
         "**/node_modules/**",
         "**/playground/**"
     ]
-}
\ No newline at end of file
+}