diff --git a/nuxt4/app/composables/useTheme.ts b/nuxt4/app/composables/useTheme.ts
index 6a87794..4badfab 100644
--- a/nuxt4/app/composables/useTheme.ts
+++ b/nuxt4/app/composables/useTheme.ts
@@ -23,6 +23,32 @@ export const useTheme = () => {
   // Computed para saber si es modo noche
   const isNight = computed(() => currentTheme.value === 'night')
 
+  // Función para aplicar la clase dark al HTML
+  const applyThemeClass = (theme: Theme) => {
+    if (import.meta.client && typeof window !== 'undefined') {
+      const html = document.documentElement
+      if (theme === 'night') {
+        html.classList.add('dark')
+        html.classList.remove('light')
+      } else {
+        html.classList.add('light')
+        html.classList.remove('dark')
+      }
+    }
+  }
+
+  // Aplicar clase inicial al montar
+  if (import.meta.client) {
+    onMounted(() => {
+      applyThemeClass(currentTheme.value)
+    })
+
+    // Sincronizar clase cuando cambie el tema
+    watch(currentTheme, (newTheme) => {
+      applyThemeClass(newTheme)
+    })
+  }
+
   // Alternar tema
   const toggleTheme = () => {
     currentTheme.value = currentTheme.value === 'day' ? 'night' : 'day'