Paletas de colores cargando incorrectamente con 2.7.0.beta5

Contribuir Error
1

Actualizado a la versión 2.7.0.beta5 esta mañana y muchos colores han cambiado. Parece que la Paleta de Colores no se está leyendo correctamente y se está utilizando la paleta de colores predeterminada que se obtiene al hacer clic en Nueva Paleta. Los dos temas a continuación utilizan dos paletas de colores diferentes, pero ambos terminan con la paleta de colores “Nueva Paleta de Colores” de Discourse → Paleta base: Claro definida en la primera línea del CSS

Ejemplo 1:
Esta es la Paleta de Colores del tema:

image
image688×649 24.9 KB

Aquí está la primera línea del CSS:

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

Ejemplo 2:
Esta es la Paleta de Colores del tema:

image
image384×512 85.6 KB

Aquí está la primera línea del CSS:

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

Si comienzo con un tema nuevo en blanco y agrego una paleta, funciona como se espera, pero para mis temas existentes, se carga la Paleta Clara Predeterminada en lugar de la Paleta asignada.

1 me gusta
2

Hasta ahora, la única forma que he encontrado de solventar esto es agregar manualmente las variables de color de Sass que deseo a cada tema y componente.

1 me gusta
4

No he podido reproducir este problema… ¿si cambias la paleta de colores en un tema existente, se mantiene incorrecta?

3 Me gusta
5

Parece que tenemos el mismo problema. Actualizamos a la versión 2.7.0.beta5 (6c57f6f49d) y el esquema de colores ya no se aplicaba en nuestro componente de tema.

Usamos:

#meta-links {
    background-color: $header_background;
}

pero el color de fondo era #fff en lugar del color definido en el esquema de colores.

Intenté:

  • volver a asignar el esquema de colores al tema
  • copiar el esquema de colores y asignar la copia al tema
  • volver a asignar el componente del tema al tema

pero no pareció funcionar. La solución temporal actual es establecer manualmente el color en el CSS.

2 Me gusta
6

Parece que lo que está ocurriendo es que se carga la paleta correcta para el tema base, pero no para ninguno de los componentes. Por lo tanto, las partes de la página que no utilizan un componente tienen los colores correctos, pero las partes que dependen de un componente cargan la paleta predeterminada «Light» de Discourse en lugar de usar la paleta asignada al Tema.

Desde las Herramientas para desarrolladores:
color_definitions.scss tiene la paleta correcta

image
image973×118 12.9 KB

desktop.scss tiene la paleta correcta
image

theme_174.scss, que es un componente, utiliza la paleta predeterminada Light
image

theme_171 es un componente que consiste únicamente en estas líneas de CSS en common.css y nada más:

#banner {
    margin: auto 20px;
    background-color: $primary-low;
    max-width: 880px;
    border: 1px solid #999 ;
}
2 Me gusta
7

Gracias @gkln y @smrtey por los detalles adicionales… Una cosa que puedes probar es desactivar los componentes uno por uno para ver si eso cambia algo… Es posible que haya un error silencioso que no se esté señalando en algún lugar, y eso podría estar rompiendo el CSS de los componentes.

8

Parece que ocurre con cualquier componente que utiliza variables de color SCSS. Todo funciona correctamente si agrego manualmente los colores a cada componente individual:

$primary: #22262a !important; $secondary: #fefefe !important; $tertiary: #2572e4 !important; $quaternary: #518ee9 !important; $header_background: #1550a7 !important; $header_primary: #fcfcfc !important; $highlight: #9edaf5 !important; $danger: #ff7114 !important; $success: #85cc54 !important; $love: #de0100 !important;

pero eso está lejos de ser una solución ideal. No veo cómo puedo solucionar este problema. No hay forma alguna de que tenga la capacidad de averiguar qué podría hacer que Discourse cargue una paleta de colores diferente.

1 me gusta
12

ok, @pmusaraj lo revisó más de cerca y encontró el error… ya se ha corregido aquí:

…por lo que actualizar tus sitios nuevamente debería solucionarlo.

Si se trata de componentes de tema que has creado, recomendamos actualizarlos para que utilicen propiedades personalizadas de CSS en lugar de nuestras variables SCSS. Este cambio te permite usar el modo oscuro automático y facilita la personalización de colores. Más detalles aquí:

6 Me gusta