diff --git a/components/index/hero/Left.vue b/components/index/hero/Left.vue
index 6540bcb7..9e5f62cf 100644
--- a/components/index/hero/Left.vue
+++ b/components/index/hero/Left.vue
@@ -42,7 +42,7 @@ const { locale, fallbackLocale } = useI18n();
 const localePath = useGLocalePath();
 const showTagline = ref(false);
 const colorMode = useColorMode();
-const mobileScreenShot = computed(() => (colorMode.preference === 'dark') ? '/img/hero/misskey-mobile-dark.png' : '/img/hero/misskey-mobile-light.png');
+const mobileScreenShot = computed(() => (colorMode.value === 'dark') ? '/img/hero/misskey-mobile-dark.png' : '/img/hero/misskey-mobile-light.png');
 
 // お知らせ欄にブログが来る可能性もあるので
 const localeState = useState('miHub_blog_originalLocale', () => locale.value);
diff --git a/components/index/hero/Right.vue b/components/index/hero/Right.vue
index 6133d1fd..07c9cb8c 100644
--- a/components/index/hero/Right.vue
+++ b/components/index/hero/Right.vue
@@ -11,7 +11,7 @@
 <script setup>
 const colorMode = useColorMode();
 const screenshots = computed(() => {
-    if (colorMode.preference === 'dark') {
+    if (colorMode.value === 'dark') {
         return {
             desktop: '/img/hero/misskey-dark.png',
             mobile: '/img/hero/misskey-mobile-dark.png',