Este texto fue traducido usando IA. Si deseas ver el texto original en inglés, haz clic aquí.
El modo oscuro, también conocido como «modo nocturno» o modo «claro sobre oscuro», es un esquema de colores de sitio web que establece el fondo de la página que estás viendo en un color oscuro, generalmente negro o gris oscuro, y el texto en un color claro, normalmente blanco. Algunos usuarios consideran que este esquema de colores reduce la fatiga visual.
WordPress no tiene una configuración de modo oscuro integrada. Sin embargo, puedes aplicar un formato de estilo de «modo oscuro» a tu sitio personalizando los colores de tu tema o con un plugin. A continuación, analizaremos ambos enfoques.
Si deseas aplicar el modo oscuro como esquema de colores permanente en tu sitio, puedes editar la configuración de colores del sitio para crear este efecto. La forma de hacerlo dependerá de si tu sitio utiliza el Editor del sitio o el Personalizador para los cambios visuales a nivel de todo el sitio.
Algunos temas que son compatibles con el Editor del sitio tendrán un estilo de «modo oscuro» integrado, ya sea como predeterminado o como una paleta de colores personalizada predefinida.
Para encontrar temas con un estilo de «modo oscuro» integrado, sigue estos pasos:
- Inicia sesión en tu escritorio de WordPress.com.
- Navega a Apariencia → Temas (o Apariencia → Mostrador de temas si usas WP Admin).
- Busca temas con «dark» como parámetro de búsqueda.
Puedes previsualizar diferentes combinaciones de estilo para muchos temas haciendo clic en las muestras de color en los resultados de búsqueda de temas o en la página de información del tema:
Si tu tema no tiene una paleta de modo oscuro predefinida, puedes modificar los colores del tema usando Estilos. Esta función es accesible seleccionando Estilos en la barra lateral izquierda del editor del sitio o desde el icono de Estilos mientras editas una plantilla, patrón, parte de plantilla o página en el editor del sitio.
Desde Estilos, puedes definir una paleta de colores para todo tu sitio y personalizar los colores utilizados tanto para el fondo como para el texto primario, secundario y terciario de tu sitio. También puedes definir colores personalizados para los colores de fondo y primer plano, ya sea usando el selector de color o introduciendo manualmente códigos hexadecimales.
Al configurar un estilo de modo oscuro, querrás usar un color oscuro para el fondo. El negro (#000000) y los grises muy oscuros (#121212 o #181818) son los más comunes, pero también puedes probar versiones oscuras de colores como el azul (#07032e) o el verde (#031c00).
Para la tipografía, usa un color más claro que contraste bien con el fondo oscuro. Para fondos negros o gris oscuro, puedes considerar el blanco (#ffffff) o un gris muy claro (#d1d1d1), mientras que para fondos de color, podrías optar por una versión mucho más clara del mismo color, como un azul claro (#dcd9fc) o verde (#ddffd9).
También vale la pena mencionar que muchas fuentes de diseño recomiendan no colocar negro puro (#000000) y blanco puro (#FFFFFF) uno contra el otro, ya sea en modo oscuro o en «modo claro», ya que este contraste tan marcado puede causar mayor fatiga visual. Como siempre, trabaja con lo que te parezca mejor.
Aprende más sobre cómo usar Estilos para configurar tu esquema de colores.
Puedes modificar los ajustes de color para los temas clásicos, que utilizan el Personalizador para cambios visuales en todo el sitio, yendo a Apariencia → Personalizar y haciendo clic en Colores o Colores y fondos, según el tema. Desde aquí, puedes ajustar el fondo del tema de tu sitio a un color oscuro y el texto a un color claro, como se explicó anteriormente.
Con algunos temas clásicos, es posible que necesites añadir CSS personalizado para agregar estilos de «modo oscuro». Ten en cuenta que añadir estos estilos a tu sitio está fuera del alcance de nuestro soporte y puede requerir un diseñador.
Aprende más sobre cómo usar el Personalizador para configurar tu esquema de colores.
Puedes encontrar varios plugins en el Marketplace que añadirán el modo oscuro a tu sitio, como WP Dark Mode y Droit Dark Mode. Además de aplicar el modo oscuro a tu sitio, muchos de estos plugins también pueden aplicar el modo oscuro al panel de WP Admin de tu sitio.
