Alternar Modo Oscuro con un Atajo de Teclado en Nuxt UI

Si estás usando Nuxt UI en tu proyecto, cambiar entre modo claro y oscuro no tiene que ser una tarea manual. Con solo unas pocas líneas de código, podés añadir un atajo de teclado para cambiar el tema instantáneamente — sin necesidad de librerías adicionales.

Ejemplo: Cambiar el tema con Meta+Shift+L

Podés definir un atajo personalizado usando defineShortcuts, que está integrado en Nuxt UI. Acá te muestro cómo hacerlo dentro de tu archivo app.vue:

<script setup lang="ts">
const colorMode = useColorMode()

defineShortcuts({
  meta_shift_l() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})
</script>

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

¿Qué está pasando acá?

• useColorMode() te da acceso al tema actual y te permite cambiar la preferencia.
• defineShortcuts() registra un nuevo atajo de teclado — en este caso, Meta+Shift+L (⌘+Shift+L en Mac o Ctrl+Shift+L en Windows/Linux).
• Cuando se activa, cambia el tema de oscuro a claro o viceversa.

Entendiendo preference vs value

Puede ser un poco confuso al principio, pero hay una distinción importante entre colorMode.preference y colorMode.value:

• colorMode.preference es lo que querés cambiar. Esto representa la preferencia del usuario y puede ser 'light', 'dark', o 'system'.
• colorMode.value es para obtener el modo actual activo. Incluso si la preferencia está configurada como 'system', colorMode.value te dirá si realmente estás en modo oscuro o claro basado en la configuración del sistema.

Por eso usamos colorMode.value para verificar el estado actual y colorMode.preference para establecer la nueva preferencia en nuestra función de alternado.

¡Listo!

Con solo este fragmento de código, tus usuarios (o vos mismo durante el desarrollo) pueden cambiar rápidamente entre temas sin tener que usar la interfaz. Una excelente manera de mejorar la UX y productividad del desarrollador con código mínimo.

Es algo simple pero una vez que lo tenés y sabés que está, lo usás todo el tiempo.