diff --git a/README.md b/README.md
index 072337e9e..f414b81a2 100644
--- a/README.md
+++ b/README.md
@@ -20,8 +20,9 @@ GITS UI is the official UI Component Library in GITS Indonesia built with Vue 3
 - 🚀 Provides [TypeScript](https://www.typescriptlang.org/) support by default
 - 🎨 Allows for customization with CSS properties
 - 🔌 Modular design: allows for use as a complete UI framework or as individual plugins
-- 🏷 Headless by default
-- 🌈 Theming support (coming soon)
+- 🏷 Headless component by default
+- 🎨 Dark mode: ships with dark mode styles out-of-the-box
+- 🌈 Theming support: create your own custom theme easily
 
 ## Documentation
 
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index bced108b9..770fdbadc 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -28,6 +28,7 @@ export default defineConfig({
           {text: 'Getting Started', link: '/guide/getting-started'},
           {text: 'Customization', link: '/guide/customization'},
           {text: 'Default Theme', link: '/guide/theme'},
+          {text: 'Dark Mode', link: '/guide/dark-mode'},
           {text: 'Starter', link: '/guide/starter'},
           {text: 'Migration', link: '/guide/migration'},
           {text: 'Changelog', link: '/guide/changelog'},
diff --git a/docs/guide/dark-mode.md b/docs/guide/dark-mode.md
new file mode 100644
index 000000000..65c4685da
--- /dev/null
+++ b/docs/guide/dark-mode.md
@@ -0,0 +1,74 @@
+# Dark Mode
+
+The GITS UI includes dark mode support by default, however, to enable it, you will need to load the styles explicitly.
+
+## Tailwind Configuration
+
+To enable dark mode, you need to set the `darkMode` option to `class` in your Tailwind config file.
+
+```ts {2}
+module.exports = {
+  darkMode: 'class',
+};
+```
+
+## Enabling Dark Mode on a Vue App
+
+To enable dark mode on a Vue application, load the dark mode styles in your `main.ts` file.
+
+```ts {10}
+import {createApp} from 'vue';
+import {createPinia} from 'pinia';
+import App from './App.vue';
+import router from './router';
+import GitsUi from '@gits-id/ui';
+import './assets/index.css';
+import '@gits-id/ui/styles.scss';
+
+// load dark mode styles
+import '@gits-id/ui/styles.dark';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(GitsUi);
+
+app.mount('#app');
+```
+
+## Enabling Dark Mode on a Nuxt App
+
+To enable dark mode on a Nuxt application, set the value of `darkMode` option to `true` in your `nuxt.config.ts` file.
+
+```ts {4}
+export default defineNuxtConfig({
+  modules: ['@gits-id/ui-nuxt', '@nuxtjs/tailwindcss'],
+  gitsUi: {
+    darkMode: true,
+  },
+});
+```
+
+## Toggling between dark and light mode
+
+You can toggle between `dark` and `light` mode by toggling the `class` of the parent element between `dark` or `light`. For example, you can set the value of the `html` class to `dark` to enable dark mode and `light` to enable light mode.
+
+```vue
+<script setup lang="ts">
+const toggleDarkMode = () => {
+  const html = document.querySelector('html');
+  html?.classList?.toggle('dark');
+};
+
+const darkMode = ref(false);
+</script>
+
+<template>
+  <VSwitch
+    v-model="darkMode"
+    label="Dark Mode"
+    @update:model-value="toggleDarkMode"
+  />
+</template>
+```
diff --git a/docs/index.md b/docs/index.md
index d977ae7dd..7118b9906 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -37,5 +37,8 @@ features:
     details: GITS UI comes with TypeScript support out-of-the-box.
   - icon: 🎨
     title: Themes
-    details: GITS UI includes support for theming (soon).
+    details: GITS UI includes support for theming.
+  - icon: 🎨
+    title: Dark Mode
+    details: Support dark mode out-of-the-box.
 ---
diff --git a/packages/alert/README.md b/packages/alert/README.md
index cddd184cf..ee319c469 100644
--- a/packages/alert/README.md
+++ b/packages/alert/README.md
@@ -6,18 +6,20 @@ GITS Alert component is a flexible alert component that can be used to display v
 
 Install with your prefered package manager.
 
-
 With NPM:
+
 ```
 npm i @gits-id/alert
 ```
 
 With Yarn:
+
 ```
 yarn add @gits-id/alert
 ```
 
 With PNPM:
+
 ```
 pnpm i @gits-id/alert
 ```
@@ -30,8 +32,13 @@ To use the component, you can simply include it in your template like this:
 <script setup lang="ts">
 // import component
 import VAlert from '@gits-id/alert';
-// import styles
+// import styles (includes dark mode)
 import '@gits-id/alert/dist/style.css';
+// or import the SASS styles
+import '@gits-id/alert/src/VAlert.scss';
+// if are using SASS bundle and want to add dark mode support,
+// uncomment this line
+// import '@gits-id/alert/src/VAlert.dark.scss';
 </script>
 
 <template>
diff --git a/packages/alert/src/VAlert.dark.scss b/packages/alert/src/VAlert.dark.scss
new file mode 100644
index 000000000..1e0d2c4df
--- /dev/null
+++ b/packages/alert/src/VAlert.dark.scss
@@ -0,0 +1,37 @@
+.dark {
+  .alert {
+    // default variant
+    &-default:not(.alert--outlined):not(.alert--bordered):not(.alert--solid) {
+      --alert-bg-color: theme('colors.neutral.800');
+      --alert-text-color: theme('colors.neutral.200');
+      --alert-border-color: theme('colors.neutral.800');
+    }
+
+    // solid variant
+    &--solid {
+      &.alert-default {
+        --alert-bg-color: theme('colors.neutral.800');
+        --alert-border-color: theme('colors.neutral.800');
+        --alert-text-color: theme('colors.neutral.200');
+      }
+    }
+
+    // outlined variant
+    &--outlined {
+      &.alert-default {
+        --alert-text-color: theme('colors.neutral.200');
+      }
+      &.alert-dark {
+        --alert-text-color: theme('colors.neutral.200');
+        --alert-border-color: theme('colors.neutral.700');
+      }
+    }
+
+    // bordered variant
+    &--bordered {
+      &.alert-default {
+        --alert-text-color: theme('colors.neutral.800');
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/alert/src/VAlert.stories.ts b/packages/alert/src/VAlert.stories.ts
index fcc993d1b..74bc3e4de 100644
--- a/packages/alert/src/VAlert.stories.ts
+++ b/packages/alert/src/VAlert.stories.ts
@@ -5,6 +5,7 @@ import Icon from '@gits-id/icon';
 import AlertVModelStory from './stories/AlertVModelStory.vue';
 import AlertTransitionStory from './stories/AlertTransitionStory.vue';
 import AlertCustomStory from './stories/AlertCustomStory.vue';
+import './VAlert.dark.scss';
 
 export default {
   title: 'Components/Alert',
@@ -164,3 +165,29 @@ export const Custom = () => ({
   components: {AlertCustomStory},
   template: `<AlertCustomStory />`,
 });
+
+export const DarkMode = () => ({
+  components: {VAlert, Icon},
+  setup() {
+    return {
+      variants: ['default', 'solid', 'outlined', 'bordered'],
+      themeColors,
+    };
+  },
+  template: `
+<div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+  <div v-for="variant in variants" :key="variant" class="mt-5">
+    <p class="font-semibold text-lg mb-2">{{ variant }}</p>
+    <v-alert
+      v-for="color in themeColors"
+      :color="color"
+      :key="color"
+      class="mb-2"
+      v-bind:[variant]="true"
+    >
+      Change a few things up and try submitting again.
+    </v-alert>
+  </div>
+</div>
+  `,
+});
diff --git a/packages/alert/src/index.ts b/packages/alert/src/index.ts
index d5b2b3c58..5de9eabe9 100644
--- a/packages/alert/src/index.ts
+++ b/packages/alert/src/index.ts
@@ -1,3 +1,5 @@
 import VAlert from './VAlert.vue';
+import './VAlert.dark.scss';
+
 export {VAlert};
 export default VAlert;
diff --git a/packages/app-bar/src/VAppBar.dark.scss b/packages/app-bar/src/VAppBar.dark.scss
new file mode 100644
index 000000000..fc0b61ffc
--- /dev/null
+++ b/packages/app-bar/src/VAppBar.dark.scss
@@ -0,0 +1,9 @@
+.dark {
+  .app-bar {
+    &-default {
+      --app-bar-bg-color: theme('colors.neutral.800');
+      --app-bar-color: theme('colors.neutral.200');
+      --app-bar-border-color: theme('borderColor.neutral.700');
+    }
+  }
+}
diff --git a/packages/app-bar/src/VAppBar.scss b/packages/app-bar/src/VAppBar.scss
index 76f0fe156..1a6a77528 100644
--- a/packages/app-bar/src/VAppBar.scss
+++ b/packages/app-bar/src/VAppBar.scss
@@ -34,7 +34,7 @@
 
   // sticky
   &--sticky {
-    position: 'sticky';
+    position: sticky;
     top: 0;
     left: 0;
     right: 0;
diff --git a/packages/app-bar/src/VAppBar.stories.ts b/packages/app-bar/src/VAppBar.stories.ts
index 4827e9c23..bfe9e7e2a 100644
--- a/packages/app-bar/src/VAppBar.stories.ts
+++ b/packages/app-bar/src/VAppBar.stories.ts
@@ -8,6 +8,7 @@ import {VInput} from '@gits-id/forms';
 import '@gits-id/button/src/VBtn.scss';
 import '@gits-id/forms/src/forms.scss';
 import '@gits-id/theme/transition.css';
+import './VAppBar.dark.scss';
 
 export default {
   title: 'Components/AppBar',
@@ -353,3 +354,17 @@ export const BackdropBlur: Story<{}> = (args) => ({
 </main>
 `,
 });
+
+export const DarkMode: Story<{}> = () => ({
+  components: {VAppBar},
+  setup() {
+    return {defaultColors};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
+  <VAppBar v-for="color in defaultColors" :key="color" :color="color">
+    {{ color }}
+  </VAppBar>
+</main>
+`,
+});
diff --git a/packages/app-bar/src/index.ts b/packages/app-bar/src/index.ts
index aba30733d..215b170fa 100644
--- a/packages/app-bar/src/index.ts
+++ b/packages/app-bar/src/index.ts
@@ -1,4 +1,5 @@
 import VAppBar from './VAppBar.vue';
+import './VAppBar.dark.scss';
 
 export * from './types';
 export {VAppBar};
diff --git a/packages/autocomplete/src/VAutocomplete.dark.scss b/packages/autocomplete/src/VAutocomplete.dark.scss
new file mode 100644
index 000000000..e36e7fc27
--- /dev/null
+++ b/packages/autocomplete/src/VAutocomplete.dark.scss
@@ -0,0 +1,49 @@
+.dark {
+  .autocomplete {
+    // field
+    --v-autocomplete-field-bg-color: theme('colors.neutral.800');
+    --v-autocomplete-field-border-color: theme('borderColor.neutral.700');
+
+    // field hover
+    --v-autocomplete-field-hover-border-color: theme('borderColor.neutral.800');
+
+    // input
+    --v-autocomplete-input-color: theme('colors.neutral.600');
+
+    // input selected
+    --v-autocomplete-input-selected-color: theme('colors.neutral.200');
+
+    // clearable button
+    --v-autocomplete-clearable-button-color: theme('colors.neutral.400');
+
+    // clearable button hover
+    --v-autocomplete-clearable-button-hover-color: theme('colors.neutral.500');
+    --v-autocomplete-clearable-button-hover-bg-color: theme(
+      'colors.neutral.500'
+    );
+
+    // icon
+    --v-autocomplete-icon-color: theme('colors.neutral.400');
+
+    // options
+    --v-autocomplete-options-bg-color: theme('colors.neutral.800');
+
+    // empty
+    --v-autocomplete-empty-color: theme('colors.neutral.700');
+
+    // item
+    --v-autocomplete-item-color: theme('colors.neutral.200');
+
+    // item selected
+    --v-autocomplete-item-selected-color: theme('colors.primary.500');
+
+    // item selected item
+    --v-autocomplete-item-selected-icon-color: theme('colors.primary.500');
+
+    // item inactive
+    --v-autocomplete-item-inactive-color: theme('colors.neutral.200');
+
+    // item active
+    --v-autocomplete-item-active-bg-color: theme('colors.neutral.700');
+  }
+}
diff --git a/packages/autocomplete/src/VAutocomplete.scss b/packages/autocomplete/src/VAutocomplete.scss
index c51a9eedf..bb8a9501e 100644
--- a/packages/autocomplete/src/VAutocomplete.scss
+++ b/packages/autocomplete/src/VAutocomplete.scss
@@ -1,3 +1,50 @@
+:root {
+  // field
+  --v-autocomplete-field-bg-color: theme('colors.white');
+  --v-autocomplete-field-border-color: theme('borderColor.DEFAULT');
+
+  // field hover
+  --v-autocomplete-field-hover-border-color: theme('borderColor.gray.400');
+
+  // input
+  --v-autocomplete-input-color: theme('colors.gray.600');
+  --v-autocomplete-input-bg-color: theme('colors.transparent');
+
+  // input selected
+  --v-autocomplete-input-selected-color: theme('colors.gray.800');
+
+  // clearable button
+  --v-autocomplete-clearable-button-color: theme('colors.gray.400');
+
+  // clearable button hover
+  --v-autocomplete-clearable-button-hover-color: theme('colors.gray.500');
+  --v-autocomplete-clearable-button-hover-bg-color: theme('colors.gray.100');
+
+  // icon
+  --v-autocomplete-icon-color: theme('colors.gray.400');
+
+  // options
+  --v-autocomplete-options-bg-color: theme('colors.white');
+
+  // empty
+  --v-autocomplete-empty-color: theme('colors.gray.700');
+
+  // item
+  --v-autocomplete-item-color: theme('colors.gray.800');
+
+  // item selected
+  --v-autocomplete-item-selected-color: theme('colors.primary.500');
+
+  // item selected item
+  --v-autocomplete-item-selected-icon-color: theme('colors.primary.500');
+
+  // item inactive
+  --v-autocomplete-item-inactive-color: theme('colors.gray.900');
+
+  // item active
+  --v-autocomplete-item-active-bg-color: theme('colors.gray.100');
+}
+
 .autocomplete {
   position: relative;
 
@@ -10,10 +57,12 @@
   }
 
   &-field {
+    background-color: var(--v-autocomplete-field-bg-color);
+    border: 1px solid var(--v-autocomplete-field-border-color);
+
     @apply relative
     w-full
     text-left
-    bg-white
     border
     rounded-md
     cursor-default
@@ -23,94 +72,124 @@
     overflow-hidden
     transition
     duration-300
-    border-gray-300 hover:border-gray-400 
     focus-within:ring-primary-500 focus-within:border-primary-500;
 
+    &:hover {
+      --v-autocomplete-border-color: var(
+        --v-autocomplete-field-hover-border-color
+      );
+    }
+
     &--error {
-      @apply border-error-500 focus-within:ring-error-500 focus-within:border-error-500;
+      @apply border-error-500 focus-within:ring-error-500
+        focus-within:border-error-500;
     }
   }
 
   &-input {
+    color: var(--v-autocomplete-input-color);
+    background-color: var(--v-autocomplete-input-bg-color);
+
+    &--selected {
+      --v-autocomplete-input-color: var(--v-autocomplete-input-selected-color);
+    }
+
     @apply w-full
-    border-none
-    focus:ring-0
-    py-3
-    pl-3
-    pr-20
-    leading-5
-    text-gray-600;
+      border-none
+      focus:ring-0
+      py-3
+      pl-3
+      pr-20
+      leading-5;
   }
 
   &-clearable {
     @apply absolute inset-y-0 right-0 flex items-center pr-4;
 
     &-button {
-      @apply mr-1
-    text-gray-400
-    hover:text-gray-700
-    hover:bg-gray-100
-    rounded-full
-    p-1
-    transition
-    duration-300;
+      color: var(--v-autocomplete-clearable-button-color);
+      background-color: var(--v-autocomplete-clearable-button-bg-color);
+
+      &:hover {
+        --v-autocomplete-clearable-button-color: var(
+          --v-autocomplete-clearable-button-hover-color);
+        --v-autocomplete-clearable-button-bg-color: var(
+          --v-autocomplete-clearable-button-hover-bg-color);
+      }
+
+      @apply mr-1 rounded-full p-1 transition duration-300;
     }
   }
 
   &-icon {
-    @apply w-6 h-6 fill-current text-gray-400;
+    color: var(--v-autocomplete-icon-color);
+
+    @apply w-6 h-6 fill-current;
   }
 
   &-options {
+    background-color: var(--v-autocomplete-options-bg-color);
+
     @apply absolute
-    z-10
-    w-full
-    py-1
-    mt-1
-    overflow-auto
-    text-base
-    bg-white
-    rounded-md
-    shadow-lg
-    max-h-60
-    ring-1 ring-black ring-opacity-5
-    focus:outline-none
-    sm:text-sm;
+      z-10
+      w-full
+      py-1
+      mt-1
+      overflow-auto
+      text-base
+      rounded-md
+      shadow-lg
+      max-h-60
+      ring-1 ring-black ring-opacity-5
+      focus:outline-none
+      sm:text-sm;
   }
 
   &-empty {
-    @apply cursor-default select-none relative py-2 px-4 text-gray-700;
+    color: var(--v-autocomplete-empty-color);
+
+    @apply cursor-default select-none relative py-2 px-4;
   }
 
   &-item {
+    background-color: var(--v-autocomplete-item-bg-color);
+
     @apply cursor-default select-none relative py-2 pl-10 pr-4;
 
     &-text {
+      color: var(--v-autocomplete-item-color);
+
       @apply block truncate font-normal;
 
       &--selected {
-        @apply font-medium text-primary-500;
+        --v-autocomplete-item-color: var(--v-autocomplete-item-selected-color);
+
+        @apply font-medium;
       }
     }
 
     &--active {
-      @apply bg-gray-100;
+      --v-autocomplete-item-bg-color: var(--v-autocomplete-item-active-bg-color);
     }
 
     &--inactive {
-      @apply text-gray-900;
+      --v-autocomplete-item-color: var(--v-autocomplete-item-inactive-color);
     }
 
     &-selected {
       @apply absolute inset-y-0 left-0 flex items-center pl-3;
 
       &-icon {
-        @apply w-5 h-5 fill-current text-primary-500;
+        color: var(--v-autocomplete-item-selected-icon-color);
+
+        @apply w-5 h-5 fill-current;
       }
     }
   }
 
   &-error {
-    @apply text-error-500 text-sm mt-1;
+    color: var(--v-autocomplete-error-color);
+
+    @apply text-sm mt-1;
   }
 }
diff --git a/packages/autocomplete/src/VAutocomplete.stories.ts b/packages/autocomplete/src/VAutocomplete.stories.ts
index 4e4289fb4..26d6dc5cc 100644
--- a/packages/autocomplete/src/VAutocomplete.stories.ts
+++ b/packages/autocomplete/src/VAutocomplete.stories.ts
@@ -4,6 +4,7 @@ import {object} from 'yup';
 import VAutocomplete from './VAutocomplete.vue';
 import VBtn from '@gits-id/button';
 import {Story} from '@storybook/vue3';
+import './VAutocomplete.dark.scss';
 
 const items = [
   {value: 1, text: 'Wade Cooper'},
@@ -96,6 +97,23 @@ export const Validation: Story = (args) => ({
 `,
 });
 
+export const DarkMode: Story = (args) => ({
+  components: {VAutocomplete},
+  setup() {
+    const selected = ref();
+    return {args, selected};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+  <VAutocomplete
+    v-bind="args"
+    v-model="selected"
+    label="Dark Mode"
+  />
+</main>
+  `,
+});
+
 export const TestInputState: Story<{}> = (args) => ({
   components: {VBtn, VAutocomplete},
   setup() {
@@ -240,3 +258,20 @@ TestInputState.args = {
   value: undefined,
   clearable: true,
 };
+
+export const DarkMode: Story = (args) => ({
+  components: {VAutocomplete},
+  setup() {
+    const selected = ref();
+    return {args, selected};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+  <VAutocomplete
+    v-bind="args"
+    v-model="selected"
+    label="Dark Mode"
+  />
+</main>
+  `,
+});
diff --git a/packages/autocomplete/src/VAutocomplete.vue b/packages/autocomplete/src/VAutocomplete.vue
index 871e76e5a..5a1b864cc 100644
--- a/packages/autocomplete/src/VAutocomplete.vue
+++ b/packages/autocomplete/src/VAutocomplete.vue
@@ -88,7 +88,13 @@ const clear = () => {
   <Combobox
     v-model="uncontrolledValue"
     class="autocomplete"
-    :class="wrapperClass"
+    :class="[
+      wrapperClass,
+      {
+        'autocomplete--error': !!errorMessage,
+        'autocomplete--selected': !!selected,
+      },
+    ]"
     as="div"
   >
     <ComboboxLabel v-if="label" class="autocomplete-label">
@@ -103,6 +109,9 @@ const clear = () => {
       >
         <ComboboxInput
           class="autocomplete-input"
+          :class="{
+            'autocomplete-input--selected': !!selected,
+          }"
           :display-value="(item: any) => item?.[displayText] || ''"
           :placeholder="placeholder"
           @change="query = $event.target.value"
diff --git a/packages/autocomplete/src/index.ts b/packages/autocomplete/src/index.ts
index d69e31077..a5fbb8426 100644
--- a/packages/autocomplete/src/index.ts
+++ b/packages/autocomplete/src/index.ts
@@ -1,4 +1,5 @@
 import VAutocomplete from './VAutocomplete.vue';
+import './VAutocomplete.dark.scss';
 
 export {VAutocomplete, VAutocomplete as Autocomplete};
 export default VAutocomplete;
diff --git a/packages/autocomplete/tailwind.config.js b/packages/autocomplete/tailwind.config.js
index be2238a9c..8fd11b33e 100644
--- a/packages/autocomplete/tailwind.config.js
+++ b/packages/autocomplete/tailwind.config.js
@@ -1,6 +1,5 @@
 module.exports = {
-  content: [
-    './src/**/*.{vue,js,ts,jsx,tsx}',
-  ],
+  darkMode: 'class',
+  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
   presets: [require('@gits-id/tailwind-config/preset')],
 };
diff --git a/packages/avatar/src/Avatar.dark.scss b/packages/avatar/src/Avatar.dark.scss
new file mode 100644
index 000000000..57eadbc9a
--- /dev/null
+++ b/packages/avatar/src/Avatar.dark.scss
@@ -0,0 +1,8 @@
+.dark {
+  .avatar {
+    &-default {
+      --avatar-bg-color: theme('colors.neutral.700');
+      --avatar-text-color: theme('colors.neutral.200');
+    }
+  }
+}
diff --git a/packages/avatar/src/Avatar.stories.ts b/packages/avatar/src/Avatar.stories.ts
index a08ac614f..0668e917a 100644
--- a/packages/avatar/src/Avatar.stories.ts
+++ b/packages/avatar/src/Avatar.stories.ts
@@ -4,6 +4,7 @@ import {
   defaultColors as colors,
   defaultSizes as sizes,
 } from '@gits-id/theme/defaultTheme';
+import './Avatar.dark.scss';
 
 const avatar1 =
   'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80';
@@ -221,3 +222,22 @@ CustomSizes.parameters = {
     },
   },
 };
+
+export const DarkMode = () => ({
+  components: {Avatar},
+  setup() {
+    return {
+      colors,
+    };
+  },
+  template: `
+<div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+  <Avatar
+    v-for="color in colors"
+    :color="color"
+    :key="color"
+    class="mb-2"
+    name="John Doe" />
+</div>
+  `,
+});
diff --git a/packages/avatar/src/index.ts b/packages/avatar/src/index.ts
index 483332b8e..0d1ae731f 100644
--- a/packages/avatar/src/index.ts
+++ b/packages/avatar/src/index.ts
@@ -1 +1,2 @@
+import './Avatar.dark.scss';
 export {default} from './Avatar.vue';
diff --git a/packages/badge/src/VBadge.dark.scss b/packages/badge/src/VBadge.dark.scss
new file mode 100644
index 000000000..582f1faa2
--- /dev/null
+++ b/packages/badge/src/VBadge.dark.scss
@@ -0,0 +1,20 @@
+.dark {
+  .badge {
+    &-default {
+      --badge-bg-color: theme('colors.neutral.800');
+      --badge-color: theme('colors.neutral.200');
+      --badge-border-color: theme('colors.neutral.800');
+    }
+
+    &--outlined {
+      &.badge-default {
+        --badge-color: theme('colors.neutral.200');
+        --badge-border-color: theme('colors.neutral.600');
+      }
+      &.badge-dark {
+        --badge-color: theme('colors.gray.200');
+        --badge-border-color: theme('colors.gray.600');
+      }
+    }
+  }
+}
diff --git a/packages/badge/src/VBadge.scss b/packages/badge/src/VBadge.scss
index 553710b32..1a84da000 100644
--- a/packages/badge/src/VBadge.scss
+++ b/packages/badge/src/VBadge.scss
@@ -120,6 +120,11 @@
     --badge-color: theme('colors.white');
     --badge-border-color: theme('colors.error.500');
   }
+  &-dark {
+    --badge-bg-color: theme('colors.gray.800');
+    --badge-color: theme('colors.white');
+    --badge-border-color: theme('colors.gray.800');
+  }
 
   /* Outlined Colors */
   &--outlined.badge-default {
diff --git a/packages/badge/src/VBadge.stories.ts b/packages/badge/src/VBadge.stories.ts
index a62608498..22f6750e8 100644
--- a/packages/badge/src/VBadge.stories.ts
+++ b/packages/badge/src/VBadge.stories.ts
@@ -2,8 +2,9 @@ import VBadge from './VBadge.vue';
 import type {VBadgeProps} from './types';
 import {Story, Meta} from '@storybook/vue3';
 import {defaultRounded, defaultColors} from '@gits-id/theme/defaultTheme';
+import './VBadge.dark.scss';
 
-const colors = ['default', ...defaultColors];
+const colors = defaultColors;
 
 export default {
   title: 'Components/Badge',
@@ -192,3 +193,30 @@ CustomClass.parameters = {
     },
   },
 };
+
+export const DarkMode = () => ({
+  components: {VBadge},
+  setup() {
+    return {
+      colors,
+      variants: ['default', 'outlined'],
+    };
+  },
+  template: `
+<div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+  <div v-for="variant in variants" :key="variant" class="mb-5">  
+    <p>{{ variant }}</p>
+    <div class="space-x-2 space-y-2">
+      <VBadge
+        v-for="color in colors"
+        :color="color"
+        :key="color"
+        v-bind:[variant]="true"
+      >
+        {{ color }}
+      </VBadge>
+    </div>
+  </div>
+</div>
+  `,
+});
diff --git a/packages/badge/src/VBadge.vue b/packages/badge/src/VBadge.vue
index 1017ffac5..23cd7dc8e 100644
--- a/packages/badge/src/VBadge.vue
+++ b/packages/badge/src/VBadge.vue
@@ -93,7 +93,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <span class="badge" :class="classes">
+  <span :class="classes">
     <slot />
     <slot name="dismissable" :dismiss="onDismiss">
       <button
diff --git a/packages/badge/src/index.ts b/packages/badge/src/index.ts
index a27366f8b..55f599f6a 100644
--- a/packages/badge/src/index.ts
+++ b/packages/badge/src/index.ts
@@ -1,4 +1,5 @@
 import VBadge from './VBadge.vue';
+import './VBadge.dark.scss';
 
 export * from './types';
 export {VBadge};
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.dark.scss b/packages/breadcrumbs/src/VBreadcrumbs.dark.scss
new file mode 100644
index 000000000..3c06ec2f5
--- /dev/null
+++ b/packages/breadcrumbs/src/VBreadcrumbs.dark.scss
@@ -0,0 +1,12 @@
+.dark {
+  .breadcrumbs {
+    // item
+    --breadcrumbs-item-color: theme('colors.neutral.200');
+
+    // item disabled
+    --breadcrumbs-item-disabled-color: theme('colors.neutral.500');
+
+    // divider
+    --breadcrumbs-divider-color: theme('colors.neutral.500');
+  }
+}
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.scss b/packages/breadcrumbs/src/VBreadcrumbs.scss
index 07f226d27..9df2540b0 100644
--- a/packages/breadcrumbs/src/VBreadcrumbs.scss
+++ b/packages/breadcrumbs/src/VBreadcrumbs.scss
@@ -1,13 +1,14 @@
 :root {
   --breadcrumbs-gap: theme('spacing.3');
   --breadcrumbs-margin-bottom: theme('spacing.3');
-  --breadcrumbs-font-weight: theme('fontWeight.medium');
+  --breadcrumbs-font-weight: theme('fontWeight.normal');
+  --breadcrumbs-font-size: theme('fontSize.base');
 
   // item
   --breadcrumbs-item-color: theme('colors.gray.800');
 
   // item hover
-  --breadcrumbs-item-hover-color: theme('colors.primary.700');
+  --breadcrumbs-item-hover-color: theme('colors.primary.500');
 
   // item active
   --breadcrumbs-item-active-color: theme('colors.primary.500');
@@ -16,9 +17,9 @@
   --breadcrumbs-item-disabled-color: theme('colors.gray.500');
 
   // divider
-  --breadcrumbs-divider-font-size: theme('fontSize.sm');
+  --breadcrumbs-divider-font-size: theme('fontSize.xs');
   --breadcrumbs-divider-font-weight: theme('fontWeight.medium');
-  --breadcrumbs-divider-color: theme('colors.gray.400');
+  --breadcrumbs-divider-color: theme('colors.gray.500');
 }
 
 .breadcrumbs {
@@ -31,17 +32,20 @@
   &-item {
     color: var(--breadcrumbs-item-color);
     font-weight: var(--breadcrumbs-font-weight);
+    font-size: var(--breadcrumbs-font-size);
+    
+    @apply transition duration-300;
 
-    &:hover {
-      color: var(--breadcrumbs-item-hover-color);
+    &:hover:not(&--disabled) {
+      --breadcrumbs-item-color: var(--breadcrumbs-item-hover-color);
     }
 
     &--active {
-      color: var(--breadcrumbs-item-active-color);
+      --breadcrumbs-item-color: var(--breadcrumbs-item-active-color);
     }
 
     &--disabled {
-      color: var(--breadcrumbs-item-disabled-color);
+      --breadcrumbs-item-color: var(--breadcrumbs-item-disabled-color);
     }
   }
 
@@ -49,5 +53,9 @@
     font-size: var(--breadcrumbs-divider-font-size);
     font-weight: var(--breadcrumbs-divider-font-weight);
     color: var(--breadcrumbs-divider-color);
+
+    &-icon {
+      color: var(--breadcrumbs-divider-color);
+    }
   }
 }
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.stories.ts b/packages/breadcrumbs/src/VBreadcrumbs.stories.ts
index 22089d5b6..d695ed5db 100644
--- a/packages/breadcrumbs/src/VBreadcrumbs.stories.ts
+++ b/packages/breadcrumbs/src/VBreadcrumbs.stories.ts
@@ -6,11 +6,27 @@ import type {VBreadcrumbItem} from './types';
 import {ref} from 'vue';
 import VBreadcrumbsDivider from './VBreadcrumbsDivider.vue';
 import VBreadcrumbsItem from './VBreadcrumbsItem.vue';
+import './VBreadcrumbs.dark.scss';
 
-const items = [...Array(5)].map((v, k) => ({
-  title: `Link ${k + 1}`,
-  to: '/',
-}));
+const items = [
+  {
+    title: 'Home',
+    to: '/',
+  },
+  {
+    title: 'Account',
+    to: '/account',
+  },
+  {
+    title: 'Profile',
+    to: '/account/profile',
+  },
+  {
+    title: 'Settings',
+    to: '/account/profile/settings',
+    disabled: true,
+  },
+];
 
 export default {
   title: 'Components/Breadcrumbs',
@@ -62,7 +78,7 @@ export const CustomDividerSlots: Story = (args) => ({
   template: `<div class="container mx-auto">
   <v-breadcrumbs v-bind="args">
     <template #divider>
-      <Icon name="ri:arrow-right-s-line" class="w-5 h-5 text-gray-500" />
+      <Icon name="ri:arrow-right-s-line" size="sm" class="breadcrumbs-divider-icon" />
     </template>
   </v-breadcrumbs>
 </div>`,
@@ -172,3 +188,17 @@ const items = ref<VBreadcrumbItem[]>([
     },
   },
 };
+
+export const DarkMode = () => ({
+  components: {VBreadcrumbs},
+  setup() {
+    return {
+      items,
+    };
+  },
+  template: `
+<div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+  <VBreadcrumbs :items="items" />
+</div>
+  `,
+});
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.vue b/packages/breadcrumbs/src/VBreadcrumbs.vue
index 317b0c6f4..7affb379e 100644
--- a/packages/breadcrumbs/src/VBreadcrumbs.vue
+++ b/packages/breadcrumbs/src/VBreadcrumbs.vue
@@ -34,8 +34,8 @@ defineProps({
       <template v-for="(item, index) in items" :key="index">
         <slot :name="`item.${index}`">
           <VBreadcrumbsItem
+            v-bind="item"
             :to="item.to"
-            :title="item.title"
             :active-class="activeColor"
             :tag="tag"
           />
diff --git a/packages/breadcrumbs/src/VBreadcrumbsItem.vue b/packages/breadcrumbs/src/VBreadcrumbsItem.vue
index c5dddd4b0..814264f0e 100644
--- a/packages/breadcrumbs/src/VBreadcrumbsItem.vue
+++ b/packages/breadcrumbs/src/VBreadcrumbsItem.vue
@@ -23,6 +23,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  active: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const RouterLink = resolveComponent('RouterLink');
@@ -32,8 +36,11 @@ const RouterLink = resolveComponent('RouterLink');
   <component
     :is="to ? RouterLink : tag"
     :to="to"
-    class="breadbrumbs-item"
-    :class="{'breadbrumbs-item--disabled': disabled}"
+    class="breadcrumbs-item"
+    :class="{
+      'breadcrumbs-item--disabled': disabled,
+      [activeClass]: active,
+    }"
     :exact-active-class="activeClass"
   >
     <slot>
diff --git a/packages/breadcrumbs/src/index.ts b/packages/breadcrumbs/src/index.ts
index 346cec4df..866c7fd67 100644
--- a/packages/breadcrumbs/src/index.ts
+++ b/packages/breadcrumbs/src/index.ts
@@ -1,4 +1,5 @@
 import VBreadcrumbs from './VBreadcrumbs.vue';
+import './VBreadcrumbs.dark.scss';
 
 export * from './types';
 export {VBreadcrumbs};
diff --git a/packages/breadcrumbs/src/types.ts b/packages/breadcrumbs/src/types.ts
index e1b061914..a6d913ab0 100644
--- a/packages/breadcrumbs/src/types.ts
+++ b/packages/breadcrumbs/src/types.ts
@@ -1,6 +1,7 @@
 import type {RouteLocationRaw} from 'vue-router';
 
 export type VBreadcrumbItem = {
-  to?: RouteLocationRaw;
   title: string;
+  to?: RouteLocationRaw;
+  disabled?: boolean;
 };
diff --git a/packages/button/src/VBtn.dark.scss b/packages/button/src/VBtn.dark.scss
new file mode 100644
index 000000000..fc78702e0
--- /dev/null
+++ b/packages/button/src/VBtn.dark.scss
@@ -0,0 +1,49 @@
+.dark {
+  // button
+  .btn {
+    // colors
+    &-default:not(&--outlined):not(&--text):not(:disabled) {
+      --btn-bg-color: theme('colors.neutral.800');
+      --btn-border-color: theme('colors.neutral.800');
+      --btn-text-color: theme('colors.neutral.200');
+
+      &:hover {
+        --btn-bg-color: theme('colors.neutral.700');
+      }
+    }
+
+    // outlined
+    &--outlined {
+      &:disabled {
+        --btn-text-color: theme('colors.neutral.500');
+        --btn-border-color: theme('colors.neutral.200');
+      }
+
+      &.btn-default:not(:disabled) {
+        --btn-text-color: theme('colors.neutral.800');
+        --btn-border-color: theme('colors.neutral.800');
+
+        &:hover:not(:disabled) {
+          --btn-bg-color: theme('colors.neutral.800');
+          --btn-border-color: theme('colors.neutral.800');
+        }
+      }
+    }
+
+    // text
+    &--text {
+      --btn-text-color: theme('colors.neutral.800');
+
+      &:disabled {
+        --btn-text-color: theme('colors.neutral.500');
+      }
+
+      &.btn-default:not(:disabled) {
+        --btn-text-color: theme('colors.neutral.800');
+        &:hover:not(:disabled) {
+          --btn-text-color: theme('colors.neutral.700');
+        }
+      }
+    }
+  }
+}
diff --git a/packages/button/src/VBtn.stories.ts b/packages/button/src/VBtn.stories.ts
index 1cd9c8463..b1007dbce 100644
--- a/packages/button/src/VBtn.stories.ts
+++ b/packages/button/src/VBtn.stories.ts
@@ -5,6 +5,7 @@ import VIcon from '@gits-id/icon';
 import {defaultColors} from '@gits-id/theme/defaultTheme';
 import VBtnGroup from './VBtnGroup.vue';
 import VBtnToolbar from './VBtnToolbar.vue';
+import './VBtn.dark.scss';
 
 const colors = defaultColors;
 const defaultSizes = ['sm', 'md', 'lg'];
@@ -390,3 +391,72 @@ export const ButtonGroup: Story<VBtnProps> = () => ({
     </VBtnToolbar>
   `,
 });
+
+export const DarkMode: Story<VBtnProps> = () => ({
+  components: {VBtnGroup, VBtnToolbar, VBtn},
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <h3 class="font-semibold">Default</h3>
+    <VBtnGroup class="w-full mt-2">
+      <VBtn>Button</VBtn>
+      <VBtn>Button</VBtn>
+      <VBtn>Button</VBtn>
+    </VBtnGroup>
+    <h3 class="font-semibold mt-5">Sizes:</h3>
+    <VBtnGroup class="w-full mt-2">
+      <VBtn size="sm">sm</VBtn>
+      <VBtn size="sm">sm</VBtn>
+      <VBtn size="sm">sm</VBtn>
+    </VBtnGroup>
+    <VBtnGroup class="w-full mt-2">
+      <VBtn size="lg">lg</VBtn>
+      <VBtn size="lg">lg</VBtn>
+      <VBtn size="lg">lg</VBtn>
+    </VBtnGroup>
+    <VBtnGroup class="w-full mt-5">
+      <VBtn color="primary">Button</VBtn>
+      <VBtn color="primary">Button</VBtn>
+      <VBtn color="primary">Button</VBtn>
+    </VBtnGroup>
+    <VBtnGroup class="w-full mt-5">
+      <VBtn color="primary">Button</VBtn>
+      <VBtn color="secondary">Button</VBtn>
+      <VBtn color="error">Button</VBtn>
+    </VBtnGroup>
+    <VBtnGroup class="w-full mt-5">
+      <VBtn outlined color="primary">Button</VBtn>
+      <VBtn outlined color="secondary">Button</VBtn>
+      <VBtn outlined color="error">Button</VBtn>
+    </VBtnGroup>
+    <VBtnGroup class="w-full mt-5">
+      <VBtn text color="primary">Button</VBtn>
+      <VBtn text color="secondary">Button</VBtn>
+      <VBtn text color="error">Button</VBtn>
+    </VBtnGroup>
+    <VBtnGroup class="mt-5">
+      <VBtn prefix-icon="ri:search-2-line"></VBtn>
+      <VBtn suffix-icon="ri:add-line"></VBtn>
+      <VBtn prefix-icon="ri:edit-line"></VBtn>
+    </VBtnGroup>
+
+    <VBtnToolbar class="mt-5">
+      <VBtnGroup>
+        <VBtn prefix-icon="ri:bold"></VBtn>
+        <VBtn suffix-icon="ri:italic"></VBtn>
+        <VBtn prefix-icon="ri:underline"></VBtn>
+      </VBtnGroup>
+      <VBtnGroup>
+        <VBtn suffix-icon="ri:list-ordered"></VBtn>
+        <VBtn prefix-icon="ri:list-check"></VBtn>
+        <VBtn prefix-icon="ri:align-left"></VBtn>
+      </VBtnGroup>
+      <VBtnGroup>
+        <VBtn prefix-icon="ri:link"></VBtn>
+        <VBtn suffix-icon="ri:image-line"></VBtn>
+        <VBtn prefix-icon="ri:video-line"></VBtn>
+      </VBtnGroup>
+      <VBtn prefix-icon="ri:format-clear"></VBtn>
+    </VBtnToolbar>
+</div>
+  `,
+});
diff --git a/packages/button/src/index.ts b/packages/button/src/index.ts
index 40337a0bf..91a6eb95b 100644
--- a/packages/button/src/index.ts
+++ b/packages/button/src/index.ts
@@ -1,3 +1,5 @@
+import './VBtn.dark.scss';
+
 export {default as VBtn} from './VBtn.vue';
 export {default as VBtnGroup} from './VBtnGroup.vue';
 export {default as VBtnToolbar} from './VBtnToolbar.vue';
diff --git a/packages/card/src/VCard.dark.scss b/packages/card/src/VCard.dark.scss
new file mode 100644
index 000000000..2b83d8b05
--- /dev/null
+++ b/packages/card/src/VCard.dark.scss
@@ -0,0 +1,14 @@
+.dark {
+  .card {
+    &-default {
+      --card-bg-color: theme('colors.neutral.800');
+      --card-color: theme('colors.neutral.200');
+      --card-border-color: theme('borderColor.neutral.600');
+    }
+
+    &-dark {
+      --card-bg-color: theme('colors.gray.800');
+      --card-color: theme('colors.white');
+    }
+  }
+}
diff --git a/packages/card/src/VCard.scss b/packages/card/src/VCard.scss
index b1ba3e74f..8d3de771d 100644
--- a/packages/card/src/VCard.scss
+++ b/packages/card/src/VCard.scss
@@ -3,7 +3,6 @@
   --card-color: theme('colors.gray.800');
   --card-border-style: solid;
   --card-border-width: theme('borderWidth.DEFAULT');
-  --card-border-color: theme('borderColor.DEFAULT');
   --card-border-radius: theme('borderRadius.DEFAULT');
   --card-padding-x: theme('padding.4');
   --card-padding-y: theme('padding.3');
diff --git a/packages/card/src/VCard.stories.ts b/packages/card/src/VCard.stories.ts
index 04e0c7896..af75a5afa 100644
--- a/packages/card/src/VCard.stories.ts
+++ b/packages/card/src/VCard.stories.ts
@@ -2,6 +2,7 @@ import {Meta, Story} from '@storybook/vue3';
 import VCard from './VCard.vue';
 import VBtn from '@gits-id/button';
 import {defaultColors} from '@gits-id/theme/defaultTheme';
+import './VCard.dark.scss';
 
 export default {
   title: 'Components/Card',
@@ -112,7 +113,7 @@ export const CustomSlots: Story = (args) => ({
     <v-btn>Cancel</v-btn>
   </template>
   
-  <p class="text-gray-600">lorem ipsum body</p>
+  <p>lorem ipsum body</p>
 </v-card>
 `,
 });
@@ -186,3 +187,17 @@ export const Shadow: Story<{}> = (args) => ({
 </v-card>
 `,
 });
+
+export const DarkMode: Story<{}> = () => ({
+  components: {VCard},
+  setup() {
+    return {defaultColors};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
+  <VCard v-for="color in defaultColors" :key="color" :color="color">
+    {{ color }}
+  </VCard>
+</main>
+`,
+});
diff --git a/packages/card/src/index.ts b/packages/card/src/index.ts
index ce6d6a3f3..faa82a546 100644
--- a/packages/card/src/index.ts
+++ b/packages/card/src/index.ts
@@ -1,4 +1,5 @@
 import VCard from './VCard.vue';
+import './VCard.dark.scss';
 
 export {VCard};
 export default VCard;
diff --git a/packages/collapsible/src/VCollapsible.stories.ts b/packages/collapsible/src/VCollapsible.stories.ts
index 6a77d61b1..f3b7f456c 100644
--- a/packages/collapsible/src/VCollapsible.stories.ts
+++ b/packages/collapsible/src/VCollapsible.stories.ts
@@ -1,11 +1,11 @@
 import {Story} from '@storybook/vue3';
 import {ref} from 'vue';
-import MyCollapsible from './VCollapsible.vue';
-import MyCollapsibleGroup from './VCollapsibleGroup.vue';
+import VCollapsible from './VCollapsible.vue';
+import VCollapsibleGroup from './VCollapsibleGroup.vue';
 
 export default {
   title: 'Components/Collapsible',
-  component: MyCollapsible,
+  component: VCollapsible,
   args: {
     modelValue: false,
     hideIcon: false,
@@ -20,15 +20,15 @@ export default {
 };
 
 const Template: Story<{}> = (args) => ({
-  components: {MyCollapsible},
+  components: {VCollapsible},
   setup() {
     const isOpen = ref(false);
 
     return {args, isOpen};
   },
-  template: `<MyCollapsible v-model="isOpen" v-bind='args'>
+  template: `<VCollapsible v-model="isOpen" v-bind='args'>
     Anim eiusmod ea nostrud do incididunt consequat duis adipisicing reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui. Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est pariatur qui amet cupidatat magna est adipisicing quis ea ea.
-  </MyCollapsible>
+  </VCollapsible>
   `,
 });
 
@@ -92,7 +92,7 @@ CustomClasses.parameters = {
 };
 
 export const Accordion: Story = (args) => ({
-  components: {MyCollapsibleGroup, MyCollapsible},
+  components: {VCollapsibleGroup, VCollapsible},
   setup() {
     const items = Array.from({length: 5}, (v, k) => ({
       title: `Item ${k + 1}`,
@@ -101,13 +101,13 @@ export const Accordion: Story = (args) => ({
     return {args, items};
   },
   template: `
-    <MyCollapsibleGroup accordion :items="items">
+    <VCollapsibleGroup accordion :items="items">
       <!--
-      <MyCollapsible v-for="i in 5" :key="i" title="Item">
+      <VCollapsible v-for="i in 5" :key="i" title="Item">
       Anim eiusmod ea nostrud do incididunt consequat duis adipisicing reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui. Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est pariatur qui amet cupidatat magna est adipisicing quis ea ea.
-      </MyCollapsible>
+      </VCollapsible>
       -->
-    </MyCollapsibleGroup>
+    </VCollapsibleGroup>
   `,
 });
 Accordion.parameters = {
@@ -117,3 +117,22 @@ Accordion.parameters = {
     },
   },
 };
+
+export const DarkMode: Story<{}> = (args) => ({
+  components: {VCollapsible},
+  setup() {
+    const isOpen = ref(false);
+
+    return {
+      isOpen,
+      args,
+    };
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
+  <VCollapsible v-model="isOpen" v-bind='args'>
+    Anim eiusmod ea nostrud do incididunt consequat duis adipisicing reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui. Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est pariatur qui amet cupidatat magna est adipisicing quis ea ea.
+  </VCollapsible>
+</main>
+`,
+});
diff --git a/packages/dropdown/src/Dropdown.dark.scss b/packages/dropdown/src/Dropdown.dark.scss
new file mode 100644
index 000000000..d0c4a858c
--- /dev/null
+++ b/packages/dropdown/src/Dropdown.dark.scss
@@ -0,0 +1,26 @@
+.dark {
+  .dropdown {
+
+    --dropdown-bg-color: theme('colors.neutral.800');
+    --dropdown-button-icon-color: theme('colors.neutral.400');
+    --dropdown-item-color: theme('colors.neutral.200');
+    --dropdown-item-icon-color: theme('colors.neutral.400');
+
+    // item hover
+    --dropdown-item-hover-color: theme('colors.neutral.200');
+
+    &-panel {
+      background-color: theme('colors.neutral.800');
+    }
+
+    &-divider {
+      border-bottom-color: theme('colors.neutral.700');
+    }
+
+    &-item {
+      &--active {
+        background-color: theme('colors.neutral.700');
+      }
+    }
+  }
+}
diff --git a/packages/dropdown/src/Dropdown.scss b/packages/dropdown/src/Dropdown.scss
index 098e2771b..09ef48809 100644
--- a/packages/dropdown/src/Dropdown.scss
+++ b/packages/dropdown/src/Dropdown.scss
@@ -3,6 +3,9 @@
   --dropdown-button-icon-color: theme('colors.gray.500');
   --dropdown-item-color: theme('colors.gray.800');
   --dropdown-item-icon-color: theme('colors.gray.600');
+
+  // item hover
+  --dropdown-item-hover-color: theme('colors.gray.200');
 }
 
 .dropdown {
@@ -43,10 +46,10 @@
     align-items: center;
     width: 100%;
     padding: theme('spacing.2');
-    color: var(--dropdown-item-color, inherit);
+    color: var(--dropdown-item-color);
 
     &--active {
-      background-color: theme('colors.gray.200');
+      --dropdown-item-color: var(--dropdown-item-hover-color);
     }
 
     &-icon {
diff --git a/packages/dropdown/src/Dropdown.stories.ts b/packages/dropdown/src/Dropdown.stories.ts
index 3db79d1cb..f3410ebde 100644
--- a/packages/dropdown/src/Dropdown.stories.ts
+++ b/packages/dropdown/src/Dropdown.stories.ts
@@ -4,6 +4,7 @@ import DropdownItem from './DropdownItem.vue';
 import DropdownButton from './DropdownButton.vue';
 import type {DropdownItemProps} from './types';
 import Button from '@gits-id/button';
+import './Dropdown.dark.scss';
 
 const genItems = (length = 5): DropdownItemProps[] =>
   Array.from({length}, (_, v) => ({
@@ -110,3 +111,15 @@ export const CustomActivator: Story = (args, {argTypes}) => ({
     </div>
   `,
 });
+
+export const DarkMode: Story<{}> = (args) => ({
+  components: {Dropdown},
+  setup() {
+    return {args};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
+  <Dropdown v-bind="args"/>
+</main>
+`,
+});
diff --git a/packages/dropdown/src/index.ts b/packages/dropdown/src/index.ts
index de356bfa4..8d2de2153 100644
--- a/packages/dropdown/src/index.ts
+++ b/packages/dropdown/src/index.ts
@@ -1,3 +1,5 @@
+import './Dropdown.dark.scss';
+
 export {default} from './Dropdown.vue';
 export {default as Dropdown} from './Dropdown.vue';
 export {default as DropdownItem} from './DropdownItem.vue';
diff --git a/packages/forms/src/checkbox/VCheckbox.dark.scss b/packages/forms/src/checkbox/VCheckbox.dark.scss
new file mode 100644
index 000000000..a016aab48
--- /dev/null
+++ b/packages/forms/src/checkbox/VCheckbox.dark.scss
@@ -0,0 +1,11 @@
+.dark {
+  .v-checkbox {
+    --v-checkbox-bg-color: theme('colors.neutral.700');
+    --v-checkbox-border-color: theme('colors.neutral.700');
+    --v-checkbox-label-color: theme('colors.neutral.200');
+
+    // disabled
+    --v-checkbox-disabled-bg-color: theme('colors.neutral.400');
+    --v-checkbox-disabled-border-color: theme('colors.neutral.400');
+  }
+}
diff --git a/packages/forms/src/checkbox/VCheckbox.scss b/packages/forms/src/checkbox/VCheckbox.scss
index 0e14edfac..243a33332 100644
--- a/packages/forms/src/checkbox/VCheckbox.scss
+++ b/packages/forms/src/checkbox/VCheckbox.scss
@@ -5,6 +5,10 @@
   --v-checkbox-border-color: theme('colors.gray.500');
   --v-checkbox-border-radius: theme('borderRadius.DEFAULT');
 
+  // disabled
+  --v-checkbox-disabled-bg-color: theme('colors.gray.200');
+  --v-checkbox-disabled-border-color: theme('colors.gray.200');
+
   /* label */
   --v-checkbox-label-font-size: var(
     --input-label-font-size,
@@ -13,6 +17,7 @@
   --v-checkbox-label-font-weight: theme('fontWeight.normal');
   --v-checkbox-label-display: var(--v-input-label-display, block);
   --v-checkbox-label-margin-top: 1px;
+  --v-checkbox-label-color: theme('colors.gray.800');
 }
 
 .v-checkbox {
@@ -24,8 +29,12 @@
     border: var(--v-checkbox-border-width) var(--v-checkbox-border-style)
       var(--v-checkbox-border-color);
 
-    @apply transition duration-300
-    disabled:bg-gray-100 disabled:border-gray-200 disabled:cursor-not-allowed;
+    @apply transition duration-300 disabled:cursor-not-allowed;
+
+    &:disabled {
+      --v-checkbox-bg-color: var(--v-checkbox-disabled-bg-color);
+      --v-checkbox-border-color: var(--v-checkbox-disabled-border-color);
+    }
   }
 
   &-label {
@@ -33,6 +42,7 @@
     font-weight: var(--v-checkbox-label-font-weight);
     display: var(--v-checkbox-label-display);
     margin-top: var(--v-checkbox-label-margin-top);
+    color: var(--v-checkbox-label-color);
 
     @apply select-none;
   }
diff --git a/packages/forms/src/checkbox/VCheckbox.stories.ts b/packages/forms/src/checkbox/VCheckbox.stories.ts
index 8cc5bd78a..274c2cb54 100644
--- a/packages/forms/src/checkbox/VCheckbox.stories.ts
+++ b/packages/forms/src/checkbox/VCheckbox.stories.ts
@@ -6,6 +6,7 @@ import {Meta, Story} from '@storybook/vue3';
 import {useForm} from 'vee-validate';
 import {object, boolean, array} from 'yup';
 import VBtn from '@gits-id/button';
+import './VCheckbox.dark.scss';
 
 export default {
   title: 'Forms/Checkbox',
@@ -29,7 +30,7 @@ export default {
 const Template: Story = (args) => ({
   components: {VCheckbox},
   setup() {
-    const value = ref(false)
+    const value = ref(false);
     return {args, value};
   },
   template: `
@@ -70,8 +71,8 @@ export const Multiple: Story<{}> = () => ({
     const {handleSubmit, resetForm, values, errors} = useForm({
       validationSchema: schema,
       initialValues: {
-        genre: [null]
-      }
+        genre: [null],
+      },
     });
 
     const onSubmit = handleSubmit((values) => {
@@ -225,17 +226,18 @@ export const ValidationMode: Story<{}> = () => ({
   `,
 });
 
-
 export const TestInputState: Story<{}> = (args) => ({
   components: {VBtn, VCheckbox},
   setup() {
     const modelValue = ref('');
     const modelValue2 = ref('');
-    const {handleSubmit, resetForm, values} = args.useForm ? useForm({}) : {
-      handleSubmit: (cb: any) => null,
-      resetForm: () => null,
-      values: {},
-    };
+    const {handleSubmit, resetForm, values} = args.useForm
+      ? useForm({})
+      : {
+          handleSubmit: (cb: any) => null,
+          resetForm: () => null,
+          values: {},
+        };
 
     const onSubmit = handleSubmit((values: any) => {
       alert(JSON.stringify(values));
@@ -245,7 +247,15 @@ export const TestInputState: Story<{}> = (args) => ({
       alert('onChange');
     };
 
-    return {args, onSubmit, resetForm, values, modelValue, modelValue2, onChange};
+    return {
+      args,
+      onSubmit,
+      resetForm,
+      values,
+      modelValue,
+      modelValue2,
+      onChange,
+    };
   },
   template: `
     <form @submit="onSubmit" class="border-none">
@@ -302,4 +312,16 @@ export const TestInputState: Story<{}> = (args) => ({
 });
 TestInputState.args = {
   useForm: false,
-};
\ No newline at end of file
+};
+
+export const DarkMode: Story = (args) => ({
+  components: {VCheckbox},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VCheckbox v-bind='args' />
+  </div>
+  `,
+});
diff --git a/packages/forms/src/file-input/VFileUpload.stories.ts b/packages/forms/src/file-input/VFileUpload.stories.ts
index 96bd05f37..bb0ffb73f 100644
--- a/packages/forms/src/file-input/VFileUpload.stories.ts
+++ b/packages/forms/src/file-input/VFileUpload.stories.ts
@@ -4,6 +4,7 @@ import {mixed, object} from 'yup';
 import {VInput} from '..';
 import VBtn from '@gits-id/button';
 import VFileUpload from './VFileUpload.vue';
+import '@gits-id/forms/src/forms.dark.scss';
 
 export default {
   title: 'Forms/FileUpload',
@@ -373,3 +374,15 @@ export const SlotFilename: Story<{}> = () => ({
     </form>
 `,
 });
+
+export const DarkMode: Story = (args) => ({
+  components: {VFileUpload},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VFileUpload v-bind='args' />
+  </div>
+  `,
+});
diff --git a/packages/forms/src/form-group/VFormGroup.stories.ts b/packages/forms/src/form-group/VFormGroup.stories.ts
index 07c851c86..9a3512eca 100644
--- a/packages/forms/src/form-group/VFormGroup.stories.ts
+++ b/packages/forms/src/form-group/VFormGroup.stories.ts
@@ -27,3 +27,16 @@ Default.parameters = {
     },
   },
 };
+
+// dark mode
+export const DarkMode: Story<{}> = (args) => ({
+  components: {VFormGroup},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VFormGroup v-bind='args'>Content</VFormGroup>
+  </div>
+  `,
+});
diff --git a/packages/forms/src/form-group/VFormGroup.vue b/packages/forms/src/form-group/VFormGroup.vue
index 1bf8b8040..4911155b9 100644
--- a/packages/forms/src/form-group/VFormGroup.vue
+++ b/packages/forms/src/form-group/VFormGroup.vue
@@ -12,7 +12,7 @@ const props = defineProps({
   },
   labelClass: {
     type: String,
-    default: 'mb-2 font-medium text-sm',
+    default: '',
   },
   inline: {
     type: Boolean,
@@ -34,10 +34,14 @@ defineEmits(['update:label']);
     class="mb-5 flex w-full"
     :class="[inline ? 'flex-col sm:flex-row' : 'flex-col']"
   >
-    <label :for="labelFor" :class="[labelClass, inline ? inlineClass : '']">
+    <label
+      :for="labelFor"
+      class="mb-2 font-medium text-sm text-gray-800 dark:text-neutral-200"
+      :class="[labelClass, inline ? inlineClass : '']"
+    >
       {{ label }}
     </label>
-    <div class="flex-grow">
+    <div class="flex-grow text-gray-700 dark:text-neutral-400">
       <slot />
     </div>
   </div>
diff --git a/packages/forms/src/form-select/VFormSelect.stories.ts b/packages/forms/src/form-select/VFormSelect.stories.ts
index ab907fb0e..c73e4399d 100644
--- a/packages/forms/src/form-select/VFormSelect.stories.ts
+++ b/packages/forms/src/form-select/VFormSelect.stories.ts
@@ -6,6 +6,7 @@ import {useForm} from 'vee-validate';
 import {object, string} from 'yup';
 import {ref} from 'vue';
 import VBtn from '@gits-id/button';
+import '../forms.dark.scss';
 
 const items = [...Array(5)].map((item, index) => ({
   value: index,
@@ -325,12 +326,14 @@ export const TestInputState: Story<{}> = (args) => ({
   setup() {
     const modelValue = ref();
     const modelValue2 = ref();
-    const {handleSubmit, resetForm, values} = args.useForm ? useForm({
-      initialValues: {
-        choice: '',
-        choice2: '',
-      }
-    }) : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}};
+    const {handleSubmit, resetForm, values} = args.useForm
+      ? useForm({
+          initialValues: {
+            choice: '',
+            choice2: '',
+          },
+        })
+      : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}};
 
     const items = ref([
       {
@@ -356,10 +359,19 @@ export const TestInputState: Story<{}> = (args) => ({
     });
 
     const onChange = (val: any) => {
-      alert("onChange: " + val);
+      alert('onChange: ' + val);
     };
 
-    return {args, onSubmit, resetForm, values, modelValue, modelValue2, items, onChange};
+    return {
+      args,
+      onSubmit,
+      resetForm,
+      values,
+      modelValue,
+      modelValue2,
+      items,
+      onChange,
+    };
   },
   template: `
     <form @submit='onSubmit' class='border-none'>
@@ -420,4 +432,16 @@ export const TestInputState: Story<{}> = (args) => ({
 });
 TestInputState.args = {
   useForm: false,
-};
\ No newline at end of file
+};
+
+export const DarkMode: Story = (args) => ({
+  components: {VFormSelect},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VFormSelect v-bind='args'/>
+  </div>
+  `,
+});
diff --git a/packages/forms/src/forms.dark.scss b/packages/forms/src/forms.dark.scss
new file mode 100644
index 000000000..afff50c7f
--- /dev/null
+++ b/packages/forms/src/forms.dark.scss
@@ -0,0 +1,20 @@
+.dark {
+  .v-input,
+  .v-multi-select,
+  .v-select,
+  .v-select-button,
+  .v-textarea,
+  .v-data-table-pagination-items-per-page {
+    /* input control */
+    --v-input-border-color: theme('colors.neutral.700');
+    --v-input-placeholder-color: theme('colors.neutral.500');
+    --v-input-bg-color: theme('colors.neutral.800');
+    --v-input-color: theme('colors.neutral.200');
+
+    /* label */
+    --v-input-label-color: theme('colors.neutral.200');
+
+    /* icon */
+    --v-input-icon-color: theme('colors.neutral.500');
+  }
+}
diff --git a/packages/forms/src/forms.scss b/packages/forms/src/forms.scss
index 192ee0794..7006b9058 100644
--- a/packages/forms/src/forms.scss
+++ b/packages/forms/src/forms.scss
@@ -8,6 +8,7 @@
   --v-input-padding-y: theme('padding.2');
   --v-input-font-size: theme('fontSize.base');
   --v-input-bg-color: theme('colors.white');
+  --v-input-color: theme('colors.gray.800');
 
   /* label */
   --v-input-label-font-size: theme('fontSize.sm');
@@ -27,6 +28,7 @@
 }
 
 .v-input-label {
+  color: var(--v-input-label-color);
   font-size: var(--v-input-label-font-size);
   font-weight: var(--v-input-label-font-weight);
   display: var(--v-input-label-display);
@@ -78,26 +80,29 @@
   border-radius: var(--v-input-border-radius);
   font-size: var(--v-input-font-size);
   background-color: transparent;
+  color: var(--v-input-color);
 
   @apply focus:ring-0 border-none focus:border-none focus:outline-none;
-}
-.v-input-control:not(textarea):not(select) {
-  height: var(--v-input-height);
+  
+  &:not(textarea):not(select) {
+    height: var(--v-input-height);
+  }
+
+  &::placeholder {
+    color: var(--v-input-placeholder-color);
+  }
 }
 
 .v-input:has(.v-input-prepend:not(:empty))
   .v-input-control:not(.v-input-control--has-prepend-class) {
   @apply pl-0;
 }
+
 .v-input:has(.v-input-append:not(:empty))
   .v-input-control:not(.v-input-control--has-append-class) {
   @apply pr-0;
 }
 
-.v-input-control::placeholder {
-  color: var(--v-input-placeholder-color);
-}
-
 /* colors */
 
 .v-input.v-input-default .v-input-wrapper,
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index 3df31e7fd..6f2f3a17a 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -1,4 +1,6 @@
 import './forms.scss';
+import './checkbox/VCheckbox.dark.scss';
+
 export {default as VTextarea} from './textarea/Textarea.vue';
 export {default as VCheckbox} from './checkbox/VCheckbox.vue';
 export {default as VFileUpload} from './file-input/VFileUpload.vue';
diff --git a/packages/forms/src/input/VInput.stories.ts b/packages/forms/src/input/VInput.stories.ts
index 1df8924a8..882eacb3f 100644
--- a/packages/forms/src/input/VInput.stories.ts
+++ b/packages/forms/src/input/VInput.stories.ts
@@ -11,6 +11,7 @@ import FieldArrayOfObject from './stories/FieldArrayOfObject.story.vue';
 import FieldArrayNestedComponent from './stories/FieldArrayNested.story.vue';
 import {ref} from 'vue';
 import FormsPlaygroundComponent from './stories/FormsPlayground.vue';
+import '../forms.dark.scss';
 
 const sizes = ['sm', 'md', 'lg'] as const;
 
@@ -718,3 +719,21 @@ TestInputState.args = {
   value: undefined,
   clearable: true,
 };
+
+// dark mode VInput story
+export const DarkMode: Story<VInputProps> = (args) => ({
+  components: {VInput},
+  setup() {
+    const modelValue = ref('');
+    return {args, modelValue};
+  },
+  template: `
+    <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-4"> 
+      <v-input
+        v-model="modelValue"
+        label="Label"
+        placeholder="Placeholder"
+      />
+    </div>
+  `,
+});
diff --git a/packages/forms/src/radio/VRadio.dark.scss b/packages/forms/src/radio/VRadio.dark.scss
new file mode 100644
index 000000000..d3c395b2a
--- /dev/null
+++ b/packages/forms/src/radio/VRadio.dark.scss
@@ -0,0 +1,9 @@
+.dark {
+  .v-radio {
+    --v-radio-bg-color: theme('colors.neutral.700');
+    --v-radio-border-color: theme('colors.gray.700');
+
+    // label
+    --v-radio-label-color: theme('colors.gray.200');
+  }
+}
diff --git a/packages/forms/src/radio/VRadio.scss b/packages/forms/src/radio/VRadio.scss
index b1b7b7b1c..a3a9d06e2 100644
--- a/packages/forms/src/radio/VRadio.scss
+++ b/packages/forms/src/radio/VRadio.scss
@@ -1,10 +1,31 @@
+:root {
+  --v-radio-bg-color: theme('colors.white');
+  --v-radio-border-color: theme('colors.gray.800');
+  --v-radio-border-style: solid;
+  --v-radio-border-width: 1px;
+
+  // label
+  --v-radio-label-color: theme('colors.gray.800');
+}
+
 .v-radio {
   &-group {
     @apply flex w-full items-center gap-2 select-none;
   }
+  
+  &-label {
+    color: var(--v-radio-label-color);
+  }
+
   &-input {
+    background-color: var(--v-radio-bg-color);
+    border-width: var(--v-radio-border-width);
+    border-color: var(--v-radio-border-color);
+    border-style: var(--v-radio-border-style);
+
     @apply transition duration-300;
   }
+
   &-error {
     @apply text-error-500 text-sm;
 
diff --git a/packages/forms/src/radio/VRadio.stories.ts b/packages/forms/src/radio/VRadio.stories.ts
index 511a738ee..8c2dde080 100644
--- a/packages/forms/src/radio/VRadio.stories.ts
+++ b/packages/forms/src/radio/VRadio.stories.ts
@@ -6,6 +6,7 @@ import {useForm} from 'vee-validate';
 import {object, string} from 'yup';
 import VBtn from '@gits-id/button';
 import {ref} from 'vue';
+import './VRadio.dark.scss';
 
 export default {
   title: 'Forms/Radio',
@@ -112,16 +113,18 @@ export const TestInputState: Story<{}> = (args) => ({
   setup() {
     const modelValue = ref();
     const modelValue2 = ref();
-    const {handleSubmit, resetForm, values} = args.useForm ? useForm({
-      initialValues: {
-        radio: false,
-        radio2: false
-      }
-    }) : {
-      handleSubmit: (cb: any) => null,
-      resetForm: () => null,
-      values: {},
-    };
+    const {handleSubmit, resetForm, values} = args.useForm
+      ? useForm({
+          initialValues: {
+            radio: false,
+            radio2: false,
+          },
+        })
+      : {
+          handleSubmit: (cb: any) => null,
+          resetForm: () => null,
+          values: {},
+        };
 
     const onSubmit = handleSubmit((values: any) => {
       alert(JSON.stringify(values));
@@ -131,7 +134,15 @@ export const TestInputState: Story<{}> = (args) => ({
       alert('onChange');
     };
 
-    return {args, onSubmit, resetForm, values, modelValue, modelValue2, onChange};
+    return {
+      args,
+      onSubmit,
+      resetForm,
+      values,
+      modelValue,
+      modelValue2,
+      onChange,
+    };
   },
   template: `
     <form @submit="onSubmit" class="border-none">
@@ -194,4 +205,25 @@ export const TestInputState: Story<{}> = (args) => ({
 });
 TestInputState.args = {
   useForm: false,
-};
\ No newline at end of file
+};
+
+// VRadio dark mode
+export const DarkMode: Story<{}> = () => ({
+  components: {VRadio},
+  setup() {
+    const items = ['fire', 'earth', 'wind', 'water'];
+    const modelValue = ref();
+    return {items, modelValue};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VRadio
+      v-for="item in items"
+      v-model="modelValue"
+      :key="item"
+      :label="item"
+      :value="item"
+    />
+  </div>
+  `,
+});
diff --git a/packages/forms/src/radio/VRadioGroup.stories.ts b/packages/forms/src/radio/VRadioGroup.stories.ts
index 239fbdd71..2d932fe11 100644
--- a/packages/forms/src/radio/VRadioGroup.stories.ts
+++ b/packages/forms/src/radio/VRadioGroup.stories.ts
@@ -100,8 +100,9 @@ export const Customization = Template.bind({});
 Customization.args = {
   label: 'Pick an option',
   labelClass: '!text-purple-500',
-  defaultClass: 'p-2 my-1 hover:bg-primary-50 border-grey-300 border rounded-lg cursor-pointer',
-  selectedClass: '!border-primary-300 !text-primary-500'
+  defaultClass:
+    'p-2 my-1 hover:bg-primary-50 border-grey-300 border rounded-lg cursor-pointer',
+  selectedClass: '!border-primary-300 !text-primary-500',
 };
 Customization.parameters = {
   docs: {
@@ -227,7 +228,6 @@ export const ValidationMode: Story<{}> = () => ({
   `,
 });
 
-
 export const TestInputState: Story<{}> = (args) => ({
   components: {VBtn, VRadioGroup},
   setup() {
@@ -235,16 +235,18 @@ export const TestInputState: Story<{}> = (args) => ({
 
     const modelValue = ref();
     const modelValue2 = ref();
-    const {handleSubmit, resetForm, values} = args.useForm ? useForm({
-      initialValues: {
-        radio: '',
-        radio2: ''
-      }
-    }) : {
-      handleSubmit: (cb: any) => null,
-      resetForm: () => null,
-      values: {},
-    };
+    const {handleSubmit, resetForm, values} = args.useForm
+      ? useForm({
+          initialValues: {
+            radio: '',
+            radio2: '',
+          },
+        })
+      : {
+          handleSubmit: (cb: any) => null,
+          resetForm: () => null,
+          values: {},
+        };
 
     const onSubmit = handleSubmit((values: any) => {
       alert(JSON.stringify(values));
@@ -254,7 +256,16 @@ export const TestInputState: Story<{}> = (args) => ({
       alert('onChange');
     };
 
-    return {args, onSubmit, resetForm, values, items, modelValue, modelValue2, onChange};
+    return {
+      args,
+      onSubmit,
+      resetForm,
+      values,
+      items,
+      modelValue,
+      modelValue2,
+      onChange,
+    };
   },
   template: `
     <form @submit="onSubmit" class="border-none">
@@ -322,3 +333,15 @@ export const TestInputState: Story<{}> = (args) => ({
 TestInputState.args = {
   useForm: false,
 };
+
+export const DarkMode: Story = (args) => ({
+  components: {VRadioGroup},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VRadioGroup v-bind='args'/>
+  </div>
+  `,
+});
diff --git a/packages/forms/src/radio/VRadioGroup.vue b/packages/forms/src/radio/VRadioGroup.vue
index 48cd9d05e..2aa5591c1 100644
--- a/packages/forms/src/radio/VRadioGroup.vue
+++ b/packages/forms/src/radio/VRadioGroup.vue
@@ -110,7 +110,6 @@ const emit = defineEmits([
 
 const groupRef = ref();
 
-
 const {errorMessage, uncontrolledValue, isEagerValidation, validate, meta} =
   useFormValue(props, emit);
 
@@ -181,7 +180,10 @@ onBeforeUnmount(() => {
       v-if="label"
       :for="name"
       class="font-medium mb-1 block"
-      :class="[error ? 'text-error-500' : 'text-gray-700', labelClass]"
+      :class="[
+        error ? 'text-error-500' : 'text-gray-700 dark:text-neutral-200',
+        labelClass,
+      ]"
     >
       {{ label }}
     </label>
@@ -211,13 +213,19 @@ onBeforeUnmount(() => {
             duration-300
             disabled:cursor-not-allowed
             disabled:border-gray-300
+            dark:bg-neutral-800
+            dark:border-neutral-700
+            dark:disabled:bg-neutral-300
           "
           :class="classes"
           :disabled="disabled"
           @change="onChange"
         />
         <slot name="label" :item="item" :selected="uncontrolledValue">
-          <span :class="[sizeClass]">
+          <span
+            class="text-gray-800 dark:text-neutral-200"
+            :class="[sizeClass]"
+          >
             {{ getText(item) }}
           </span>
         </slot>
diff --git a/packages/forms/src/textarea/Textarea.stories.ts b/packages/forms/src/textarea/Textarea.stories.ts
index 1180ea2eb..4578dbaad 100644
--- a/packages/forms/src/textarea/Textarea.stories.ts
+++ b/packages/forms/src/textarea/Textarea.stories.ts
@@ -193,11 +193,13 @@ export const TestInputState: Story<{}> = (args) => ({
   setup() {
     const modelValue = ref('');
     const modelValue2 = ref('');
-    const {handleSubmit, resetForm, values} = args.useForm ? useForm() : {
-      handleSubmit: (cb: any) => null,
-      resetForm: () => null,
-      values: {},
-    };
+    const {handleSubmit, resetForm, values} = args.useForm
+      ? useForm()
+      : {
+          handleSubmit: (cb: any) => null,
+          resetForm: () => null,
+          values: {},
+        };
 
     const onSubmit = handleSubmit((values: any) => {
       alert(JSON.stringify(values));
@@ -207,7 +209,15 @@ export const TestInputState: Story<{}> = (args) => ({
       alert('onChange');
     };
 
-    return {args, onSubmit, resetForm, values, modelValue, modelValue2, onChange};
+    return {
+      args,
+      onSubmit,
+      resetForm,
+      values,
+      modelValue,
+      modelValue2,
+      onChange,
+    };
   },
   template: `
     <form @submit="onSubmit" class="border-none">
@@ -267,3 +277,15 @@ export const TestInputState: Story<{}> = (args) => ({
 TestInputState.args = {
   useForm: false,
 };
+
+export const DarkMode: Story = (args) => ({
+  components: {VTextarea},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VTextarea v-bind='args' />
+  </div>
+  `,
+});
diff --git a/packages/icon/src/Icon.dark.scss b/packages/icon/src/Icon.dark.scss
new file mode 100644
index 000000000..58aa08c57
--- /dev/null
+++ b/packages/icon/src/Icon.dark.scss
@@ -0,0 +1,5 @@
+.dark {
+  .v-icon {
+    color: theme('colors.neutral.200');
+  }
+}
diff --git a/packages/icon/src/Icon.stories.ts b/packages/icon/src/Icon.stories.ts
index af8ce63b4..672cb2e6d 100644
--- a/packages/icon/src/Icon.stories.ts
+++ b/packages/icon/src/Icon.stories.ts
@@ -1,5 +1,6 @@
 import {Story} from '@storybook/vue3';
 import Icon from './Icon.vue';
+import './Icon.dark.scss';
 
 export default {
   title: 'Components/Icon',
@@ -66,3 +67,15 @@ CustomClass.parameters = {
     },
   },
 };
+
+export const DarkMode: Story = (args) => ({
+  components: {Icon},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <Icon v-bind='args'/>
+  </div>
+  `,
+});
diff --git a/packages/icon/src/index.ts b/packages/icon/src/index.ts
index a22b9d96c..9c371faec 100644
--- a/packages/icon/src/index.ts
+++ b/packages/icon/src/index.ts
@@ -1,3 +1,5 @@
 import Icon from './Icon.vue';
+import './Icon.dark.scss';
+
 export {Icon};
 export default Icon;
diff --git a/packages/list/src/List.dark.scss b/packages/list/src/List.dark.scss
new file mode 100644
index 000000000..0c6fe9bb0
--- /dev/null
+++ b/packages/list/src/List.dark.scss
@@ -0,0 +1,26 @@
+.dark {
+  .v-list {
+    --v-list-bg-color: theme('colors.transparent');
+
+    /* item */
+    --v-list-item-color: theme('colors.neutral.200');
+    --v-list-item-bg-color: theme('colors.transparent');
+    --v-list-item-border-color: theme('colors.transparent');
+
+    /* item hover */
+    --v-list-item-hover-bg-color: theme('colors.neutral.700');
+    --v-list-item-hover-color: theme('colors.neutral.200');
+
+    /* item header */
+    --v-list-item-header-color: theme('colors.neutral.500');
+
+    /* divider */
+    --v-list-item-divider-color: theme('colors.neutral.700');
+
+    // icon
+    --v-list-item-icon-color: theme('colors.neutral.300');
+
+    // append text
+    --v-list-item-append-text-color: theme('colors.neutral.500');
+  }
+}
diff --git a/packages/list/src/List.scss b/packages/list/src/List.scss
index ff510520e..d8a4ac355 100644
--- a/packages/list/src/List.scss
+++ b/packages/list/src/List.scss
@@ -46,6 +46,14 @@
   --v-list-item-divider-width: theme('borderWidth.DEFAULT');
   --v-list-item-divider-color: theme('colors.gray.200');
   --v-list-item-divider-style: solid;
+
+  // icon
+  --v-list-item-icon-color: var(--v-list-item-color);
+
+  // append text
+  --v-list-item-append-text-color: var(--v-list-item-color);
+  --v-list-item-append-font-size: var(--v-list-item-font-size);
+  --v-list-item-append-font-weight: var(--v-list-item-font-weight);
 }
 
 .v-list {
@@ -92,7 +100,15 @@
     @apply flex gap-1 justify-center items-center;
   }
 
+  &-item-append-text {
+    color: var(--v-list-item-append-text-color);
+    font-size: var(--v-list-item-append-font-size);
+    font-weight: var(--v-list-item-append-font-weight);
+  }
+
   &-item-icon {
+    color: var(--v-list-item-icon-color);
+
     @apply transition duration-300 transform;
   }
 
diff --git a/packages/list/src/List.stories.ts b/packages/list/src/List.stories.ts
index 285ba366b..ebe3b01f0 100644
--- a/packages/list/src/List.stories.ts
+++ b/packages/list/src/List.stories.ts
@@ -10,7 +10,9 @@ import {ref} from 'vue';
 import {NavDrawer as VNavDrawer} from '@gits-id/nav-drawer';
 import VBtn from '@gits-id/button';
 import {Dropdown} from '@gits-id/dropdown';
-import '@gits-id/nav-drawer/dist/style.css';
+import '@gits-id/dropdown/src/Dropdown.scss';
+import '@gits-id/nav-drawer/src/NavDrawer.scss';
+import './List.dark.scss';
 
 export default {
   title: 'Components/List',
@@ -702,6 +704,7 @@ export const IosSettings: Story = (args) => ({
         hover
         tile
         prepend-icon="ion:ios-airplane"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-orange-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -712,6 +715,7 @@ export const IosSettings: Story = (args) => ({
         hover
         tile
         prepend-icon="ic:outline-wifi"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-blue-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -724,6 +728,7 @@ export const IosSettings: Story = (args) => ({
         hover
         tile
         prepend-icon="ri:bluetooth-line"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-blue-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -736,6 +741,7 @@ export const IosSettings: Story = (args) => ({
         hover
         tile
         prepend-icon="ic:sharp-cell-tower"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-green-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -746,6 +752,7 @@ export const IosSettings: Story = (args) => ({
         hover
         tile
         prepend-icon="ri:hotspot-line"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-green-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -756,6 +763,7 @@ export const IosSettings: Story = (args) => ({
         hover
         tile
         prepend-icon="material-symbols:vpn-lock"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-blue-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -808,6 +816,7 @@ export const ListInDropdown: Story = (args) => ({
         hover
         tile
         prepend-icon="ion:ios-airplane"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-orange-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -818,6 +827,7 @@ export const ListInDropdown: Story = (args) => ({
         hover
         tile
         prepend-icon="ic:outline-wifi"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-blue-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -830,6 +840,7 @@ export const ListInDropdown: Story = (args) => ({
         hover
         tile
         prepend-icon="ri:bluetooth-line"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-blue-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -842,6 +853,7 @@ export const ListInDropdown: Story = (args) => ({
         hover
         tile
         prepend-icon="ic:sharp-cell-tower"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-green-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -852,6 +864,7 @@ export const ListInDropdown: Story = (args) => ({
         hover
         tile
         prepend-icon="ri:hotspot-line"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-green-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -862,6 +875,7 @@ export const ListInDropdown: Story = (args) => ({
         hover
         tile
         prepend-icon="material-symbols:vpn-lock"
+        prepend-icon-class="!text-white"
         prepend-class="p-1 bg-blue-500 text-white rounded"
         append-icon="ri:arrow-right-s-line"
         append-icon-class="text-gray-500"
@@ -960,4 +974,25 @@ export const DividerInset: Story = (args) => ({
       <ListItem>Item 5</ListItem>
     </List>
   `,
-});
\ No newline at end of file
+});
+
+export const DarkMode: Story<{}> = (args) => ({
+  components: {Dropdown, List, ListItem, ListItemDivider},
+  setup() {
+    return {args};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
+  <List
+    v-bind="args"
+    hover
+  >
+    <ListItem prepend-icon="ri:home-line">Item 1</ListItem>
+    <ListItemDivider inset />
+    <ListItem append-icon="ri:add-line">Item 3</ListItem>
+    <ListItemDivider inset />
+    <ListItem>Item 5</ListItem>
+  </List>
+</main>
+`,
+});
diff --git a/packages/list/src/ListItem.vue b/packages/list/src/ListItem.vue
index 14b064bb9..1fc386faf 100644
--- a/packages/list/src/ListItem.vue
+++ b/packages/list/src/ListItem.vue
@@ -123,6 +123,7 @@ const hoverClasses = computed(() => {
         <slot name="append.text">
           <span
             v-if="appendText"
+            class="v-list-item-append-text"
             :class="appendTextClass"
             @click="emit('click:appendText')"
           >
diff --git a/packages/list/src/index.ts b/packages/list/src/index.ts
index fe3892beb..7356b6331 100644
--- a/packages/list/src/index.ts
+++ b/packages/list/src/index.ts
@@ -1,3 +1,5 @@
+import './List.dark.scss';
+
 export {default} from './List.vue';
 export {default as List} from './List.vue';
 export {default as ListItem} from './ListItem.vue';
diff --git a/packages/menus/src/VMenus.dark.scss b/packages/menus/src/VMenus.dark.scss
new file mode 100644
index 000000000..c062d13c2
--- /dev/null
+++ b/packages/menus/src/VMenus.dark.scss
@@ -0,0 +1,25 @@
+.dark {
+  .v-menus,
+  .v-menus-items {
+    --v-menus-popper-border-color: theme('colors.neutral.700');
+
+    /* button */
+    --v-menus-button-color: theme('colors.neutral.200');
+    --v-menus-button-icon-color: theme('colors.neutral.500');
+
+    /* menus */
+    --v-menus-bg-color: theme('colors.neutral.800');
+    --v-menus-border-color: theme('colors.neutral.700');
+
+    /* item */
+    --v-menus-item-bg-color: theme('colors.neutral.800');
+    --v-menus-item-text-color: theme('colors.neutral.200');
+
+    /* item hover */
+    --v-menus-item-hover-bg-color: theme('colors.neutral.700');
+    --v-menus-item-hover-text-color: theme('colors.neutral.200');
+
+    /* arrow */
+    --v-menus-arrow-border-color: theme('colors.neutral.700');
+  }
+}
diff --git a/packages/menus/src/VMenus.scss b/packages/menus/src/VMenus.scss
index 3aec5de7b..df85a4877 100644
--- a/packages/menus/src/VMenus.scss
+++ b/packages/menus/src/VMenus.scss
@@ -1,5 +1,6 @@
 :root {
-  --v-menus-popper-border: 1px solid #ddd;
+  --v-menus-popper-border-color: #ddd;
+  --v-menus-popper-border: 1px solid var(--v-menus-popper-border-color);
   /* menus */
   --v-menus-margin-y: theme('margin.0');
   --v-menus-margin-x: theme('margin.0');
@@ -15,6 +16,7 @@
   --v-menus-opacity: 1;
 
   /* button */
+  --v-menus-button-color: theme('colors.gray.800');
   --v-menus-button-icon-color: theme('colors.gray.500');
 
   /* item */
@@ -71,6 +73,7 @@
     justify-content: var(--v-menus-item-justify-content);
     gap: var(--v-menus-item-gap);
     border-radius: var(--v-menus-item-border-radius);
+    width: 100%;
   }
 
   &-item-text {
@@ -89,6 +92,8 @@
   }
 
   &-button {
+    color: var(--v-menus-button-color);
+
     @apply inline-flex items-center justify-center gap-1;
   }
 
diff --git a/packages/menus/src/VMenus.stories.ts b/packages/menus/src/VMenus.stories.ts
index 42fad6a24..c5be2b5c3 100644
--- a/packages/menus/src/VMenus.stories.ts
+++ b/packages/menus/src/VMenus.stories.ts
@@ -4,6 +4,7 @@ import VMenusItem from './VMenusItem.vue';
 import vueRouter from 'storybook-vue3-router';
 import VAppBar from '@gits-id/app-bar';
 import VMenusCustom from './stories/VMenusCustom.vue';
+import './VMenus.dark.scss';
 
 const items = [
   {
@@ -254,3 +255,15 @@ export const CustomStyle: Story = (args) => ({
   <VMenusCustom />
   `,
 });
+
+export const DarkMode: Story = (args) => ({
+  components: {VMenus},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VMenus v-bind='args'/>
+  </div>
+  `,
+});
diff --git a/packages/menus/src/VMenus.vue b/packages/menus/src/VMenus.vue
index 4bf773c65..2ec2d81cd 100644
--- a/packages/menus/src/VMenus.vue
+++ b/packages/menus/src/VMenus.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import {Menu, Dropdown, options} from 'floating-vue';
-import {List} from '@gits-id/list';
 import {computed} from 'vue';
 import Icon from '@gits-id/icon';
 import VMenusItem from './VMenusItem.vue';
-import 'floating-vue/dist/style.css';
 
 export type VMenuItem = InstanceType<typeof VMenusItem>['$props'];
 export type Placement = InstanceType<typeof Menu>['$props']['placement'];
@@ -88,7 +86,7 @@ const menuPlacement = computed(() => {
       </button>
     </slot>
     <template #popper>
-      <List class="v-menus-items" :class="itemsClass" :style="itemsStyle">
+      <div class="v-menus-items" :class="itemsClass" :style="itemsStyle">
         <slot name="items">
           <template v-for="item in items" :key="item.text">
             <VMenusItem
@@ -98,7 +96,7 @@ const menuPlacement = computed(() => {
             />
           </template>
         </slot>
-      </List>
+      </div>
     </template>
   </component>
 </template>
diff --git a/packages/menus/src/index.ts b/packages/menus/src/index.ts
index 9f8f40e9d..8faccc435 100644
--- a/packages/menus/src/index.ts
+++ b/packages/menus/src/index.ts
@@ -1,3 +1,5 @@
+import './VMenus.dark.scss';
+
 export {default} from './VMenus.vue';
 export {default as VMenus} from './VMenus.vue';
 export {default as VMenusItem} from './VMenusItem.vue';
diff --git a/packages/modal/src/VModal.dark.scss b/packages/modal/src/VModal.dark.scss
new file mode 100644
index 000000000..d0574f614
--- /dev/null
+++ b/packages/modal/src/VModal.dark.scss
@@ -0,0 +1,7 @@
+.dark {
+  .v-modal {
+    --v-modal-text-color: theme('colors.neutral.200');
+    --v-modal-bg-color: theme('colors.neutral.800');
+    --v-modal-title-color: theme('colors.neutral.200');
+  }
+}
diff --git a/packages/modal/src/VModal.stories.ts b/packages/modal/src/VModal.stories.ts
index 42625e531..969d8aebf 100644
--- a/packages/modal/src/VModal.stories.ts
+++ b/packages/modal/src/VModal.stories.ts
@@ -4,6 +4,7 @@ import vueRouter from 'storybook-vue3-router';
 import {ref} from 'vue';
 import VBtn from '@gits-id/button';
 import {VModalEvent} from './types';
+import './VModal.dark.scss';
 
 export default {
   title: 'Components/Modal',
@@ -350,3 +351,15 @@ export const Customization: Story = (args) => ({
     </div>  
   `,
 });
+
+export const DarkMode: Story = (args) => ({
+  components: {VModal},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VModal v-bind='args'/>
+  </div>
+  `,
+});
diff --git a/packages/modal/src/index.ts b/packages/modal/src/index.ts
index 9a4eee552..1600bbbad 100644
--- a/packages/modal/src/index.ts
+++ b/packages/modal/src/index.ts
@@ -1,4 +1,5 @@
 import VModal from './VModal.vue';
+import './VModal.dark.scss';
 
 export * from './types';
 export {VModal};
diff --git a/packages/multi-select/src/VMultiSelect.dark.scss b/packages/multi-select/src/VMultiSelect.dark.scss
new file mode 100644
index 000000000..a90502b49
--- /dev/null
+++ b/packages/multi-select/src/VMultiSelect.dark.scss
@@ -0,0 +1,24 @@
+.dark {
+  .v-multi-select {
+    --v-multi-select-border-color: var(--v-input-border-color);
+    --v-multi-select-border-radius: var(--v-input-border-radius);
+    --v-multi-select-bg-color: var(--v-input-bg-color);
+    --v-multi-select-placeholder-color: var(--v-input-placeholder-color);
+    --v-multi-select-text-color: theme('colors.neutral.800');
+
+    /* item */
+    --v-multi-select-item-bg-color: theme('colors.neutral.800');
+    --v-multi-select-item-text-color: theme('colors.neutral.200');
+    --v-multi-select-item-hover-bg-color: theme('colors.primary.500');
+    --v-multi-select-item-hover-text-color: theme('colors.neutral.200');
+
+    /* error */
+    --v-multi-select-error-border-color: theme('colors.error.500');
+
+    /* icon */
+    --v-multi-select-icon-color: theme('colors.neutral.500');
+
+    /* dropdown */
+    --v-multi-select-dropdown-bg-color: theme('colors.neutral.800');
+  }
+}
diff --git a/packages/multi-select/src/VMultiSelect.scss b/packages/multi-select/src/VMultiSelect.scss
index 6e7583f03..0af72ea42 100644
--- a/packages/multi-select/src/VMultiSelect.scss
+++ b/packages/multi-select/src/VMultiSelect.scss
@@ -15,6 +15,7 @@
   --v-multi-select-label-font-weight: var(--v-input-label-font-weight);
   --v-multi-select-label-display: var(--v-input-label-display);
   --v-multi-select-label-margin-bottom: var(--v-input-label-margin-bottom);
+  --v-multi-select-label-color: var(--v-input-label-color);
 
   /* item */
   --v-multi-select-item-font-size: theme('fontSize.base');
@@ -67,6 +68,7 @@
   }
 
   &-label {
+    color: var(--v-multi-select-label-color);
     font-size: var(--v-multi-select-label-font-size);
     font-weight: var(--v-multi-select-label-font-weight);
     display: var(--v-multi-select-label-display);
diff --git a/packages/multi-select/src/VMultiSelect.stories.ts b/packages/multi-select/src/VMultiSelect.stories.ts
index d40896240..dd75491ef 100644
--- a/packages/multi-select/src/VMultiSelect.stories.ts
+++ b/packages/multi-select/src/VMultiSelect.stories.ts
@@ -5,6 +5,8 @@ import {object, array} from 'yup';
 import {computed, ref, onMounted} from 'vue';
 import {VMultiSelectItem} from './types';
 import {Story} from '@storybook/vue3';
+import './VMultiSelect.dark.scss';
+import '@gits-id/forms/src/forms.dark.scss';
 
 const items = [...Array(200)].map((_, index) => ({
   value: index + 1,
@@ -708,24 +710,27 @@ export const CustomSearchFunction = () => ({
     const genres = ref([
       {
         name: 'Pop',
-        id: 1
+        id: 1,
       },
       {
         name: 'Rock',
-        id: 2
+        id: 2,
       },
       {
         name: 'Jazz',
-        id: 3
+        id: 3,
       },
       {
         name: 'Alternative',
-        id: 4
+        id: 4,
       },
     ]);
 
     const compareGenres = (item: VMultiSelectItem, query: string) => {
-      return +item.id === +query || item.name.toLowerCase().includes(query.toLowerCase());
+      return (
+        +item.id === +query ||
+        item.name.toLowerCase().includes(query.toLowerCase())
+      );
     };
 
     return {onSubmit, resetForm, values, genres, compareGenres};
@@ -755,27 +760,40 @@ export const TestInputState: Story<{}> = (args) => ({
   setup() {
     const modelValue = ref([]);
     const modelValue2 = ref([]);
-    const {handleSubmit, resetForm, values} = args.useForm ? useForm({
-      initialValues: {
-        text: [],
-        text2: [],
-      }
-    }) : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}};
-
-    const items = ref(['seal|🦭', 'otter|🦦', 'giraffe|🦒', 'shark|🦈', 'dodo|🦤'].map((e) => ({
-      text: e.split('|')[1],
-      value:e.split('|')[0],
-    })))
+    const {handleSubmit, resetForm, values} = args.useForm
+      ? useForm({
+          initialValues: {
+            text: [],
+            text2: [],
+          },
+        })
+      : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}};
+
+    const items = ref(
+      ['seal|🦭', 'otter|🦦', 'giraffe|🦒', 'shark|🦈', 'dodo|🦤'].map((e) => ({
+        text: e.split('|')[1],
+        value: e.split('|')[0],
+      })),
+    );
 
     const onSubmit = handleSubmit((values: any) => {
       alert(JSON.stringify(values));
     });
 
     const onChange = (val: any) => {
-      alert("onChange: " + val);
+      alert('onChange: ' + val);
     };
 
-    return {args, onSubmit, resetForm, values, modelValue, modelValue2, items, onChange};
+    return {
+      args,
+      onSubmit,
+      resetForm,
+      values,
+      modelValue,
+      modelValue2,
+      items,
+      onChange,
+    };
   },
   template: `
     <form @submit='onSubmit' class='border-none'>
@@ -835,4 +853,18 @@ export const TestInputState: Story<{}> = (args) => ({
 });
 TestInputState.args = {
   useForm: false,
-};
\ No newline at end of file
+};
+
+export const DarkMode = () => ({
+  components: {
+    VMultiSelect,
+  },
+  setup() {
+    return {items};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <v-multi-select :items="items" label="Label" placeholder="Placeholder" />
+  </div>
+  `,
+});
diff --git a/packages/multi-select/src/index.ts b/packages/multi-select/src/index.ts
index 9ee6ab003..5a82f5374 100644
--- a/packages/multi-select/src/index.ts
+++ b/packages/multi-select/src/index.ts
@@ -1,4 +1,5 @@
 import VMultiSelect from './VMultiSelect.vue';
+import './VMultiSelect.dark.scss';
 
 export {VMultiSelect};
 export default VMultiSelect;
diff --git a/packages/nav-drawer/src/NavDrawer.dark.scss b/packages/nav-drawer/src/NavDrawer.dark.scss
new file mode 100644
index 000000000..ba53e8ffa
--- /dev/null
+++ b/packages/nav-drawer/src/NavDrawer.dark.scss
@@ -0,0 +1,11 @@
+.dark {
+  .nav-drawer {
+    --nav-drawer-bg-color: theme('colors.neutral.800');
+    --nav-drawer-text-color: theme('colors.neutral.200');
+
+    /* variants */
+    &-default {
+      --nav-drawer-bg-color: theme('colors.neutral.800');
+    }
+  }
+}
diff --git a/packages/nav-drawer/src/NavDrawer.stories.ts b/packages/nav-drawer/src/NavDrawer.stories.ts
index 54fc71fd1..33d4635aa 100644
--- a/packages/nav-drawer/src/NavDrawer.stories.ts
+++ b/packages/nav-drawer/src/NavDrawer.stories.ts
@@ -4,6 +4,7 @@ import {ref} from 'vue';
 import Button from '@gits-id/button';
 import {colors} from './colors';
 import NavDrawerCustom from './stories/NavDrawerCustom.vue';
+import './NavDrawer.dark.scss';
 
 export default {
   title: 'Components/NavigationDrawer',
@@ -280,3 +281,17 @@ export const CustomColor: StoryFn<typeof NavDrawer> = (args) => ({
     <NavDrawerCustom />
   `,
 });
+
+export const DarkMode: StoryFn<typeof NavDrawer> = (args) => ({
+  components: {NavDrawer},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <NavDrawer v-bind='args'>
+      <p>Test</p>
+    </NavDrawer>
+  </div>
+  `,
+});
diff --git a/packages/nav-drawer/src/index.ts b/packages/nav-drawer/src/index.ts
index c73c9708d..a6e89b2e3 100644
--- a/packages/nav-drawer/src/index.ts
+++ b/packages/nav-drawer/src/index.ts
@@ -1,3 +1,5 @@
+import './NavDrawer.dark.scss';
+
 export {default as VNavDrawer} from './deprecated/VNavDrawer.vue';
 export {default} from './deprecated/VNavDrawer.vue';
 export {default as NavDrawer} from './NavDrawer.vue';
diff --git a/packages/nuxt/playground/app.vue b/packages/nuxt/playground/app.vue
index 04b481e0a..a5f1c969a 100644
--- a/packages/nuxt/playground/app.vue
+++ b/packages/nuxt/playground/app.vue
@@ -5,13 +5,28 @@ const items = Array.from({length: 50}, (_, index) => ({
   text: `Item ${index}`,
   value: index,
 }));
+
+const toggleDarkMode = () => {
+  const html = document.querySelector('html');
+  html?.classList?.toggle('dark');
+};
+
+const darkMode = ref(false);
+const isOpen = ref(false);
 </script>
 
 <template>
   <div class="container mx-auto p-6 space-y-5">
     <h1 class="text-2xl font-semibold">GITS UI Playground</h1>
 
-    <hr />
+    <hr class="dark:border-neutral-700" />
+    <VSwitch
+      v-model="darkMode"
+      label="Dark Mode"
+      @update:model-value="toggleDarkMode"
+    />
+
+    <hr class="dark:border-neutral-700" />
     <h3 class="text-xl font-semibold">AppBar</h3>
     <div class="space-y-2">
       <VAppBar v-for="color in defaultColors" :color="color" :key="color">
@@ -19,7 +34,7 @@ const items = Array.from({length: 50}, (_, index) => ({
       </VAppBar>
     </div>
 
-    <hr />
+    <hr class="dark:border-neutral-700" />
     <h3 class="text-xl font-semibold">Alert</h3>
     <div class="space-y-2">
       <VAlert v-for="color in defaultColors" :color="color" :key="color">
@@ -27,7 +42,7 @@ const items = Array.from({length: 50}, (_, index) => ({
       </VAlert>
     </div>
 
-    <hr />
+    <hr class="dark:border-neutral-700" />
     <h3 class="text-xl font-semibold">Avatar</h3>
     <div class="space-y-2">
       <VAvatar
@@ -38,7 +53,7 @@ const items = Array.from({length: 50}, (_, index) => ({
       />
     </div>
 
-    <hr />
+    <hr class="dark:border-neutral-700" />
     <h3 class="text-xl font-semibold">Badge</h3>
     <div class="space-x-2">
       <VBadge v-for="color in defaultColors" :color="color" :key="color">
@@ -46,7 +61,7 @@ const items = Array.from({length: 50}, (_, index) => ({
       </VBadge>
     </div>
 
-    <hr />
+    <hr class="dark:border-neutral-700" />
     <h3 class="text-xl font-semibold">Button</h3>
     <div class="space-x-2">
       <v-btn
@@ -59,31 +74,228 @@ const items = Array.from({length: 50}, (_, index) => ({
       </v-btn>
     </div>
 
-    <hr />
+    <hr class="dark:border-neutral-700" />
     <h3 class="text-xl font-semibold">Forms</h3>
     <div>
       <form class="space-y-3">
-        <v-input label="Name" />
-        <v-input label="Email" />
-        <v-input label="Password" />
-        <v-input label="Confirm Password" />
-        <v-input label="Phone" />
-        <v-textarea label="Address" />
-        <v-checkbox label="I agree to the terms and conditions" />
-        <v-btn v-tooltip="'Submit'">Submit</v-btn>
+        <v-input placeholder="Placeholder" label="Name" />
+        <v-input placeholder="Placeholder" label="Email" />
+        <v-input placeholder="Placeholder" label="Password" />
+        <v-input placeholder="Placeholder" label="Confirm Password" />
+        <v-input placeholder="Placeholder" label="Phone" />
+        <v-textarea placeholder="Placeholder" label="Address" />
+        <v-checkbox
+          placeholder="Placeholder"
+          label="I agree to the terms and conditions"
+        />
+        <v-form-select
+          placeholder="Placeholder"
+          label="Choose"
+          :items="[
+            {text: 'Option 1', value: '1'},
+            {text: 'Option 2', value: '2'},
+            {text: 'Option 3', value: '3'},
+          ]"
+        />
+        <v-radio label="Option 1" value="1" />
+        <v-radio label="Option 2" value="2" />
+        <v-radio-group
+          placeholder="Placeholder"
+          label="Choose"
+          :items="[
+            {text: 'Option 1', value: '1'},
+            {text: 'Option 2', value: '2'},
+            {text: 'Option 3', value: '3'},
+          ]"
+        />
+        <v-btn color="primary" v-tooltip="'Submit'">Submit</v-btn>
+        <v-btn type="reset">Cancel</v-btn>
       </form>
     </div>
 
-    <hr />
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Autocomplete</h3>
+    <div>
+      <VAutocomplete :items="items" />
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Breadcrumbs</h3>
+    <div>
+      <VBreadcrumbs
+        :items="[
+          {
+            title: 'Home',
+            to: '/',
+          },
+          {
+            title: 'Library',
+            to: '/library',
+          },
+          {
+            title: 'Data',
+            to: '/data',
+            disabled: true,
+          },
+        ]"
+      />
+    </div>
+
+    <hr class="dark:border-neutral-700" />
     <h3 class="text-xl font-semibold">Select</h3>
     <div>
       <VSelect :items="items" />
     </div>
 
-    <hr />
+    <hr class="dark:border-neutral-700" />
     <h3 class="text-xl font-semibold">Multi Select</h3>
     <div>
       <VMultiSelect :items="items" />
     </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Card</h3>
+    <div>
+      <VCard>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus
+        recusandae dolorem consequuntur. Amet iure odio ullam, nulla, iusto rem
+        molestias sapiente ut alias suscipit fugit recusandae aut atque iste
+        dolorem.
+      </VCard>
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Dropdown</h3>
+    <div>
+      <VDropdown :items="items.slice(1, 6)" label="Dropdown" />
+    </div>
+
+    <!-- <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Menus</h3>
+    <div>
+      <VMenus :items="items.slice(1, 6)" label="Menus" placement="top-start" />
+    </div> -->
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Icon</h3>
+    <div>
+      <VIcon name="ri:home-line" />
+      <VIcon name="ri:user-line" />
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">List</h3>
+    <div>
+      <VList hover>
+        <VListItemHeader>Header</VListItemHeader>
+        <VListItem v-for="i in 5" prepend-icon="ri:donut-chart-line">
+          Item {{ i }}
+        </VListItem>
+        <VListItemDivider />
+        <VListItem v-for="i in 5">Item {{ i }}</VListItem>
+      </VList>
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Modal</h3>
+    <div>
+      <VBtn @click="isOpen = true">Open Modal</VBtn>
+      <VModal v-model="isOpen" title="Title">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore
+        consequuntur error tempore hic, excepturi eum blanditiis quaerat ipsam
+        illo, quisquam magni? Fuga consequuntur, consectetur alias aut dolore
+        adipisci excepturi obcaecati?
+      </VModal>
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Tabs</h3>
+    <div>
+      <VTabs
+        :items="[
+          {
+            text: 'Tab 1',
+            content: 'Tab 1 Content',
+          },
+          {
+            text: 'Tab 2',
+            content: 'Tab 2 Content',
+          },
+          {
+            text: 'Tab 3',
+            content: 'Tab 3 Content',
+          },
+        ]"
+      />
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Table</h3>
+    <div>
+      <VDataTable
+        :headers="[
+          {
+            text: 'Name',
+            value: 'name',
+          },
+          {
+            text: 'Email',
+            value: 'email',
+          },
+        ]"
+        :items="[
+          {
+            name: 'John',
+            email: 'john@mail.com',
+          },
+          {
+            name: 'Jane',
+            email: 'jane@mail.com',
+          },
+        ]"
+      />
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">NavDrawer</h3>
+    <div>
+      <VNavDrawer>
+        <p class="p-4">Content</p>
+
+        <VList hover>
+          <VListItemHeader>Menu</VListItemHeader>
+          <VListItem prepend-icon="ri:home-line">Home</VListItem>
+          <VListItem prepend-icon="ri:user-line">Account</VListItem>
+        </VList>
+      </VNavDrawer>
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Shimmer</h3>
+    <div>
+      <VShimmer width="100%" height="60px" />
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">ProgressBar</h3>
+    <div>
+      <VProgressBar :model-value="70" class="mb-2" />
+      <VProgressBar :model-value="60" color="primary" />
+    </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 class="text-xl font-semibold">Pagination</h3>
+    <div>
+      <VPagination :model-value="1" :items-per-page="10" :total-items="50" />
+    </div>
   </div>
 </template>
+
+<style>
+body {
+  @apply transition-colors duration-300;
+}
+.dark body {
+  @apply bg-neutral-900 text-neutral-200;
+}
+</style>
diff --git a/packages/nuxt/playground/nuxt.config.ts b/packages/nuxt/playground/nuxt.config.ts
index 9c96ccaa7..43c511e70 100644
--- a/packages/nuxt/playground/nuxt.config.ts
+++ b/packages/nuxt/playground/nuxt.config.ts
@@ -4,7 +4,6 @@ export default defineNuxtConfig({
   modules: [GitsUIModule, '@nuxtjs/tailwindcss'],
   ssr: false,
   gitsUi: {
-    css: true,
-    sass: false,
+    darkMode: true,
   },
 });
diff --git a/packages/nuxt/playground/tailwind.config.js b/packages/nuxt/playground/tailwind.config.js
index 4c2edd32c..09102aafa 100644
--- a/packages/nuxt/playground/tailwind.config.js
+++ b/packages/nuxt/playground/tailwind.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  darkMode: 'class',
   content: [
     './pages/**/*.{vue,js,ts,jsx,tsx}',
     'app.vue',
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index 1726dbfeb..939e3a36a 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -319,6 +319,7 @@ export interface ModuleOptions {
   components?: boolean;
   transpileDeps?: boolean;
   loadFloatingVueStyles?: boolean;
+  darkMode?: boolean;
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -332,6 +333,7 @@ export default defineNuxtModule<ModuleOptions>({
     components: true,
     transpileDeps: true,
     loadFloatingVueStyles: true,
+    darkMode: false,
   },
   setup(options, nuxt) {
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url));
@@ -356,11 +358,21 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.css.push('@gits-id/ui/styles.scss');
     }
 
+    // load transition styles if css or sass is not used
+    if (!options.css && !options.sass) {
+      nuxt.options.css.push('@gits-id/theme/transition.css');
+    }
+
     // load floating-vue styles
     if (options.loadFloatingVueStyles) {
       nuxt.options.css.push('floating-vue/dist/style.css');
     }
 
+    // load dark mode styles
+    if (options.darkMode) {
+      nuxt.options.css.push('@gits-id/ui/styles.dark');
+    }
+
     // register components
     if (options.components) {
       components.forEach((component) => {
diff --git a/packages/pagination/src/VPagination.dark.scss b/packages/pagination/src/VPagination.dark.scss
new file mode 100644
index 000000000..b22154ac7
--- /dev/null
+++ b/packages/pagination/src/VPagination.dark.scss
@@ -0,0 +1,32 @@
+.dark {
+  .v-pagination {
+    /* item */
+    --v-pagination-item-bg-color: theme('colors.neutral.800');
+    --v-pagination-item-text-color: theme('colors.neutral.200');
+    --v-pagination-item-border-color: theme('colors.neutral.800');
+
+    /* item active */
+    --v-pagination-item-active-bg-color: theme('colors.primary.500');
+    --v-pagination-item-active-border-color: theme('colors.primary.500');
+    --v-pagination-item-active-text-color: theme('colors.neutral.200');
+
+    /* item hover */
+    --v-pagination-item-hover-bg-color: theme('colors.neutral.700');
+    --v-pagination-item-hover-text-color: theme('colors.neutral.200');
+
+    /* item disabled */
+    --v-pagination-item-disabled-bg-color: theme('colors.neutral.600');
+    --v-pagination-item-disabled-border-color: theme('colors.neutral.600');
+    --v-pagination-item-disabled-text-color: theme('colors.neutral.400');
+
+    &-item {
+      &--ellipsis {
+        --v-pagination-bg-color: var(--v-pagination-item-disabled-bg-color);
+        --v-pagination-text-color: var(--v-pagination-item-disabled-text-color);
+        --v-pagination-border-color: var(
+          --v-pagination-item-disabled-border-color
+        );
+      }
+    }
+  }
+}
diff --git a/packages/pagination/src/VPagination.scss b/packages/pagination/src/VPagination.scss
index 7074b30e3..955d6b181 100644
--- a/packages/pagination/src/VPagination.scss
+++ b/packages/pagination/src/VPagination.scss
@@ -1,5 +1,7 @@
 :root {
   --v-pagination-shadow: theme('boxShadow.sm');
+  --v-pagination-border-radius: theme('borderRadius.none');
+  --v-pagination-gap: theme('gap.0');
 
   /* item */
   --v-pagination-item-padding-x: theme('padding.4');
@@ -23,7 +25,8 @@
   --v-pagination-item-hover-bg-color: theme('colors.gray.50');
 
   /* item disabled */
-  --v-pagination-item-disabled-bg-color: inherit;
+  --v-pagination-item-disabled-bg-color: var(--v-pagination-item-bg-color);
+  --v-pagination-item-disabled-border-color: var(--v-pagination-item-border-color);
   --v-pagination-item-disabled-text-color: theme('colors.gray.400');
 
   /* item action */
@@ -37,8 +40,21 @@
   --v-pagination-lg-item-action-padding-y: theme('padding.4');
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .v-pagination {
   box-shadow: var(--v-pagination-shadow);
+  gap: var(--v-pagination-gap);
 
   @apply inline-flex items-center -space-x-px;
 
@@ -56,12 +72,14 @@
     font-weight: var(--v-pagination-item-font-weight);
     height: var(--v-pagination-item-height);
     gap: var(--v-pagination-item-gap);
+    border-radius: var(--v-pagination-border-radius);
 
     @apply relative inline-flex items-center;
 
     &:disabled {
       background: var(--v-pagination-item-disabled-bg-color);
       color: var(--v-pagination-item-disabled-text-color);
+      border-color: var(--v-pagination-item-disabled-border-color);
 
       @apply cursor-not-allowed;
     }
diff --git a/packages/pagination/src/VPagination.stories.ts b/packages/pagination/src/VPagination.stories.ts
index 6926ccf5d..c17866d29 100644
--- a/packages/pagination/src/VPagination.stories.ts
+++ b/packages/pagination/src/VPagination.stories.ts
@@ -1,5 +1,6 @@
 import {Meta, Story} from '@storybook/vue3';
 import VPagination from './VPagination.vue';
+import './VPagination.dark.scss';
 
 export default {
   title: 'Components/Pagination',
@@ -44,9 +45,7 @@ export default {
 } as Meta;
 
 const Template: Story = (args) => ({
-  components: {
-    'v-pagination': VPagination,
-  },
+  components: {VPagination},
   setup() {
     return {args};
   },
@@ -84,9 +83,7 @@ Flat.parameters = {
 };
 
 export const Sizes: Story = (args) => ({
-  components: {
-    'v-pagination': VPagination,
-  },
+  components: {VPagination},
   setup() {
     return {args};
   },
@@ -98,9 +95,7 @@ export const Sizes: Story = (args) => ({
 });
 
 export const CustomStyle: Story = (args) => ({
-  components: {
-    'v-pagination': VPagination,
-  },
+  components: {VPagination},
   setup() {
     return {args};
   },
@@ -113,9 +108,7 @@ export const CustomStyle: Story = (args) => ({
 });
 
 export const Slots: Story = (args) => ({
-  components: {
-    'v-pagination': VPagination,
-  },
+  components: {VPagination},
   setup() {
     return {args};
   },
@@ -131,3 +124,17 @@ export const Slots: Story = (args) => ({
   </v-pagination>
   `,
 });
+
+export const DarkMode: Story = (args) => ({
+  components: {
+    VPagination,
+  },
+  setup() {
+    return {args};
+  },
+  template: `
+<div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+  <v-pagination v-bind="args" />
+</div>
+  `,
+});
diff --git a/packages/pagination/src/index.ts b/packages/pagination/src/index.ts
index a3a216817..6303d27b8 100644
--- a/packages/pagination/src/index.ts
+++ b/packages/pagination/src/index.ts
@@ -1,3 +1,5 @@
+import './VPagination.dark.scss';
+
 export {default} from './VPagination.vue';
 export {default as VPagination} from './VPagination.vue';
 export {default as VPaginationItem} from './VPaginationItem.vue';
diff --git a/packages/progress/src/VProgressBar.dark.scss b/packages/progress/src/VProgressBar.dark.scss
new file mode 100644
index 000000000..d5024285c
--- /dev/null
+++ b/packages/progress/src/VProgressBar.dark.scss
@@ -0,0 +1,9 @@
+.dark {
+  .v-progress-bar {
+    --v-progress-bar-bg-color: theme('colors.neutral.500');
+    --v-progress-bar-label-color: theme('colors.neutral.200');
+    &-default {
+      --v-progress-bar-fill-color: theme('colors.neutral.700');
+    }
+  }
+}
diff --git a/packages/progress/src/VProgressBar.scss b/packages/progress/src/VProgressBar.scss
index ddf6931b8..ba16ac4e9 100644
--- a/packages/progress/src/VProgressBar.scss
+++ b/packages/progress/src/VProgressBar.scss
@@ -42,31 +42,24 @@
 
   /* colors */
   &-primary {
-    --v-progress-bar-bg-color: theme('colors.gray.200');
     --v-progress-bar-fill-color: theme('colors.primary.500');
   }
   &-secondary {
-    --v-progress-bar-bg-color: theme('colors.gray.200');
     --v-progress-bar-fill-color: theme('colors.secondary.500');
   }
   &-info {
-    --v-progress-bar-bg-color: theme('colors.gray.200');
     --v-progress-bar-fill-color: theme('colors.info.500');
   }
   &-warning {
-    --v-progress-bar-bg-color: theme('colors.gray.200');
     --v-progress-bar-fill-color: theme('colors.warning.500');
   }
   &-success {
-    --v-progress-bar-bg-color: theme('colors.gray.200');
     --v-progress-bar-fill-color: theme('colors.success.500');
   }
   &-error {
-    --v-progress-bar-bg-color: theme('colors.gray.200');
     --v-progress-bar-fill-color: theme('colors.error.500');
   }
   &-dark {
-    --v-progress-bar-bg-color: theme('colors.gray.200');
     --v-progress-bar-fill-color: theme('colors.gray.800');
   }
 
diff --git a/packages/progress/src/VProgressBar.stories.ts b/packages/progress/src/VProgressBar.stories.ts
index 61067f4da..b16756307 100644
--- a/packages/progress/src/VProgressBar.stories.ts
+++ b/packages/progress/src/VProgressBar.stories.ts
@@ -3,6 +3,7 @@ import {themeColors} from '@gits-id/utils/colors';
 import {Meta, Story} from '@storybook/vue3';
 import {ref} from 'vue';
 import VBtn from '@gits-id/button';
+import './VProgressBar.dark.scss';
 
 export default {
   title: 'Components/ProgressBar',
@@ -91,3 +92,21 @@ export const Indeterminate: Story = (args) => ({
     <VProgressBar color="secondary" indeterminate/>
   `,
 });
+
+export const DarkMode: Story = (args) => ({
+  components: {VProgressBar},
+  setup() {
+    return {args, themeColors};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VProgressBar
+      v-for="color in themeColors"
+      :key="color"
+      v-bind='args'
+      :color="color"
+      class="mb-4"
+    />
+  </div>
+  `,
+});
diff --git a/packages/progress/src/index.ts b/packages/progress/src/index.ts
index 683c7b7f7..5b404cd7d 100644
--- a/packages/progress/src/index.ts
+++ b/packages/progress/src/index.ts
@@ -1,4 +1,5 @@
 import VProgressBar from './VProgressBar.vue';
+import './VProgressBar.dark.scss';
 
 export {VProgressBar};
 export default VProgressBar;
diff --git a/packages/select/src/VSelect.dark.scss b/packages/select/src/VSelect.dark.scss
new file mode 100644
index 000000000..f3938046b
--- /dev/null
+++ b/packages/select/src/VSelect.dark.scss
@@ -0,0 +1,21 @@
+.dark {
+  .v-select {
+    /* input control / button */
+    --v-select-border-color: var(--v-input-border-color);
+    --v-select-bg-color: var(--v-input-bg-color);
+    --v-select-placeholder-color: var(--v-input-placeholder-color);
+
+    // options
+    --v-select-options-bg-color: theme('colors.neutral.800');
+
+    /* option item */
+    --v-select-option-bg-color: theme('colors.neutral.800');
+    --v-select-option-text-color: theme('colors.neutral.200');
+  
+    /* option item on hover */
+    --v-select-option-hover-bg-color: theme('colors.neutral.700');
+    --v-select-option-hover-text-color: theme('colors.neutral.200');
+
+    --v-select-icon-hover-color: theme('colors.neutral.200');
+  }
+}
\ No newline at end of file
diff --git a/packages/select/src/VSelect.scss b/packages/select/src/VSelect.scss
index 197ac249e..c4e4f6ff8 100644
--- a/packages/select/src/VSelect.scss
+++ b/packages/select/src/VSelect.scss
@@ -11,6 +11,7 @@
   --v-select-font-size: var(--v-input-font-size);
 
   /* label */
+  --v-select-label-color: var(--v-input-label-color);
   --v-select-label-font-size: var(--v-input-label-font-size);
   --v-select-label-font-weight: var(--v-input-label-font-weight);
   --v-select-label-display: var(--v-input-label-display);
@@ -26,6 +27,9 @@
   --v-select-icon-height: theme('width.5');
   --v-select-icon-color: var(--v-input-icon-color);
 
+  // options
+  --v-select-options-bg-color: theme('colors.white');
+
   /* option item */
   --v-select-option-padding-x: theme('spacing.4');
   --v-select-option-padding-y: theme('spacing.2');
@@ -35,6 +39,9 @@
   /* option item on hover */
   --v-select-option-hover-bg-color: theme('colors.primary.500');
   --v-select-option-hover-text-color: theme('colors.white');
+
+  // selected
+  --v-select-selected-color: var(--v-input-label-color);
 }
 
 .v-select {
@@ -65,6 +72,8 @@
   }
 
   &-selected {
+    color: var(--v-select-selected-color);
+
     @apply block flex-grow w-full truncate mr-2;
 
     &--placeholder {
@@ -73,13 +82,14 @@
   }
 
   &-options {
+    background-color: var(--v-select-options-bg-color);
+
     @apply absolute
       w-full
       py-1
       mt-1
       overflow-auto
       text-base
-      bg-white
       rounded-md
       shadow-lg
       max-h-60
@@ -150,6 +160,7 @@
   }
 
   &-label {
+    color: var(--v-select-label-color);
     font-size: var(--v-select-label-font-size);
     font-weight: var(--v-select-label-font-weight);
     display: var(--v-select-label-display);
diff --git a/packages/select/src/VSelect.stories.ts b/packages/select/src/VSelect.stories.ts
index 2ecb402e0..9ade14004 100644
--- a/packages/select/src/VSelect.stories.ts
+++ b/packages/select/src/VSelect.stories.ts
@@ -7,6 +7,8 @@ import {object, string} from 'yup';
 import VBtn from '@gits-id/button';
 import '@gits-id/button/src/VBtn.scss';
 import '@gits-id/forms/src/forms.scss';
+import '@gits-id/forms/src/forms.dark.scss';
+import './VSelect.dark.scss';
 
 const items = [...Array(10)].map((_, index) => ({
   value: index + 1,
@@ -459,3 +461,15 @@ TestInputState.args = {
   searchable: false,
   clearable: false,
 };
+
+export const DarkMode: Story = (args) => ({
+  components: {VSelect},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VSelect v-bind='args' label="Choose" clearable />
+  </div>
+  `,
+});
diff --git a/packages/select/src/index.ts b/packages/select/src/index.ts
index bdb9d4e17..61e2d728d 100644
--- a/packages/select/src/index.ts
+++ b/packages/select/src/index.ts
@@ -1,4 +1,5 @@
 import VSelect from './VSelect.vue';
+import './VSelect.dark.scss';
 
 export * from './types';
 export {VSelect};
diff --git a/packages/shimmer/src/Shimmer.dark.scss b/packages/shimmer/src/Shimmer.dark.scss
new file mode 100644
index 000000000..e5c178489
--- /dev/null
+++ b/packages/shimmer/src/Shimmer.dark.scss
@@ -0,0 +1,10 @@
+.dark {
+  .shimmer {
+    --shimmer-bg-image: linear-gradient(
+      to right,
+      theme('colors.neutral.600'),
+      theme('colors.neutral.800'),
+      theme('colors.neutral.600')
+    );
+  }
+}
diff --git a/packages/shimmer/src/Shimmer.stories.ts b/packages/shimmer/src/Shimmer.stories.ts
index 27de10910..b7f26b73e 100644
--- a/packages/shimmer/src/Shimmer.stories.ts
+++ b/packages/shimmer/src/Shimmer.stories.ts
@@ -1,5 +1,6 @@
 import type {Meta, StoryFn} from '@storybook/vue3';
 import Shimmer from './Shimmer.vue';
+import './Shimmer.dark.scss';
 
 export default {
   title: 'Components/Shimmer',
@@ -114,3 +115,15 @@ CardShimmer.parameters = {
     },
   },
 };
+
+export const DarkMode: StoryFn<typeof Shimmer> = (args) => ({
+  components: {Shimmer},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <Shimmer v-bind='args' width="100%" height="40px" />
+  </div>
+  `,
+});
diff --git a/packages/shimmer/src/index.ts b/packages/shimmer/src/index.ts
index 088f3d4a1..2e66b8361 100644
--- a/packages/shimmer/src/index.ts
+++ b/packages/shimmer/src/index.ts
@@ -1 +1,2 @@
+import './Shimmer.dark.scss';
 export {default} from './Shimmer.vue';
diff --git a/packages/switch/src/VSwitch.dark.scss b/packages/switch/src/VSwitch.dark.scss
new file mode 100644
index 000000000..c4a34f435
--- /dev/null
+++ b/packages/switch/src/VSwitch.dark.scss
@@ -0,0 +1,9 @@
+.dark {
+  .v-switch {
+    /* button */
+    --v-switch-button-bg-color: theme('colors.neutral.700');
+    --v-switch-button-border-color: theme('colors.neutral.700');
+    /* thumb */
+    --v-switch-thumb-bg-color: theme('colors.neutral.200');
+  }
+}
diff --git a/packages/switch/src/VSwitch.scss b/packages/switch/src/VSwitch.scss
index 5b2d47e28..4112cffe0 100644
--- a/packages/switch/src/VSwitch.scss
+++ b/packages/switch/src/VSwitch.scss
@@ -15,6 +15,7 @@
   --v-switch-thumb-height: theme('height.5');
   --v-switch-thumb-border-radius: theme('borderRadius.full');
   /* label */
+  --v-switch-label-color: var(--v-input-label-color);
   --v-switch-label-font-size: theme('fontSize.base');
   --v-switch-label-font-weight: theme('fontWeight.normal');
 }
@@ -29,6 +30,7 @@
   }
 
   &-label {
+    color: var(--v-switch-label-color);
     font-size: var(--v-switch-label-font-size);
     font-weight: var(--v-switch-label-font-weight);
   }
diff --git a/packages/switch/src/VSwitch.stories.ts b/packages/switch/src/VSwitch.stories.ts
index 508b0a0a2..c72f69a93 100644
--- a/packages/switch/src/VSwitch.stories.ts
+++ b/packages/switch/src/VSwitch.stories.ts
@@ -3,7 +3,10 @@ import {Meta, Story} from '@storybook/vue3';
 import {useForm} from 'vee-validate';
 import {object, boolean} from 'yup';
 import VBtn from '@gits-id/button';
-import { ref } from 'vue';
+import {ref} from 'vue';
+import '@gits-id/forms/src/forms.scss';
+import '@gits-id/forms/src/forms.dark.scss';
+import './VSwitch.dark.scss';
 
 export default {
   title: 'Components/Switch',
@@ -165,7 +168,6 @@ export const CustomStyle: Story<{}> = () => ({
 `,
 });
 
-
 export const Validation: Story<{}> = () => ({
   components: {VSwitch, VBtn},
   setup() {
@@ -202,3 +204,15 @@ export const Validation: Story<{}> = () => ({
     </form>
 `,
 });
+
+export const DarkMode: Story = (args) => ({
+  components: {VSwitch},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VSwitch v-bind='args' />
+  </div>
+  `,
+});
diff --git a/packages/switch/src/index.ts b/packages/switch/src/index.ts
index 248c1aae4..c99206a93 100644
--- a/packages/switch/src/index.ts
+++ b/packages/switch/src/index.ts
@@ -1,4 +1,5 @@
 import VSwitch from './VSwitch.vue';
+import './VSwitch.dark.scss';
 
 export {VSwitch};
 export default VSwitch;
diff --git a/packages/table/src/VDataTable.dark.scss b/packages/table/src/VDataTable.dark.scss
new file mode 100644
index 000000000..a9fe565c7
--- /dev/null
+++ b/packages/table/src/VDataTable.dark.scss
@@ -0,0 +1,57 @@
+.dark {
+  .v-table {
+    /* thead */
+    --v-table-thead-bg-color: theme('colors.neutral.800');
+
+    // tr
+    --v-table-tr-bg-color: theme('colors.neutral.800');
+
+    /* th */
+    --v-table-th-color: theme('colors.neutral.200');
+
+    /* th active */
+    --v-table-th-active-color: theme('colors.primary.500');
+
+    /* th active hover */
+    --v-table-th-active-hover-color: theme('colors.primary.600');
+
+    /* td */
+    --v-table-td-color: theme('colors.neutral.200');
+    --v-table-td-bg-color: theme('colors.neutral.800');
+
+    /* striped */
+    --v-table-striped-bg-color: theme('colors.neutral.700');
+
+    /* hover */
+    --v-table-hover-bg-color: theme('colors.neutral.700');
+  }
+
+  .v-table {
+    &-table,
+    &-tbody,
+    &--striped &-tbody {
+      @apply divide-neutral-700;
+    }
+
+    &--selectable &-td,
+    &--striped &-td,
+    &--hover &-td {
+      --v-table-td-bg-color: transparent;
+    }
+
+    /* loading */
+    &--loading &-td,
+    &--empty &-td {
+      --v-table-td-color: theme('colors.neutral.300');
+    }
+
+    &--bordered &-tr {
+      @apply divide-neutral-700;
+    }
+
+    &-th--sticky,
+    &-td--sticky {
+      @apply bg-neutral-800 drop-shadow-lg;
+    }
+  }
+}
diff --git a/packages/table/src/VDataTable.scss b/packages/table/src/VDataTable.scss
index 95b214eea..2fd75158c 100644
--- a/packages/table/src/VDataTable.scss
+++ b/packages/table/src/VDataTable.scss
@@ -19,6 +19,9 @@
   /* th active hover */
   --v-table-th-active-hover-color: theme('colors.primary.600');
 
+  // tr
+  --v-table-tr-bg-color: theme('colors.transparent');
+
   /* td */
   --v-table-td-color: theme('colors.gray.800');
   --v-table-td-bg-color: theme('colors.white');
@@ -119,12 +122,16 @@
     @apply divide-y;
   }
 
+  &-tr {
+    background-color: var(--v-table-tr-bg-color);
+  }
+
   /* striped */
   &--striped &-tbody {
     @apply divide-gray-200;
   }
 
-  &--striped &-tr:nth-child(odd) {
+  &--striped tbody &-tr:nth-child(odd) {
     background-color: var(--v-table-striped-bg-color);
   }
 
@@ -150,7 +157,10 @@
   /* loading */
   &--loading &-td,
   &--empty &-td {
-    @apply text-center text-gray-600 text-sm whitespace-nowrap;
+    --v-table-td-color: theme('colors.gray.500');
+    --v-table-td-font-size: theme('fontSize.sm');
+
+    @apply text-center whitespace-nowrap;
   }
 
   /* bordered */
diff --git a/packages/table/src/VDataTable.stories.ts b/packages/table/src/VDataTable.stories.ts
index 3f882471a..fa4fb230a 100644
--- a/packages/table/src/VDataTable.stories.ts
+++ b/packages/table/src/VDataTable.stories.ts
@@ -3,6 +3,10 @@ import {Meta, Story} from '@storybook/vue3';
 import {ref, watchEffect} from 'vue';
 import VDataTable from './VDataTable.vue';
 import type {VDataTableHeader} from './types';
+import '@gits-id/forms/src/forms.dark.scss';
+import '@gits-id/pagination/src/VPagination.dark.scss';
+import './VDataTable.dark.scss';
+import './VDataTablePagination.dark.scss';
 
 const states = ['active', 'inactive'];
 
@@ -463,3 +467,15 @@ export const StickyColumn: Story = (args) => ({
 </v-data-table>
   `,
 });
+
+export const DarkMode: Story<{}> = (args) => ({
+  components: {VDataTable},
+  setup() {
+    return {args};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
+  <VDataTable v-bind="args" />
+</main>
+`,
+});
diff --git a/packages/table/src/VDataTablePagination.dark.scss b/packages/table/src/VDataTablePagination.dark.scss
new file mode 100644
index 000000000..70ce1ba6c
--- /dev/null
+++ b/packages/table/src/VDataTablePagination.dark.scss
@@ -0,0 +1,23 @@
+.dark {
+  .v-data-table-pagination {
+    --v-data-table-pagination-bg-color: theme('colors.neutral.800');
+    --v-data-table-pagination-text-color: theme('colors.neutral.300');
+    --v-data-table-pagination-border-color: theme('colors.neutral.700');
+
+    .v-pagination {
+      --v-pagination-border-radius: theme('borderRadius.lg');
+      --v-pagination-gap: theme('gap.1');
+
+      /* item */
+      --v-pagination-item-border-radius: theme('borderRadius.lg');
+      --v-pagination-item-bg-color: theme('colors.transparent');
+      --v-pagination-item-border-color: theme('colors.transparent');
+      --v-pagination-item-text-color: theme('colors.neutral.200');
+
+      /* item disabled */
+      --v-pagination-item-disabled-bg-color: theme('colors.transparent');
+      --v-pagination-item-disabled-border-color: theme('colors.transparent');
+      --v-pagination-item-disabled-text-color: theme('colors.neutral.500');
+    }
+  }
+}
diff --git a/packages/table/src/VDataTablePagination.scss b/packages/table/src/VDataTablePagination.scss
index 9806c5236..ff16dbe83 100644
--- a/packages/table/src/VDataTablePagination.scss
+++ b/packages/table/src/VDataTablePagination.scss
@@ -1,4 +1,13 @@
+:root {
+  --v-data-table-pagination-bg-color: theme('colors.white');
+  --v-data-table-pagination-border-color: theme('borderColor.DEFAULT');
+  --v-data-table-pagination-text-color: theme('colors.gray.700');
+}
+
 .v-data-table-pagination {
+  background-color: var(--v-data-table-pagination-bg-color);
+  border-color: var(--v-data-table-pagination-border-color);
+
   @apply w-full
     px-6
     py-3
@@ -12,17 +21,20 @@
   &-items-per-page {
     border-radius: var(--v-input-border-radius);
     border: 1px solid var(--v-input-border-color);
+    background-color: var(--v-input-bg-color);
 
     @apply w-20 order-1 focus:ring-1 focus:border-primary-500 focus:ring-primary-500;
   }
 
   &-meta {
+    color: var(--v-data-table-pagination-text-color);
+
     @apply w-auto
       hidden
       sm:flex
       gap-1
       items-center
-      text-sm text-gray-700
+      text-sm
       order-2 flex-1;
 
     &-showing-text,
diff --git a/packages/table/src/VDataTablePagination.stories.ts b/packages/table/src/VDataTablePagination.stories.ts
index 11d357f63..e2d83f1f0 100644
--- a/packages/table/src/VDataTablePagination.stories.ts
+++ b/packages/table/src/VDataTablePagination.stories.ts
@@ -1,10 +1,13 @@
 import VDataTablePagination from './VDataTablePagination.vue';
 import {themeColors} from '@gits-id/utils/colors';
 import {Args, Meta, Story} from '@storybook/vue3';
-import { useForm } from 'vee-validate';
-import { ref } from 'vue';
-import '@gits-id/forms/src/forms.scss'
-import '@gits-id/pagination/src/VPagination.scss'
+import {useForm} from 'vee-validate';
+import {ref} from 'vue';
+import '@gits-id/forms/src/forms.scss';
+import '@gits-id/forms/src/forms.dark.scss';
+import '@gits-id/pagination/src/VPagination.scss';
+import '@gits-id/pagination/src/VPagination.dark.scss';
+import './VDataTablePagination.dark.scss';
 
 export default {
   title: 'Components/DataTablePagination',
@@ -123,8 +126,8 @@ export const RowsPerPageSlot: Story = (args) => ({
     VDataTablePagination,
   },
   setup() {
-    const page = ref(1)
-    const itemsPerPage = ref(10)
+    const page = ref(1);
+    const itemsPerPage = ref(10);
     const {values} = useForm({});
 
     return {args, values, page, itemsPerPage};
@@ -235,4 +238,16 @@ PassingPaginationProps.parameters = {
       `,
     },
   },
-};
\ No newline at end of file
+};
+
+export const DarkMode: Story<{}> = (args) => ({
+  components: {VDataTablePagination},
+  setup() {
+    return {args};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
+  <VDataTablePagination v-bind="args" />
+</main>
+`,
+});
diff --git a/packages/table/src/index.ts b/packages/table/src/index.ts
index 8794e46fc..bdcf69fb1 100644
--- a/packages/table/src/index.ts
+++ b/packages/table/src/index.ts
@@ -1,5 +1,7 @@
 import VDataTable from './VDataTable.vue';
 import VDataTablePagination from './VDataTablePagination.vue';
+import './VDataTable.dark.scss';
+import './VDataTablePagination.dark.scss';
 
 export * from './types';
 export {VDataTable, VDataTablePagination};
diff --git a/packages/tabs/src/VTabs.dark.scss b/packages/tabs/src/VTabs.dark.scss
new file mode 100644
index 000000000..35b45bec0
--- /dev/null
+++ b/packages/tabs/src/VTabs.dark.scss
@@ -0,0 +1,12 @@
+.dark {
+  .v-tabs {
+    /* item */
+    --v-tabs-item-text-color: theme('colors.neutral.400');
+
+    /* item active */
+    --v-tabs-item-active-text-color: theme('colors.neutral.200');
+
+    /* item hover */
+    --v-tabs-item-hover-text-color: theme('colors.neutral.200');
+  }
+}
diff --git a/packages/tabs/src/VTabs.stories.ts b/packages/tabs/src/VTabs.stories.ts
index a06936142..7a30d76aa 100644
--- a/packages/tabs/src/VTabs.stories.ts
+++ b/packages/tabs/src/VTabs.stories.ts
@@ -5,6 +5,7 @@ import VCard from '@gits-id/card';
 import {ref} from 'vue';
 import {Story} from '@storybook/vue3';
 import VTabsSlider from './VTabsSlider.vue';
+import './VTabs.dark.scss';
 
 function createItems(len = 20, additionalItem = {}) {
   return [...Array(20)].map((v, k) => ({
@@ -188,7 +189,9 @@ export const Removeable: Story<{}> = (args) => ({
   components: {VTabs, VTab, VTabsSlider},
   setup() {
     const selectedTab = ref(2);
-    const items = ref(new Array(10).fill({}).map((e, idx) => ({text: `Tab ${idx}`})));
+    const items = ref(
+      new Array(10).fill({}).map((e, idx) => ({text: `Tab ${idx}`})),
+    );
     return {args, selectedTab, items};
   },
   template: `
@@ -519,3 +522,15 @@ export const Next: Story<{}> = (args) => ({
     </VTabs>
   `,
 });
+
+export const DarkMode: Story = (args) => ({
+  components: {VTabs},
+  setup() {
+    return {args};
+  },
+  template: `
+  <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+    <VTabs v-bind='args'/>
+  </div>
+  `,
+});
diff --git a/packages/tabs/src/index.ts b/packages/tabs/src/index.ts
index b52b2baec..5df221b5b 100644
--- a/packages/tabs/src/index.ts
+++ b/packages/tabs/src/index.ts
@@ -1,3 +1,4 @@
+import './VTabs.dark.scss';
 export {default} from './VTabs.vue';
 export {default as VTabs} from './VTabs.vue';
 export {default as VTab} from './VTab.vue';
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 86d75244b..32fe7cfbf 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -65,6 +65,7 @@
     "./editor": "./editor.js",
     "./styles": "./dist/style.css",
     "./styles.scss": "./src/style.scss",
+    "./styles.dark": "./src/style.dark.scss",
     "./src/*": "./src/*",
     "./*": "./*"
   },
diff --git a/packages/ui/src/style.dark.scss b/packages/ui/src/style.dark.scss
new file mode 100644
index 000000000..159e68c25
--- /dev/null
+++ b/packages/ui/src/style.dark.scss
@@ -0,0 +1,33 @@
+// CSS
+@import '@gits-id/editor/dist/style.css';
+@import '@gits-id/menu/dist/style.css';
+@import '@gits-id/tooltip/dist/style.css';
+@import '@gits-id/theme/transition.css';
+// disabled for now.
+// @import '@gits-id/stepper/dist/style.css';
+// SCSS
+@import '@gits-id/app-bar/src/VAppBar.dark.scss';
+@import '@gits-id/alert/src/VAlert.dark.scss';
+@import '@gits-id/autocomplete/src/VAutocomplete.dark.scss';
+@import '@gits-id/avatar/src/Avatar.dark.scss';
+@import '@gits-id/badge/src/VBadge.dark.scss';
+@import '@gits-id/breadcrumbs/src/VBreadcrumbs.dark.scss';
+@import '@gits-id/button/src/VBtn.dark.scss';
+@import '@gits-id/card/src/VCard.dark.scss';
+@import '@gits-id/dropdown/src/Dropdown.dark.scss';
+@import '@gits-id/forms/src/forms.dark.scss';
+@import '@gits-id/forms/src/checkbox/VCheckbox.dark.scss';
+@import '@gits-id/forms/src/radio/VRadio.dark.scss';
+@import '@gits-id/list/src/List.dark.scss';
+@import '@gits-id/menus/src/VMenus.dark.scss';
+@import '@gits-id/modal/src/VModal.dark.scss';
+@import '@gits-id/multi-select/src/VMultiSelect.dark.scss';
+@import '@gits-id/nav-drawer/src/NavDrawer.dark.scss';
+@import '@gits-id/pagination/src/VPagination.dark.scss';
+@import '@gits-id/progress-bar/src/VProgressBar.dark.scss';
+@import '@gits-id/select/src/VSelect.dark.scss';
+@import '@gits-id/shimmer/src/Shimmer.dark.scss';
+@import '@gits-id/switch/src/VSwitch.dark.scss';
+@import '@gits-id/table/src/VDataTable.dark.scss';
+@import '@gits-id/table/src/VDataTablePagination.dark.scss';
+@import '@gits-id/tabs/src/VTabs.dark.scss';