Dark Mode ya no es solo una característica estética sino una expectativa de los usuarios. Aprende cómo crear un selector de modo oscuro elegante para tu sitio web con Vite, React y TailwindCSS en pocos minutos.
Paso 1: Preparar el proyecto. Ejecuta los siguientes comandos para crear el proyecto y añadir TailwindCSS: npm create vite@latest dark-mode-toggle; cd dark-mode-toggle; npm install; npm install -D tailwindcss postcss autoprefixer; npx tailwindcss init -p
Configura Tailwind para que use la clase dark. En tailwind.config.cjs indica darkMode como class y añade las rutas de contenido, por ejemplo content: [./index.html, ./src/**/*.{js,ts,jsx,tsx}]
Paso 2: Lógica del selector. En React utiliza useState y useEffect para leer y guardar la preferencia del tema en localStorage y para añadir o quitar la clase dark del elemento raiz document.documentElement. Ejemplo conceptual: const [darkMode, setDarkMode] = useState(localStorage.getItem(theme) === dark); useEffect(() => { if (darkMode) { document.documentElement.classList.add(dark); localStorage.setItem(theme, dark); } else { document.documentElement.classList.remove(dark); localStorage.setItem(theme, light); } }, [darkMode]); En la interfaz muestra un boton que alterna darkMode con setDarkMode(!darkMode) y aplica clases de Tailwind para transiciones suaves y colores en light y dark
Paso 3: Probar la aplicación. Ejecuta npm run dev y abre la URL que indique Vite para ver tu selector de modo oscuro funcionando. La preferencia se guarda en el navegador y los estilos cambian con una transición fluida usando utilidades de Tailwind.
Qué consigues con este tutorial: selector funcional para tema claro y oscuro; preferencia persistente en localStorage; transición suave con utilidades de Tailwind; base lista para ampliar con iconos, animaciones o detección de preferencia del sistema.
Sobre Q2BSTUDIO: Somos Q2BSTUDIO empresa de desarrollo de software y aplicaciones a medida especializada en soluciones modernas. Ofrecemos servicios de software a medida, aplicaciones a medida, integración de inteligencia artificial e implementación de agentes IA para empresas. También somos expertos en ciberseguridad y en despliegue de servicios cloud AWS y Azure. Ayudamos a organizaciones a sacar valor con servicios inteligencia de negocio y herramientas como Power BI para visualización y análisis.
Cómo puede ayudar Q2BSTUDIO a tu proyecto: diseñamos software a medida que incluye capacidades de inteligencia artificial para automatizar procesos y mejorar decisiones, implementamos medidas de ciberseguridad para proteger datos y aplicaciones, ofrecemos arquitecturas y migraciones en servicios cloud aws y azure, y desplegamos soluciones de inteligencia de negocio y power bi para convertir datos en insights accionables.
Palabras clave para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.
Consejos finales: adapta la lógica del selector para detectar la preferencia del sistema operativo si lo deseas, añade animaciones y accesibilidad para teclados y lectores de pantalla, y versiona la configuración para poder reutilizarla en otros proyectos de Q2BSTUDIO.
Si necesitas que Q2BSTUDIO desarrolle o integre esta funcionalidad en tu producto, contáctanos para una consultoría personalizada y un plan de implementación a medida.
