\n
\u00bfQu\u00e9 es el modo oscuro de WordPress?<\/h2>\n
El modo oscuro de WordPress consiste en dar a los visitantes de tu sitio web la opci\u00f3n de elegir entre un tema de estilo \u00abclaro\u00bb y un tema de estilo \u00aboscuro\u00bb.<\/p>\n
Puede que ya est\u00e9s familiarizado con este concepto por el sistema operativo de tu ordenador o smartphone. La mayor\u00eda de los sistemas operativos te permiten elegir entre los modos claro y oscuro para la interfaz, y algunos incluso te permiten cambiar autom\u00e1ticamente entre los modos claro y oscuro en funci\u00f3n de la hora del d\u00eda.<\/p>\n
Es la misma idea b\u00e1sica para el modo oscuro de WordPress. Los visitantes pueden utilizar un bot\u00f3n u otro elemento de la interfaz para alternar f\u00e1cilmente entre los modos claro y oscuro. El contenido ser\u00e1 exactamente el mismo en ambos modos \u2014 la \u00fanica diferencia es la combinaci\u00f3n de colores.<\/p>\n
Aqu\u00ed tienes un ejemplo de nuestro sitio de WordPress de prueba en su modo \u00abclaro\u00bb predeterminado:<\/p>\n A continuaci\u00f3n, aqu\u00ed tienes exactamente el mismo sitio en modo \u00aboscuro\u00bb:<\/p>\n Nuestro sitio de prueba elegir\u00e1 autom\u00e1ticamente qu\u00e9 versi\u00f3n mostrar en funci\u00f3n de las preferencias del sistema operativo de cada visitante. Luego, los usuarios tambi\u00e9n pueden ajustar manualmente sus experiencias utilizando el widget de la esquina inferior derecha.<\/p>\n Hay muchas razones por las que puedes plantearte incluir el modo oscuro en tu sitio web. Pueden ir desde simples preferencias del usuario hasta hacer tu sitio web m\u00e1s accesible y crear una experiencia m\u00e1s saludable para los visitantes.<\/p>\n Vamos a repasarlas…<\/p>\n Una gran ventaja de ofrecer el modo oscuro es que puede ayudar a que tu sitio web sea m\u00e1s accesible<\/a>.<\/p>\n A veces abreviada como a11y, la accesibilidad se refiere a la pr\u00e1ctica de hacer que tu sitio web sea utilizable por el mayor n\u00famero posible de personas, incluidas las personas con discapacidad.<\/p>\n Un ejemplo de accesibilidad es garantizar que las personas que navegan por tu sitio con lectores de pantalla asistidos puedan seguir teniendo una buena experiencia.<\/p>\n Al margen de que en general sea bueno facilitar que todo el mundo disfrute de tu sitio web, la accesibilidad es tambi\u00e9n un requisito legal en muchas jurisdicciones. Por ejemplo, existe la Ley de Estadounidenses con Discapacidades (Americans With Disabilities Act, ADA) y la Ley Europea de Accesibilidad<\/a>.<\/p>\n Aunque ofrecer el modo oscuro no forma parte directamente de las Pautas de Accesibilidad al Contenido en la Web (WCAG)<\/a>, puede mejorar la accesibilidad de otras maneras.<\/p>\n \u00c9stas son algunas \u00e1reas notables en las que el modo oscuro puede mejorar la accesibilidad:<\/p>\n Dicho esto, el modo oscuro no es la mejor opci\u00f3n de accesibilidad en todas las situaciones. Por ejemplo, las personas que padecen astigmatismo<\/a> pueden tener dificultades para leer texto claro sobre un fondo oscuro porque puede provocar un efecto borroso llamado \u00abhalaci\u00f3n\u00bb. \u00c9sta es una de las razones por las que puede ser beneficioso dar a los usuarios la opci\u00f3n de elegir entre el modo claro y el oscuro.<\/p>\n Ofrecer un modo oscuro del sitio web tambi\u00e9n puede ayudar a crear una experiencia m\u00e1s saludable para sus visitantes de diferentes maneras.<\/p>\n En primer lugar, el modo oscuro puede ayudar a los visitantes a mejorar su higiene del sue\u00f1o, sobre todo si navegan antes de irse a la cama. Los expertos en sue\u00f1o recomiendan evitar las luces brillantes<\/a> en las horas previas a acostarse.<\/p>\n Cuanto m\u00e1s claro y brillante sea tu sitio web, peor ser\u00e1 para la higiene del sue\u00f1o de tus visitantes. Ofreciendo el modo oscuro, puedes permitir que tus visitantes sigan interactuando con tu sitio de WordPress con un impacto m\u00ednimo en sus horarios de sue\u00f1o.<\/p>\n Muchas implementaciones del modo oscuro tambi\u00e9n permiten activarlo autom\u00e1ticamente en funci\u00f3n de las preferencias del sistema operativo de cada visitante. Si un visitante configura su sistema operativo para cambiar autom\u00e1ticamente al modo oscuro cuando se acerca la hora de acostarse, tu sitio web puede seguir ese horario.<\/p>\n El modo oscuro tambi\u00e9n puede ser m\u00e1s c\u00f3modo para la vista de los visitantes y causar menos fatiga ocular. Por ejemplo, en un estudio de la Universidad de Florida Central (UCF)<\/a>, los autores del estudio descubrieron que \u00abla fatiga visual de los participantes era significativamente menor con el modo oscuro que con el modo claro\u00bb<\/p>\n Adem\u00e1s, los participantes ten\u00edan mayor agudeza visual en el modo oscuro y completaron las pruebas del estudio \u00abcon un n\u00famero significativamente menor de errores en el modo oscuro que en el modo claro.\u00bb<\/p>\n Aunque no es una ventaja para todos los visitantes, otra peque\u00f1a ventaja de ofrecer el modo oscuro es que consumir\u00e1 menos energ\u00eda en las pantallas OLED. Como las pantallas OLED son capaces de apagar p\u00edxeles individuales en lugar de iluminar toda la pantalla, las pantallas OLED necesitan menos energ\u00eda para mostrar p\u00edxeles de color oscuro.<\/p>\n El ahorro exacto de energ\u00eda depender\u00e1 de la configuraci\u00f3n del brillo de la pantalla del usuario, pero puede oscilar entre un modesto 3%-9% con brillo bajo y un mucho mayor 39%-47% cuando el brillo de la pantalla del usuario est\u00e1 ajustado m\u00e1s alto.<\/p>\n Estas cifras proceden de un estudio de la Universidad de Purdue<\/a> que analiz\u00f3 el consumo de energ\u00eda de la pantalla con distintos niveles de brillo.<\/p>\n M\u00e1s all\u00e1 de las ventajas mencionadas, tambi\u00e9n hay que tener en cuenta que es posible que algunos de tus visitantes simplemente quieran utilizar el modo oscuro debido a sus preferencias personales.<\/p>\n Estas preferencias pueden ser el resultado de algunas de las ventajas enumeradas, o puede que alguien prefiera el modo oscuro por sus propias razones.<\/p>\n Ofreciendo el modo oscuro como opci\u00f3n, puedes crear una mejor experiencia de usuario<\/a> para estos visitantes.<\/p>\n Si te convence la idea de a\u00f1adir el modo oscuro a WordPress, puedes hacerlo de varias maneras.<\/p>\n A continuaci\u00f3n, repasaremos cuatro opciones diferentes:<\/p>\n Si no quieres trabajar con c\u00f3digo, una de las formas m\u00e1s sencillas de a\u00f1adir el modo oscuro a tu sitio web es utilizar un plugin de modo oscuro para WordPress.<\/p>\n Lo que hace que la mayor\u00eda de estos plugins sean tan f\u00e1ciles de usar es que b\u00e1sicamente son plug-and-play. Puedes tener el modo oscuro funcionando en cuesti\u00f3n de minutos y luego ajustar las cosas si es necesario.<\/p>\n Por ejemplo, as\u00ed es como funciona una de las opciones m\u00e1s populares \u2014 el plugin\u00a0WP Dark Mode<\/a> gratuito de WordPress.org.<\/p>\n Tras activar el plugin, tendr\u00e1s al instante un modo oscuro operativo en tu sitio web. De hecho, es el mismo plugin que hemos utilizado para las capturas de pantalla de ejemplo anteriores.<\/p>\n Elegir\u00e1 autom\u00e1ticamente qu\u00e9 versi\u00f3n utilizar en funci\u00f3n de las preferencias del sistema operativo de cada visitante. Luego, los usuarios pueden cambiar manualmente entre los modos utilizando un widget flotante en la esquina inferior derecha.<\/p>\n Si quieres ajustar c\u00f3mo funciona el modo oscuro, puedes ir a la configuraci\u00f3n del plugin. All\u00ed, puedes ajustar los estilos, seleccionar c\u00f3mo elegir la experiencia predeterminada y mucho m\u00e1s.<\/p>\n Si te interesa la v\u00eda de los plugins, aqu\u00ed tienes algunos plugins gratuitos para el modo oscuro que puedes tener en cuenta:<\/p>\n Dado que estos plugins pueden tener un gran efecto en tu sitio frontend, te recomendamos encarecidamente que los pruebes antes de activarlos en tu sitio web en producci\u00f3n.<\/p>\n Si utilizas el alojamiento administrado para WordPress de Kinsta<\/a>, puedes utilizar la funcionalidad staging de Kinsta<\/a> para probar f\u00e1cilmente estos plugins en una versi\u00f3n sandbox segura de tu sitio.<\/p>\n Otra forma de acceder al modo oscuro sin c\u00f3digo es elegir un tema de WordPress con funcionalidad de modo oscuro integrada.<\/p>\n Por ejemplo, el tema gratuito Kanso de Rich Tabor<\/a> incluye su propia funcionalidad integrada de modo oscuro, que puedes ver en acci\u00f3n en el sitio web personal de Rich<\/a>.<\/p>\n Si ya has creado tu sitio con otro tema, probablemente no merezca la pena cambiar de tema<\/a> s\u00f3lo para acceder al modo oscuro. Sin embargo, si a\u00fan est\u00e1s trabajando en la construcci\u00f3n de tu sitio y el modo oscuro es importante para ti, puede que merezca la pena incluirlo en tu lista de funcionalidades a tener en cuenta al elegir un tema de WordPress<\/a>.<\/p>\n Si te sientes c\u00f3modo trabajando con c\u00f3digo, tambi\u00e9n existen bibliotecas JavaScript<\/a> predise\u00f1adas que puedes utilizar para a\u00f1adir el modo oscuro a tu sitio web.<\/p>\n O, si eres desarrollador de WordPress, tambi\u00e9n puedes utilizar estas bibliotecas para a\u00f1adir f\u00e1cilmente el modo oscuro a un plugin o tema que est\u00e9s desarrollando<\/a>. De hecho, algunos de los plugins de modo oscuro de WordPress.org se basan en estas bibliotecas.<\/p>\n Puedes encontrar varias bibliotecas diferentes de modo oscuro, pero aqu\u00ed tienes dos de las opciones m\u00e1s populares:<\/p>\n Si quieres utilizar cualquiera de estas librer\u00edas, te recomendamos encarecidamente que las pruebes en un sitio staging antes de a\u00f1adir c\u00f3digo a tu sitio web en producci\u00f3n. De nuevo, si alojas tu sitio de WordPress con Kinsta<\/a>, puedes utilizar la funcionalidad staging integrada de Kinsta.<\/p>\n Darkmode.js<\/a> utiliza VanillajS y CSS En la primera visita de un usuario, elegir\u00e1 el modo en funci\u00f3n de las preferencias de su sistema operativo, y tambi\u00e9n soporta el almacenamiento local para que las preferencias de los visitantes se guarden para futuras visitas. Puedes ver una vista previa en acci\u00f3n en la p\u00e1gina darkmode.js enlazada m\u00e1s arriba.<\/p>\n Dado que utiliza Drkmd.js<\/a> utiliza un enfoque ligeramente diferente. En lugar de utilizar CSS Tambi\u00e9n te permite a\u00f1adir f\u00e1cilmente tu propio conmutador para cambiar entre los modos. Para ello, a\u00f1ade el atributo Tambi\u00e9n incluye otras funcionalidades \u00fatiles, como la capacidad de detectar autom\u00e1ticamente las preferencias del sistema operativo de los usuarios y guardar las elecciones de los usuarios en el almacenamiento local.<\/p>\n Adem\u00e1s de utilizar una biblioteca JavaScript, tambi\u00e9n hay otras soluciones basadas en c\u00f3digo que puedes implementar para a\u00f1adir el modo oscuro a tu sitio.<\/p>\n Normalmente, funcionan aplicando un conjunto de reglas CSS para el modo claro y otro conjunto de reglas para el modo oscuro.<\/p>\n Una opci\u00f3n ser\u00eda hacerlo con jQuery, como se documenta en este tutorial<\/a>. B\u00e1sicamente, a\u00f1adir\u00e1s reglas CSS para los modos claro y oscuro.<\/p>\n Luego, puedes a\u00f1adir un bot\u00f3n o alg\u00fan tipo de interruptor para activar el modo oscuro. Si un usuario activa ese interruptor, puedes utilizar JavaScript para cambiar qu\u00e9 clases CSS utilizar. El tutorial enlazado m\u00e1s arriba lo consigue con jQuery y los m\u00e9todos Tambi\u00e9n puedes ser m\u00e1s complejo si quieres. Por ejemplo, en este tutorial basado en JavaScript<\/a>, el tutorial te lleva a a\u00f1adir dos mejoras principales al modo oscuro de tu sitio:<\/p>\n En general, probablemente sea m\u00e1s sencillo utilizar una de las bibliotecas JavaScript de modo oscuro mencionadas anteriormente. Pero si no quieres hacerlo, estos m\u00e9todos ofrecen otra alternativa basada en c\u00f3digo.<\/p>\n Hasta ahora, nos hemos centrado en c\u00f3mo a\u00f1adir el modo oscuro al frontend de tu sitio web WordPress. Sin embargo, puede que tambi\u00e9n te interese a\u00f1adir un modo oscuro al panel de control de WordPress para que puedas gestionar tu sitio con una interfaz m\u00e1s f\u00e1cil de usar.<\/p>\n Despu\u00e9s de todo, \u00bfpor qu\u00e9 deber\u00edan ser los visitantes de tu sitio los \u00fanicos capaces de acceder a las ventajas de las que hemos hablado anteriormente?<\/p>\n Si quieres a\u00f1adir el modo oscuro a tu panel de control de WordPress, la opci\u00f3n m\u00e1s sencilla es utilizar un plugin. Encontrar\u00e1s dos categor\u00edas principales de plugins:<\/p>\n Si quieres mantener exactamente el mismo panel de control de WordPress pero a\u00f1adir una opci\u00f3n de modo oscuro, puedes considerar el plugin Dark Mode for WP Dashboard<\/a>, que tiene el aspecto de la siguiente captura de pantalla.<\/p>\n Algunos de los anteriores plugins de modo oscuro para el frontend tambi\u00e9n ofrecen funcionalidades para activar el modo oscuro en el panel de control de WordPress, como el plugin WP Dark Mode.<\/p>\n Si quieres probar una experiencia de panel de control completamente nueva con una opci\u00f3n de modo oscuro, puedes considerar estos plugins:<\/p>\n A\u00f1adir el modo oscuro como opci\u00f3n en tu sitio web puede mejorar su accesibilidad, ofrecer una experiencia m\u00e1s saludable a los visitantes, reducir el consumo de energ\u00eda en algunas pantallas y, en general, satisfacer las preferencias personales de algunos usuarios.<\/p>\n Si quieres a\u00f1adir el modo oscuro a WordPress, tienes muchas opciones. Para soluciones sin c\u00f3digo, puedes utilizar un plugin de modo oscuro o un tema con modo oscuro incorporado. Para opciones algo m\u00e1s t\u00e9cnicas, puedes utilizar una biblioteca JavaScript de modo oscuro o codificar tu propia soluci\u00f3n.<\/p>\n Dado que a\u00f1adir el modo oscuro tendr\u00e1 un gran efecto en la apariencia de tu sitio web, debes asegurarte de probarlo a fondo antes de a\u00f1adirlo a tu sitio de WordPress en producci\u00f3n.<\/p>\n![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/light-mode-example-1024x710.jpg\")
![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/dark-mode-example-1024x709.jpg\")
\u00bfPor qu\u00e9 utilizar el modo oscuro en WordPress?<\/h2>\n
El modo oscuro hace que tu sitio web sea m\u00e1s accesible<\/h3>\n
\n
El modo oscuro puede ser m\u00e1s saludable para tus visitantes<\/h3>\n
El modo oscuro puede consumir menos energ\u00eda<\/h3>\n
Algunas personas simplemente prefieren el modo oscuro<\/h3>\n
4 formas de implementar el modo oscuro en WordPress<\/h2>\n
1. Utilizar un plugin de modo oscuro para WordPress<\/h3>\n
![\"\u00c1rea](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/wp-dark-mode-plugin-settings-1024x705.jpg\")
\n
2. Elige un tema que ya admita el modo oscuro<\/h3>\n
![\"El](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/rich-tabor-dark-mode-theme-1024x804.jpg\")
3. Utiliza una biblioteca JavaScript de modo oscuro<\/h3>\n
\n
darkmode.js<\/h4>\n
mix-blend-mode<\/code><\/a> para a\u00f1adir el modo oscuro sin ninguna configuraci\u00f3n adicional. Por defecto, a\u00f1ade un conmutador flotante que los visitantes pueden utilizar para cambiar entre el modo oscuro y el modo claro, pero puedes desactivar este widget si prefieres crear tu propia soluci\u00f3n.<\/p>\nmix-blend-mode<\/code> en lugar de requerir que a\u00f1adas tus propias reglas CSS, es pr\u00e1cticamente plug-and-play.<\/p>\ndrkmd.js<\/h4>\n
mix-blend-mode<\/code> para crear autom\u00e1ticamente un modo oscuro de tu sitio, te permite especificar directamente el CSS que quieres utilizar<\/a> para el modo oscuro.\u00a0A continuaci\u00f3n, puedes a\u00f1adir estas reglas de estilo a tu sitio utilizando las clases theme-light<\/code> y theme-dark<\/code>.<\/p>\ndata-drkmd-attach<\/code> a la etiqueta script.<\/p>\n4. Utiliza tu propia soluci\u00f3n de c\u00f3digo<\/h3>\n
hasClass()<\/code>, addClass()<\/code> y removeClass()<\/code>.<\/p>\n\n
C\u00f3mo activar el modo oscuro del panel de control de WordPress<\/h2>\n
\n
![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/dark-mode-wordpress-dashboard-1024x736.jpg\")
\n
Resumen<\/h2>\n