Bueno, aquí estamos con nuestro primer hilo de "¿Has visto?" para XenForo 2.3.
Ha tardado mucho en llegar, y por varias razones en las que entraremos más adelante, ha cambiado bastante respecto a lo que pretendíamos que fuera en un principio, pero por fin está listo para empezar a mostrarles las novedades.
tl;dr: hay un vídeo al final de este post.
Modo oscuro
Muchas de las novedades de XenForo 2.3 están relacionadas con mejoras de rendimiento que no serán evidentes a primera vista, pero hay una nueva característica en particular que es muy obvia, y es el nuevo modo oscuro.
Si el dispositivo con el que estás navegando por un sitio XenForo está configurado para usar su propio modo oscuro, XenForo cambiará él mismo para usar el tema oscuro. Alternativamente, puedes solicitar el tema claro, oscuro o controlado por el sistema usando el gadget en el pie de página junto al selector de estilo. Esto cambiará el modo instantáneamente, sin recargar la página.
Esto no es XenForo 3.0
No se trata de la gran revisión del diseño que se había previsto inicialmente para la versión 2.3, que incluía cambios radicales en el sistema de plantillas e introducía una serie de nuevas tecnologías para mejorar significativamente muchas áreas de XenForo.
Cuando quedó claro que el nuevo diseño introduciría problemas de retrocompatibilidad irresolubles, se tomó la decisión de retirar el nuevo diseño y reservarlo para una versión de XenForo que llamaremos 3.0. En su lugar, hemos decidido ofrecer las nuevas funcionalidades que hemos creado para la versión 2.3 sin el nuevo diseño, de forma que los usuarios actuales puedan acceder a todas las nuevas características sin tener que preocuparse por un gran trabajo de mantenimiento para integrarlas.
Algunos de los nuevos sistemas que hemos construido para soportar el diseño 3.0 se han adaptado para funcionar con el sistema 2.3, y el soporte para el modo oscuro es uno de ellos.
Variaciones de estilo
El modo oscuro se basa en un nuevo sistema de variaciones de estilo. Este sistema permite definir conjuntos alternativos de ciertas propiedades de estilo, como los colores, que pueden cambiarse dinámicamente sin recargar la página.
Actualmente existen dos variaciones, denominadas "por defecto" y "alternativa". En el estilo por defecto, la variación por defecto corresponde al tema claro y la variación alternativa corresponde al tema oscuro.
Cuando ambas variaciones corresponden a diferentes tipos de estilo (es decir, claro u oscuro), las exponemos utilizando la consulta de medios prefers-color-scheme. Esto selecciona automáticamente una variación basada en el esquema de color preferido del dispositivo cuando un usuario no ha elegido explícitamente una variación a utilizar.
Sin embargo, también se podrían establecer ambas variaciones como claras u oscuras. En este caso, el gadget del pie de página mostrará los nombres de las variaciones, permitiendo a los usuarios cambiar a una paleta de colores diferente cuando lo deseen.
Muchos sitios que ejecutan XenForo ya funcionan con un estilo oscuro de terceros, pero es importante tener en cuenta que ofrecer estilos claros y oscuros a sus visitantes antes implicaba proporcionar estilos completamente separados, y mientras que el estilo oscuro podría haber heredado la mayoría de sus plantillas y propiedades de estilo de un padre claro, todavía habría habido una penalización de rendimiento vinculada al soporte de ambos estilos. Con el sistema de variaciones de estilo en XenForo 2.3, este ya no es el caso. Ambas variaciones del estilo se gestionan dentro de un único estilo. Aquellos administradores que mantienen múltiples estilos y tienen que manejar la herencia entre ellos apreciarán lo mucho más fácil que esto hará la gestión de estilos.
Por defecto y alternativo
Además, mientras que los estilos claros ahora pueden ampliarse para admitir una variación oscura, lo mismo ocurre con los estilos oscuros existentes, que ahora pueden definir una variación clara. En la actualidad, nos referimos a las variaciones Predeterminado y Alternativo, donde Predeterminado puede ser claro u oscuro, y Alternativo es (normalmente) lo contrario.
Propiedades de estilo
Desde la perspectiva de un diseñador de estilos, las variaciones de estilo se gestionan como parte del sistema de propiedades de estilo. Las propiedades de estilo definidas como un valor de color pueden editarse para habilitar variaciones, en cuyo caso aceptarán valores para cada una de las variaciones definidas en el estilo.
Con las variaciones activadas, el usuario es libre de definir versiones completamente diferentes del color para cada variación.
Tenga en cuenta que la capacidad de admitir variaciones se limita a las propiedades de estilo de tipo valor de color y no se extiende a las propiedades de tipo CSS. Por supuesto, esto no significa que las propiedades de tipo CSS no puedan beneficiarse del sistema de variaciones, porque los valores de color a los que hacen referencia pueden ser variantes. Es decir, si su cabecera CSS utiliza
Futura ampliación
En una futura versión de XenForo, dependiendo de los comentarios, podemos añadir soporte para definir variaciones adicionales, y ampliar la gama de propiedades de estilo que admiten variaciones más allá de las propiedades de color. Esto podría permitir variaciones con diferentes opciones de relleno o tipografía, todo dentro de un mismo estilo.
Mejoras en la interfaz de usuario
Notarás que hemos incrementado significativamente el tamaño del chip de previsualización de color junto a estos controles, y que el editor de propiedades de estilo se ha vuelto más rápido de manejar, ya que los cambios en las propiedades de estilo se guardan ahora sin necesidad de recargar la página.
Además, en las propiedades de estilo en las que se hace referencia a los colores de la paleta, las variaciones se heredan automáticamente cuando se utilizan los campos predeterminado o alternativo, y pueden manipularse utilizando las funciones estándar de edición de color proporcionadas por XenForo, como
Naturalmente, las funciones
Espacio de color HSL
Puede que hayas visto en las imágenes mostradas hasta ahora que ahora utilizamos el espacio de color HSL. Mientras que los colores en XenForo se definieron en gran medida en formato RGB, ya sea como valores decimales RGB o hexadecimales, este sistema presenta desafíos para algunos usuarios, ya que el ajuste de los valores de rojo, verde y azul es necesario para lograr incluso cambios simples como hacer un color más oscuro. HSL (matiz, saturación y luminosidad) aporta un sistema de color más amigable, en el que el tono (matiz) del color se define con un único valor, y la intensidad (saturación) y el brillo (luminosidad) también pueden ajustarse con un único cambio de valor.
El selector de color se ha actualizado para reflejar este cambio.
Variables CSS
Además, cada componente del color HSL se representa ahora como una variable CSS. En XenForo 2.3 esto permite cambiar entre variaciones claras y oscuras, pero su utilidad completa se hará evidente con XenForo 3.
Una cosa divertida para probar cuando tengas acceso a 2.3, usa el inspector de tu navegador para localizar los valores HSL para
Cabe destacar que las operaciones que se realizan con los colores se llevan a cabo en el lado del cliente y no con el procesador LESS del lado del servidor, por lo que es mucho más fácil crear prototipos de ajustes de color.
Hacerlo suyo
Para evitar cualquier comportamiento inesperado cuando actualices a XenForo 2.3, no haremos cambios en ninguno de tus estilos. Esto incluye marcar tus estilos como compatibles con variaciones.
Para activar las variaciones, edita cada uno de tus estilos y activa la opción "Activar variaciones". A continuación, salta al editor de propiedades de estilo para ese estilo y concéntrate en los grupos Paleta de colores y Colores básicos.
En el estilo predeterminado, tomamos cada uno de los colores Paleta y Acento y redujimos un poco su saturación y luminosidad para la variación oscura, de modo que queden un poco más apagados sobre un fondo oscuro. No hemos ajustado los colores Neutros.
A continuación, en el grupo Colores básicos, hemos cambiado las referencias a los colores Neutro 3 (oscuro) y Neutro 1 (claro), y en algunos casos hemos invertido las referencias a los colores de la paleta, de modo que las referencias a la Paleta 1 ahora apuntan a la Paleta 5, etc., realizando los ajustes necesarios con las funciones de color incorporadas.
Si sigues estas directrices con tus propios estilos, deberías ser capaz de construir rápidamente variaciones oscuras que sean adecuadas para usar en tu sitio.
Aquí hay un vídeo que muestra todo en acción:
Ha tardado mucho en llegar, y por varias razones en las que entraremos más adelante, ha cambiado bastante respecto a lo que pretendíamos que fuera en un principio, pero por fin está listo para empezar a mostrarles las novedades.
tl;dr: hay un vídeo al final de este post.
Modo oscuro
Muchas de las novedades de XenForo 2.3 están relacionadas con mejoras de rendimiento que no serán evidentes a primera vista, pero hay una nueva característica en particular que es muy obvia, y es el nuevo modo oscuro.
Si el dispositivo con el que estás navegando por un sitio XenForo está configurado para usar su propio modo oscuro, XenForo cambiará él mismo para usar el tema oscuro. Alternativamente, puedes solicitar el tema claro, oscuro o controlado por el sistema usando el gadget en el pie de página junto al selector de estilo. Esto cambiará el modo instantáneamente, sin recargar la página.
Esto no es XenForo 3.0
No se trata de la gran revisión del diseño que se había previsto inicialmente para la versión 2.3, que incluía cambios radicales en el sistema de plantillas e introducía una serie de nuevas tecnologías para mejorar significativamente muchas áreas de XenForo.
Cuando quedó claro que el nuevo diseño introduciría problemas de retrocompatibilidad irresolubles, se tomó la decisión de retirar el nuevo diseño y reservarlo para una versión de XenForo que llamaremos 3.0. En su lugar, hemos decidido ofrecer las nuevas funcionalidades que hemos creado para la versión 2.3 sin el nuevo diseño, de forma que los usuarios actuales puedan acceder a todas las nuevas características sin tener que preocuparse por un gran trabajo de mantenimiento para integrarlas.
Algunos de los nuevos sistemas que hemos construido para soportar el diseño 3.0 se han adaptado para funcionar con el sistema 2.3, y el soporte para el modo oscuro es uno de ellos.
Variaciones de estilo
El modo oscuro se basa en un nuevo sistema de variaciones de estilo. Este sistema permite definir conjuntos alternativos de ciertas propiedades de estilo, como los colores, que pueden cambiarse dinámicamente sin recargar la página.
Actualmente existen dos variaciones, denominadas "por defecto" y "alternativa". En el estilo por defecto, la variación por defecto corresponde al tema claro y la variación alternativa corresponde al tema oscuro.
Cuando ambas variaciones corresponden a diferentes tipos de estilo (es decir, claro u oscuro), las exponemos utilizando la consulta de medios prefers-color-scheme. Esto selecciona automáticamente una variación basada en el esquema de color preferido del dispositivo cuando un usuario no ha elegido explícitamente una variación a utilizar.
Sin embargo, también se podrían establecer ambas variaciones como claras u oscuras. En este caso, el gadget del pie de página mostrará los nombres de las variaciones, permitiendo a los usuarios cambiar a una paleta de colores diferente cuando lo deseen.
Muchos sitios que ejecutan XenForo ya funcionan con un estilo oscuro de terceros, pero es importante tener en cuenta que ofrecer estilos claros y oscuros a sus visitantes antes implicaba proporcionar estilos completamente separados, y mientras que el estilo oscuro podría haber heredado la mayoría de sus plantillas y propiedades de estilo de un padre claro, todavía habría habido una penalización de rendimiento vinculada al soporte de ambos estilos. Con el sistema de variaciones de estilo en XenForo 2.3, este ya no es el caso. Ambas variaciones del estilo se gestionan dentro de un único estilo. Aquellos administradores que mantienen múltiples estilos y tienen que manejar la herencia entre ellos apreciarán lo mucho más fácil que esto hará la gestión de estilos.
Por defecto y alternativo
Además, mientras que los estilos claros ahora pueden ampliarse para admitir una variación oscura, lo mismo ocurre con los estilos oscuros existentes, que ahora pueden definir una variación clara. En la actualidad, nos referimos a las variaciones Predeterminado y Alternativo, donde Predeterminado puede ser claro u oscuro, y Alternativo es (normalmente) lo contrario.
Propiedades de estilo
Desde la perspectiva de un diseñador de estilos, las variaciones de estilo se gestionan como parte del sistema de propiedades de estilo. Las propiedades de estilo definidas como un valor de color pueden editarse para habilitar variaciones, en cuyo caso aceptarán valores para cada una de las variaciones definidas en el estilo.
Con las variaciones activadas, el usuario es libre de definir versiones completamente diferentes del color para cada variación.
Tenga en cuenta que la capacidad de admitir variaciones se limita a las propiedades de estilo de tipo valor de color y no se extiende a las propiedades de tipo CSS. Por supuesto, esto no significa que las propiedades de tipo CSS no puedan beneficiarse del sistema de variaciones, porque los valores de color a los que hacen referencia pueden ser variantes. Es decir, si su cabecera CSS utiliza
@xf-chromeBg, que a su vez hace referencia a @xf-paletteColor5, entonces recogerá automáticamente el valor de variante de @xf-paletteColor5 cuando se defina.Futura ampliación
En una futura versión de XenForo, dependiendo de los comentarios, podemos añadir soporte para definir variaciones adicionales, y ampliar la gama de propiedades de estilo que admiten variaciones más allá de las propiedades de color. Esto podría permitir variaciones con diferentes opciones de relleno o tipografía, todo dentro de un mismo estilo.
Mejoras en la interfaz de usuario
Notarás que hemos incrementado significativamente el tamaño del chip de previsualización de color junto a estos controles, y que el editor de propiedades de estilo se ha vuelto más rápido de manejar, ya que los cambios en las propiedades de estilo se guardan ahora sin necesidad de recargar la página.
Además, en las propiedades de estilo en las que se hace referencia a los colores de la paleta, las variaciones se heredan automáticamente cuando se utilizan los campos predeterminado o alternativo, y pueden manipularse utilizando las funciones estándar de edición de color proporcionadas por XenForo, como
oscurecer y xf-intensify.Naturalmente, las funciones
xf-intensify y xf-diminish ahora respetan el modo claro u oscuro en el que están operando, oscureciendo o aclarando los colores dependiendo del modo en que se marque la variación actual.Espacio de color HSL
Puede que hayas visto en las imágenes mostradas hasta ahora que ahora utilizamos el espacio de color HSL. Mientras que los colores en XenForo se definieron en gran medida en formato RGB, ya sea como valores decimales RGB o hexadecimales, este sistema presenta desafíos para algunos usuarios, ya que el ajuste de los valores de rojo, verde y azul es necesario para lograr incluso cambios simples como hacer un color más oscuro. HSL (matiz, saturación y luminosidad) aporta un sistema de color más amigable, en el que el tono (matiz) del color se define con un único valor, y la intensidad (saturación) y el brillo (luminosidad) también pueden ajustarse con un único cambio de valor.
El selector de color se ha actualizado para reflejar este cambio.
Variables CSS
Además, cada componente del color HSL se representa ahora como una variable CSS. En XenForo 2.3 esto permite cambiar entre variaciones claras y oscuras, pero su utilidad completa se hará evidente con XenForo 3.
Una cosa divertida para probar cuando tengas acceso a 2.3, usa el inspector de tu navegador para localizar los valores HSL para
paletteNeutral3, definidos como las variables CSS --xf-paletteNeutral3--h, --xf-paletteNeutral3--s, y --xf-paletteNeutral3--l y usa las teclas del cursor para ajustar el valor hacia arriba y hacia abajo. Verá que todas las instancias de ese color en uso en la página reaccionan inmediatamente, independientemente de cualquier ajuste que se les haya hecho en los colores heredados posteriormente. Aquí, hemos ajustado xf-paletteNeutral3 de hsl(0, 0%, 8%) a hsl(200, 50%, 20%) usando el inspector en Chrome, resultando en cambios a varios fondos y bordes que se basan en ajustes del color original.Cabe destacar que las operaciones que se realizan con los colores se llevan a cabo en el lado del cliente y no con el procesador LESS del lado del servidor, por lo que es mucho más fácil crear prototipos de ajustes de color.
Hacerlo suyo
Para evitar cualquier comportamiento inesperado cuando actualices a XenForo 2.3, no haremos cambios en ninguno de tus estilos. Esto incluye marcar tus estilos como compatibles con variaciones.
Para activar las variaciones, edita cada uno de tus estilos y activa la opción "Activar variaciones". A continuación, salta al editor de propiedades de estilo para ese estilo y concéntrate en los grupos Paleta de colores y Colores básicos.
En el estilo predeterminado, tomamos cada uno de los colores Paleta y Acento y redujimos un poco su saturación y luminosidad para la variación oscura, de modo que queden un poco más apagados sobre un fondo oscuro. No hemos ajustado los colores Neutros.
A continuación, en el grupo Colores básicos, hemos cambiado las referencias a los colores Neutro 3 (oscuro) y Neutro 1 (claro), y en algunos casos hemos invertido las referencias a los colores de la paleta, de modo que las referencias a la Paleta 1 ahora apuntan a la Paleta 5, etc., realizando los ajustes necesarios con las funciones de color incorporadas.
Si sigues estas directrices con tus propios estilos, deberías ser capaz de construir rápidamente variaciones oscuras que sean adecuadas para usar en tu sitio.
Video
Aquí hay un vídeo que muestra todo en acción:
