diff --git a/packages/nuxt-ui-vue/src/App.vue b/packages/nuxt-ui-vue/src/App.vue
index 96e2f9e..e8a8686 100755
--- a/packages/nuxt-ui-vue/src/App.vue
+++ b/packages/nuxt-ui-vue/src/App.vue
@@ -1,7 +1,39 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 
+import { useDark, useToggle } from '@vueuse/core'
+
+const isDark = useDark()
+
+const toggleTheme = useToggle(isDark)
+
+const searchTerm = ref('')
 </script>
 
 <template>
-  <div />
+  <div>
+    <button @click="toggleTheme()">
+      Theme
+    </button>
+  </div>
+  <div class="dark:bg-black grid place-items-center min-h-screen w-full">
+    <UInput
+      v-model="searchTerm" color="white" :variants="{
+        'my-variant': {
+          placeholder: 'dark:bg-transparent',
+        },
+      }" :variant="['my-variant']" name="searchTerm" placeholder="Search..." icon="heroicons:magnifying-glass-20-solid"
+    >
+      <template #trailing>
+        <UButton
+          v-show="searchTerm !== ''"
+          color="gray"
+          intent="link"
+          icon="heroicons:x-mark-20-solid"
+          :padded="false"
+          @click="searchTerm = ''"
+        />
+      </template>
+    </UInput>
+  </div>
 </template>
diff --git a/packages/nuxt-ui-vue/src/theme/nuxtLabsTheme.ts b/packages/nuxt-ui-vue/src/theme/nuxtLabsTheme.ts
index cb7368e..fdc0689 100755
--- a/packages/nuxt-ui-vue/src/theme/nuxtLabsTheme.ts
+++ b/packages/nuxt-ui-vue/src/theme/nuxtLabsTheme.ts
@@ -630,10 +630,10 @@ export default {
       },
       color: {
         white: {
-          outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400',
+          outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-800',
         },
         gray: {
-          outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400',
+          outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-800',
         },
       },
       intent: {
@@ -694,10 +694,10 @@ export default {
       },
       color: {
         white: {
-          outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400',
+          outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-800',
         },
         gray: {
-          outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400',
+          outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-800',
         },
       },
       intent: {