El 30 de marzo de 2020, los desarrolladores de Stack Overflow dieron a los visitantes del sitio web la oportunidad de usar una versión beta del tema oscuro. El material, cuya traducción publicamos, está dedicado a la historia de cómo se creó el tema oscuro de Stack Overflow.Banner en Stack Overflow, que le permite incluir un tema oscuroMi nombre es Aaron Sheki. Soy el administrador de diseño de desbordamiento de pila. Participo en el diseño de los componentes de la interfaz que subyacen a las nuevas características del proyecto.Para empezar, un poco de ironía. Personalmente, no soy fanático de los temas de interfaz oscura.A menudo veo que el nivel de contraste de las interfaces oscuras es demasiado bajo. El diseño de tales interfaces es difícil de usar en una gama completa de colores. Lo mismo se aplica a la simulación de volumen con sombras y a la aplicación de otros efectos visuales. Cuando leo un texto claro, ubicado sobre un fondo oscuro, mis ojos se cansan. Es difícil lidiar con fenómenos como el contraste simultáneo cuando se usan temas claros, y si se usa un tema oscuro, entonces todo se vuelve más complicado.Pero soy la persona cuyos esfuerzos trajeron un tema oscuro en Stack Overflow.El trabajo del que quiero hablar nunca se ha dirigido específicamente al desarrollo de un tema oscuro, a pesar del hecho de que muchos usuarios han solicitado durante mucho tiempo equipar el recurso con dicho tema. Pero en el curso de avanzar hacia un tema oscuro, tuvimos que resolver muchos problemas. En particular, se ha actualizado el código de front-end Stack Overflow, se ha mejorado la accesibilidad al contenido. Al trabajar en un tema oscuro, obtuvimos un incentivo para utilizar nuestro sistema de diseño más ampliamente en el proyecto .¿Podemos dar a los usuarios un tema oscuro y al mismo tiempo abrir el camino para mejorar la accesibilidad del proyecto? Respondimos esta pregunta afirmativamente, después de haber hecho todo lo que contaré ahora.Investigación del color
Al crear las escalas de color originales para el proyecto, nosotros, probablemente un poco ingenuos, tomamos un cierto valor de color y lo modificamos usando transformaciones implementadas usando Less . Entonces, por ejemplo, podríamos declarar una variable Menos @redy hacer que el color sea más oscuro varias veces usando el diseño darken(@red, 10%). Lo mismo ocurre con la clarificación de múltiples colores usando tint(@red, 10%). Esto puede dar una escala de color en la que los colores están en el rango de @red-050hasta @red-900incrementos del 10%.Cuando intenté entender por primera vez cómo se vería el recurso Stack Overflow en modo oscuro, decidí intentar cambiar el fondo blanco a negro y "voltear" las escalas de color. Con este enfoque, el color se @red-050convierte en color.@red-900, los colores cambian correspondientemente entre los colores inicial y final de la escala. Pero estos colores siguen siendo los mismos que los utilizados anteriormente.Las escalas de color claro y oscuro para el rojoCon este enfoque, el contraste de elementos ha sufrido. Lo que sucedió resultó contener algo que, en general, no me gustó de los temas oscuros. Por ejemplo, si observa de cerca la versión más oscura del rojo, ubicada sobre un fondo oscuro, verá que el color es casi indistinguible. Hablaremos más sobre esto a continuación.Definitivamente necesitamos encontrar algo mejor.▍Comenzar: diseño de diseño
Solo tratando de dibujar las escalas de color, en realidad no logré nada. Este paso no puede llamarse el comienzo real del trabajo sobre un tema oscuro. Por lo tanto, decidí comenzar a desarrollar un diseño y seleccionar manualmente los colores en Figma . Seleccioné los colores, enfocándome en cómo, en mi opinión, debería verse Stack Overflow, y no pensando en cómo los nuevos colores se relacionarán con los existentes. La reducción del contraste general fue la clave para preservar el efecto de profundidad en la interfaz, para soportar las sombras de los elementos y para aplicar el espectro completo de colores.Comenzar con el diseño del diseño nos permitió, en primer lugar, comprender qué efecto estético buscamos, sin prestar atención a los requisitos técnicos del proyecto.▍Selección de un algoritmo mejorado para trabajar con colores.
Después de elegir un fondo más claro para el tema oscuro, tuve la oportunidad de explorar más profundamente las escalas de colores. Primero, necesitaba lidiar con algunos de los problemas de color del sistema de diseño existente, que apareció al aplicar el tema de la luz. En el extremo brillante del espectro, los colores rojo y amarillo no se veían como me gustaría. Algunos colores tenían los valores más claros, demasiado cercanos al blanco. Había colores, cuyos valores más claros eran demasiado oscuros.La versión más clara del amarillo no se distinguía del blanco, y la más oscura no se distinguía del negro. Tuvimos problemas en el extremo oscuro del espectro. Usando, como fondo, colores@red-900y@blue-900, notamos que estos colores son indistinguibles del negro y el uno del otro. Necesitábamos un algoritmo que nos diera colores cuyo tono principal sea distinguible tanto para la versión más clara como para la más oscura. Esto permitiría la creación de componentes utilizando estos valores de color.Las variaciones más oscuras de nuestros colores no se distinguían entre el negro y entre sí. Alcrear componentes que implementan notificaciones, no pudimos usar los colores de nuestro sistema de diseño. En cambio, necesitábamos elegir nuestros propios colores en el ojo.Estos colores son hermosos, pero no se basan en valores de color de nuestras escalas de colores.Utilicé la maravillosa herramienta ColorBox de Lyft Designpara normalizar los colores. En lugar de cambiar los colores de la manera más simple, linealmente, en incrementos del 10%, apliqué curvas Bezier. Esto nos permitió lograr mejoras significativas en las posiciones extremas de las escalas de color.Después de normalizar los colores en la parte brillante del espectro, pude crear notificaciones cuyos colores se toman de los colores de nuestro sistema de diseño▍ colores oscuros
Después de ordenar la versión clara del sitio, es hora de probar nuevos colores contra un fondo oscuro. Como resultado, recurrí a la configuración manual de lo que produjo el algoritmo de coincidencia de color, haciendo esto para preservar los colores corporativos que se han utilizado durante mucho tiempo. Esto me permitió usar nuevos colores en la producción y al mismo tiempo prescindir de cambios demasiado drásticos en la apariencia del proyecto.Gama de colores completamente normalizadaImplementando un tema oscuro en la interfaz de Stacks
Si de alguna manera esperaba equipar Stack Overflow con un tema oscuro, primero necesitaría implementar un tema oscuro en nuestro sistema de diseño de Stacks , usándolo como un campo de prueba para probar nuevas tecnologías.▍Variables
Necesitaba convertir valores de color hexadecimales menos compilados estáticos en propiedades CSS personalizadas que fueron diseñadas para usarse mientras el programa se estaba ejecutando. El punto es que los valores de color deben almacenarse usando estructuras de vista var(--red-500), en lugar de usar estructuras de vista estáticas @red-500. Fue una tarea interesante, tanto en el diseño de nuestro sistema como en todo el sitio. Por lo general, tomamos un solo valor de color, como @red-500, y lo hicimos más claro o más oscuro para resaltar diferentes estados de los elementos (como los estados que toman los elementos cuando se ciernen sobre ellos, o cuando obtienen el foco), para usar como el color de fondo o el color de los bordes de los elementos.Si hablamos de los colores de cada uno de los botones, que tenemos mucho sobre los colores de cada estado de cada botón, entonces podemos decir que estos colores se obtuvieron en el curso de un conjunto de transformaciones de un solo valor de color compilado. Me recordó una escena de la película "El juego para una caída". Allí hablaron sobre la posibilidad de convertir una inversión número diez millones en miles de millones de dólares. No es sorprendente que tales "transformaciones" llevaron a la crisis financiera.El problema con las variables CSS normales es que no se pueden aplicar menos transformaciones a ellas. Los valores de la variable CSS se calculan en tiempo de ejecución, por lo que una construcción como esta darken(var(--red-500), 5%)conduce a un error de compilación.Todo esto significaba que necesitaba reelaborar el código responsable, por ejemplo, de los botones de estilo. Al principio se veía así:.s-btn {
color: @white;
background-color: @blue-600;
border: 1px solid darken(@blue-600, 5%);
&:hover {
background-color: darken(@blue-600, 5%);
border-color: darken(@blue-600, 10%);
}
}
Necesitaba continuar para indicar los valores de color exactos descritos en nuestro sistema de color. Como resultado, necesitaba llegar a esta versión del código:.s-btn {
color: var(--white);
background-color: var(--blue-600);
border: 1px solid var(--blue-700);
&:hover {
background-color: var(--blue-700);
border-color: var(--blue-800);
}
}
Al mismo tiempo, estaba claro que todo no se limitaba a botones. Por lo tanto, necesitaba volver a trabajar los estilos de todos los componentes disponibles en Pilas. Lo mismo ocurrió con las notificaciones, los menús emergentes, las ventanas modales, los enlaces y muchos otros componentes.▍ Compatibilidad del navegador
Si hablamos de variables CSS, su aplicación significaba la necesidad de considerar su compatibilidad con los navegadores. En particular, no son compatibles con Internet Explorer 11, un navegador que nunca olvidamos. Como resultado, decidimos abandonar el soporte de IE11, deshacernos de todos los hacks CSS que agregamos al sistema a lo largo de los años de su desarrollo, teniendo en cuenta las características de este navegador. Además, decidimos enviar notificaciones a los usuarios de IE11 con una propuesta para instalar un nuevo navegador. Esta decisión no fue fácil para nosotros. Su implementación requirió semanas de refactorización.▍ Clases condicionales
IE11 ya no me limitaba y pude trabajar con colores en Stacks. Decidí agregar una bodyclase al elemento .theme-system. Una vez hecho esto, pude reemplazar los colores claros con sus equivalentes oscuros utilizando la consulta de medios adecuada. Además, podríamos rechazar completamente la solicitud de los medios simplemente agregando a la bodyclase .theme-dark. Esto permitiría a los usuarios utilizar el tema oscuro del sitio independientemente de la configuración de su sistema. Esto es lo que obtuve como resultado:body {
--red-600: #c02d2e;
}
body.theme-system {
@media (prefers-color-scheme: dark) {
--red-600: #d25d5d;
}
}
body.theme-dark {
--red-600: #d25d5d;
}
Para lograr una flexibilidad total, Stacks permite trabajar con clases de colores atómicos, que se aplican solo cuando se habilita un tema oscuro. Los detalles sobre la compatibilidad con CSS en las pilas se pueden encontrar aquí . Por ejemplo, agregar una clase a un elemento. d:bg-green-100, el diseñador expresa el siguiente pensamiento: "En modo oscuro, debe usar el verde para el fondo bg-green-100". Las clases condicionales adicionales diseñadas para el modo oscuro nos permiten eliminar los bordes de los elementos, cambiar los fondos y ajustar el color del texto. En este tweet puedes ver un ejemplo interesante de ajuste de color. Tal configuración a veces es necesaria en modo oscuro. Quiero señalar que una de las fuentes de inspiración cuando trabajé en el modo oscuro del sitio para mí fue el marco Tailwind CSS .▍Utilice un tema oscuro en Pilas
Después de que se implementó el tema oscuro en Pilas, decidimos agregar un botón en la parte superior de la interfaz del sistema que le permite cambiar entre los temas. Los empleados de la empresa deberían haber tenido una capacidad rápida y conveniente para cambiar entre diferentes temas de color del sitio.Cambiar entre temas claros y oscuros en pilasImplementación de un tema oscuro en el sitio principal de Stack Overflow
Resolví las tareas relacionadas con la implementación del tema oscuro en la interfaz del sistema de diseño de Stacks con relativa facilidad. La refactorización, que tiene en cuenta las consideraciones del desarrollo futuro del sistema, facilita que las pilas sean más pequeñas que el sitio principal debido a las consecuencias de decisiones erróneas tomadas en el pasado. Para equipar Stack Overflow con un tema oscuro, necesitaba proporcionar soporte para las variables Less en aras de la compatibilidad con versiones anteriores de la solución. Esto nos permitió organizar la aplicación del tema oscuro de forma incremental, en partes separadas de la interfaz.Como la mayor parte de nuestra interfaz, creada después de 2018, se basa en Stacks, esta parte de la interfaz recibe, sin esfuerzos adicionales de nuestra parte, un tema oscuro y diseños receptivos. ¿Qué pasa con la parte principal de la interfaz? Todo aquí está lejos de ser tan simple.▍Principales colores del sitio
Para empezar, necesitaba hacer los mayores cambios en el sitio que podrían hacerse sin violar el tema de la luz estándar Desbordamiento de pila. Las tareas que tuve que resolver fueron principalmente reemplazar las variables menos estáticas con variables CSS equivalentes a ellas. Primero, apliqué el estilo background-color: var(--white)al fondo del sitio, reemplazándolo por el estilo background-color: @white. Gracias a esto, el área principal de las aldeas ahora se podía volver a pintar fácilmente en el color de fondo oscuro. Luego hice la misma operación con los colores de las fuentes y algunos otros elementos. Este trabajo consistió principalmente en eliminar una gran cantidad de código CSS, ya que, por ejemplo, a menudo nos gustaban los estilos excesivamente detallados, establecer los colores de fuente de los elementos secundarios, aunque podríamos hacerlo con valores de color heredados de elementos primarios.▍ Demostración de un nuevo diseño para los empleados de la empresa.
Después de trabajar en grandes bloques del sitio, les pedí a nuestros programadores Adam Lear y Nick Craver que me ayudaran a encontrar una forma de mostrar una versión preliminar del tema oscuro al personal de Stack Overflow. Esto permitiría a los empleados incluir un tema oscuro, que todavía está muy lejos de estar listo para ver qué áreas del sitio aún necesitan mejoras. Esto, pensé, los alentaría a ayudar a refinar partes del sitio con la mayor cantidad de tráfico. Esto me permitiría superar la barrera principal para un nuevo diseño. Es decir, ayudaría a integrar el nuevo diseño en la base de código existente.▍Botones
Si el área del sitio en la que estaba trabajando se creó usando Pilas, entonces para prepararla para usar el modo oscuro, era necesario resolver no muchos problemas. Digamos, durante el transcurso del trabajo, fue posible decidir que en algún lugar no se necesitaba el borde, o que en algún lugar, se necesitaba un tono especial de gris como color de fondo. Esta preparación para el uso del régimen oscuro podría ser limitada. Desafortunadamente, la mayor parte del sitio fue creado sin usar Pilas.Esto se manifestó más claramente cuando se trataba de los botones. A lo largo de los años de trabajo en el sitio, se han utilizado muchas implementaciones de botones. Esto fue especialmente frustrante ya que estilizamos los elementos mismos button. Esto significa que cualquier elemento button, o elemento, decorado comoinput type=«button», se le asignó el estilo predeterminado. Este estilo tiene un nivel muy alto de especificidad y se basa en un conjunto de reglas obsoletas.El hecho anterior ha llevado a la necesidad de una gran refactorización, que todavía está en curso. Su objetivo es eliminar los estilos CSS a nivel de elemento buttony reemplazarlos con equivalentes de las pilas. En particular, estamos hablando del hecho de que es input type=«submit»necesario reemplazar cientos de elementos <button type="submit" class="s-btn s-btn__primary">. Además de agregar trabajo, observo que a menudo vinculamos la funcionalidad de JavaScript a los selectores visuales. Si cambia las clases que afectan la apariencia del elemento, esto puede romper la funcionalidad del botón. Como resultado, durante el procesamiento de miles de botones, primero necesitaba agregarles clases.js-, conecte controladores a ellos y luego elimine los estilos antiguos que definen la apariencia de los botones.Esto finalmente me llevó a eliminar la mayoría de las antiguas clases de botones, lo que permitió que los botones cambiaran de color correctamente al activar un tema oscuro.▍ Título del sitio web
Para complicar la tarea, el encabezado utilizado en todo el sitio puede funcionar en diferentes modos. Estamos hablando de modos claros y oscuros, y del modo de soporte para un tema especial. La opción de sitio para equipos (Desbordamiento de pila para equipos) y para sistemas corporativos utiliza a la fuerza un tema de encabezado oscuro. Además, la versión del comando usa el color especificado por el color del avatar del equipo. Al igual que muchos de nuestros otros componentes, CSS para el título del sitio proporciona un solo color, que determina si el título es claro u oscuro. Este color, luego, usando instrucciones menos complejas, se transforma, lo que le permite obtener sus diferentes opciones. Sin embargo, no pudimos hacer lo que hicimos cuando procesamos el código del sistema de diseño. Es decir, no podrían simplemente tirar todo el CSS anterior y reemplazarlo con código,que usa variables CSS. El hecho es que nuestros clientes corporativos, de hecho, completamente, con la ayuda de temas, personalizan la apariencia del encabezado. En este caso, las opciones de color se generan en función de un solo color.
& when ( iscolor(@theme-topbar-background-color) ) {
@theme-topbar-style: if(luma(@theme-topbar-background-color) >= 50%, light, dark);
}
& when not ( iscolor(@theme-topbar-background-color) ) {
@theme-topbar-style: automatic;
}
Luego, basándose en el valor recibido ( automatic, lighto dark), se crea la cabecera correcta.▍Etiquetas
Si pudiera dar solo un consejo a los involucrados en el diseño de componentes, entonces se leería: "No describa en los componentes lo que afecta su ubicación en la página". En otras palabras, qué tipo de espacio separa los componentes debería determinar el contexto en el que se aplican. No es necesario establecer tales cosas en el componente en sí. En versiones anteriores de Stack Overflow, se decidió que post-tagel relleno externo debería aplicarse a los componentes . Al mismo tiempo, las etiquetas, como los botones, resultaron estar sujetas a un problema relacionado con JavaScript. Para hacer las cosas aún más difíciles, la mayoría de las etiquetas se generaron utilizando un único método auxiliar.La refactorización de etiquetas implicó el reemplazo de post-tagcomponentes cons-tag-componentes diseñados para usar diferentes temas. Este trabajo también incluyó cambios en JavaScript, teniendo en cuenta el uso js-tag. Además, era necesario cambiar el método responsable de generar etiquetas, de modo que aceptara clases arbitrarias que afectaran la colocación de elementos. El hecho es que en ciertos contextos, las etiquetas pueden necesitar colocarse en el diseño flexible, haciendo esto en lugar de depender de sangrías externas predefinidas (o en lugar de lidiar con tales sangrías).▍ Publicaciones de diseño
La mayor parte de Stack Overflow está compuesta por publicaciones de usuarios. Estas publicaciones, a saber, preguntas, respuestas, comentarios, se realizan con la ayuda de Markdown Markup. Durante el lanzamiento de Stack Overflow, Markdown Markup era una tecnología relativamente nueva.Con los años, la web ha desarrollado algunas formas estándar para mostrar algo como encabezados y citas. La introducción del tema oscuro fue un excelente momento para revisar nuestro enfoque para formatear publicaciones. El tema más controvertido en este asunto fue el formato de las citas.Inicialmente, las citas se enmarcaban usando un poderoso color de fondo amarillo, lo que reducía el contraste de la cita en sí. El color amarillo, además, causa ciertos problemas cuando se muestra sobre un fondo oscuro. Como resultado, pasamos al método generalmente aceptado de mostrar comillas, usando una franja vertical gris estrecha para resaltarlas.▍ Código de estilo
En las páginas de Stack Overflow, que es bastante comprensible, se muestran muchas piezas de código. Los colores que utilizamos para resaltar la sintaxis no tenían nada que ver con nuestros colores distintivos. Tengo una fuerte sospecha de que estos colores son el legado de la primera biblioteca utilizada en el proyecto para resaltar la sintaxis. Después de analizar estos colores, decidí someter el resaltado de sintaxis a un rediseño profundo. Como resultado, los colores de la luz de fondo fueron reemplazados por colores de nuestro sistema de diseño. Esto se aplica a los temas claros y oscuros. Y esto se hace para que lo que sucedió no difiera radicalmente de lo que era antes.resultados
El tema claro y la versión beta del tema oscuro, lanzado el 30 de marzo.Debido al volumen de trabajo de refactorización que hicimos al pasar al tema oscuro, pudimos realizar cambios bastante grandes en el aspecto del proyecto sin ninguna dificultad. Según lo que tenemos ahora, podemos, por ejemplo, desarrollar un tema de sitio web de alto contraste que aumente su accesibilidad.La creación del tema oscuro fue el resultado de un cambio fundamental en el enfoque del diseño Stack Overflow. En particular, estamos hablando del uso de un sistema de diseño , que he estado promoviendo durante un año. Y crear un tema oscuro fue una excelente oportunidad para reconstruir muchas partes del sitio. Este es el primero de muchos proyectos que aumentarán la disponibilidad de Stack Overflow.Si no tiene en cuenta el rechazo del soporte para IE11, el trabajo sobre el tema oscuro comenzó en julio de 2019 con este RP, destinado a investigar la situación. Antes de esto, en abril de 2019, hubo discusiones sobre un tema oscuro. En octubre de 2019, entró en producción una versión experimental de un tema oscuro. Y luego, después de que se hicieron al menos 60 relaciones públicas, se presentó una versión beta del tema oscuro a los usuarios. Sucedió el 30 de marzo de 2020.¡Queridos lectores! ¿Utiliza Stack Overflow? ¿Te gusta su nuevo tema oscuro?