diff --git a/docs/.vitepress/theme/components/base/Select.vue b/docs/.vitepress/theme/components/base/Select.vue
index 4d8b34d1b..cb97280fb 100644
--- a/docs/.vitepress/theme/components/base/Select.vue
+++ b/docs/.vitepress/theme/components/base/Select.vue
@@ -1,21 +1,15 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import {
-  Listbox,
-  ListboxLabel,
-  ListboxButton,
-  ListboxOptions,
-  ListboxOption,
-} from '@headlessui/vue';
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
 import Icon from '@lucide/vue/src/Icon';
 import { chevronsUpDown, check } from '../../../data/iconNodes';
+import SelectIcon from './SelectIcon.vue';
 
 defineProps<{
   id?: string;
-  items?: { name: string; icon: string }[];
+  items?: { name: string; route: string; icon: string; iconDark?: string }[];
 }>();
 
-const selected = defineModel<{ name: string; icon: string }>();
+const selected = defineModel<{ name: string; icon: string; iconDark?: string }>();
 </script>
 
 <template>
@@ -25,12 +19,7 @@ const selected = defineModel<{ name: string; icon: string }>();
         class="select-button"
         :id="id"
       >
-        <img
-          :src="selected.icon"
-          :class="{ 'select-item-icon': true }"
-          :alt="`${selected.name} logo`"
-          loading="lazy"
-        />
+        <SelectIcon :item="selected" />
         <span class="select-text">{{ selected.name }}</span>
         <span class="select-icon">
           <Icon
@@ -55,12 +44,7 @@ const selected = defineModel<{ name: string; icon: string }>();
             as="template"
           >
             <li :class="['select-option', { active, selected }]">
-              <img
-                :src="item.icon"
-                :class="{ 'select-item-icon': true }"
-                :alt="`${item.name} logo`"
-                loading="lazy"
-              />
+              <SelectIcon :item="item" />
               <span :class="['option-text', { selected }]">{{ item.name }}</span>
               <span
                 v-if="selected"
@@ -126,12 +110,6 @@ const selected = defineModel<{ name: string; icon: string }>();
   padding-right: 0.5rem;
 }
 
-.select-item-icon {
-  object-fit: contain;
-  width: 24px;
-  height: 24px;
-}
-
 .chevron-icon {
   height: 1.25rem;
   width: 1.25rem;
diff --git a/docs/.vitepress/theme/components/base/SelectIcon.vue b/docs/.vitepress/theme/components/base/SelectIcon.vue
new file mode 100644
index 000000000..eaa086844
--- /dev/null
+++ b/docs/.vitepress/theme/components/base/SelectIcon.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const { item } = defineProps<{
+  item: {
+    name: string;
+    icon: string;
+    iconDark?: string;
+  };
+}>();
+</script>
+
+<template>
+  <img
+    :src="item.icon"
+    :class="{ 'select-item-icon': true, light: item.iconDark }"
+    :alt="`${item.name} logo`"
+    loading="lazy"
+  />
+  <img
+    v-if="item.iconDark"
+    :src="item.iconDark"
+    :alt="`${item.name} logo`"
+    class="select-item-icon dark"
+  />
+</template>
+
+<style scoped>
+.select-item-icon {
+  object-fit: contain;
+  width: 24px;
+  height: 24px;
+}
+
+html.dark .select-item-icon.light {
+  display: none;
+}
+
+html:not(.dark) .select-item-icon.dark {
+  display: none;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/guide/FrameworkSelect.vue b/docs/.vitepress/theme/components/guide/FrameworkSelect.vue
index b44bdc06f..fa6f104f7 100644
--- a/docs/.vitepress/theme/components/guide/FrameworkSelect.vue
+++ b/docs/.vitepress/theme/components/guide/FrameworkSelect.vue
@@ -23,7 +23,12 @@ const frameworks = [
     icon: '/framework-logos/react-native.svg',
     route: '/guide/react-native/',
   },
-  { name: 'Astro', icon: '/framework-logos/astro-dark.svg', route: '/guide/astro/' },
+  {
+    name: 'Astro',
+    icon: '/framework-logos/astro.svg',
+    iconDark: '/framework-logos/astro-dark.svg',
+    route: '/guide/astro/',
+  },
   { name: 'Static', icon: '/framework-logos/svg.svg', route: '/guide/static/' },
 ];
 
@@ -43,13 +48,11 @@ const selected = computed(() => {
   return current || fallbackFramework.value;
 });
 
-function onSelectFramework(item: { name: string; icon: string; route: string }) {
+function onSelectFramework(item: { name: string; icon: string; iconDark?: string; route: string }) {
   fallbackFramework.value = item;
   if (item.route !== router.route.path) {
     const likeRoute = router.route.path.replace(selected.value.route, item.route);
 
-    console.log(likeRoute);
-
     const hasRoute = sidebar[item.route]?.some((section) =>
       section?.items?.some(({ link }) => link === likeRoute),
     );