Alternar modo oscuro/claro

OK, creo que el problema fue que con cada combinación de colores, la opción “los usuarios pueden elegir esto…” o lo que sea no estaba marcada. Funciona ahora.

2 Me gusta

Tengo un problema extraño que solo parece afectar a 2 categorías.

Si en modo oscuro, una actualización muestra el logotipo del sitio Might. Cambiar a claro y luego de regreso a oscuro lo soluciona. Pero volverá a ocurrir en una actualización.

Después de la actualización

Para ser más específico, parece ser solo el tema de los Logotipos. Otros temas en la categoría parecen estar bien. Otros temas en esta categoría no se ven afectados. ¿Podría estar relacionado con que ese tema tenga los 2 logotipos subidos en él?

1 me gusta

Corrección, parece que también ocurre cuando la página se carga por primera vez. ¿Quizás un problema con la detección del modo oscuro del navegador de Discourse?

2 Me gusta

No puedo reproducir este problema. ¿Podrías detallar los pasos, el navegador y el dispositivo que estabas utilizando?

2 Me gusta

Nuestros usuarios informaron que después de cambiar manualmente al modo oscuro, el foro vuelve automáticamente al modo claro una vez que el dispositivo vuelve al modo claro.

Para reproducir:

  1. Configura los ajustes de tu dispositivo en modo claro
  2. Habilita el botón de alternancia en la barra lateral
  3. Habilita el modo oscuro en tu dispositivo
  4. Deshabilita el modo oscuro en tu dispositivo

→ La instancia de Discourse cambia al modo claro. El comportamiento esperado es que el foro permanezca en modo oscuro debido a la elección del usuario de cambiar manualmente.

Básicamente, sería genial tener la opción del comportamiento anterior para alternar entre el modo oscuro, el modo claro y el cambio automático de encendido/apagado.

3 Me gusta

Estoy ejecutando Android 10, creo, en un LG G8X ThinQ, el que tiene el estuche de doble pantalla.

Si cambio de aplicación, al volver parece que carga el tema claro momentáneamente antes de cambiar a oscuro. Similar a la personalización de ventanas. El logo claro permanece (logo móvil).

@jrgong la explicación de cómo reproducirlo y la causa sospechada también es mía.

El navegador está en modo claro y el interruptor está cambiando/forzando el modo oscuro. Luego Discourse está cambiando parcialmente al modo claro.

1 me gusta

Veo un destello momentáneo del esquema de color opuesto al actualizar o al abrir un enlace en una nueva pestaña. También veo un destello similar después de publicar una nueva respuesta por alguna razón.

Tengo activado un tema claro y mi sistema operativo está configurado en modo oscuro. Así que veo la diferencia cuando vuelvo al modo claro.

Supongo que los colores se cambian en el lado del cliente, pero parece que la configuración del usuario no se toca. ¿Es posible actualizar la preferencia de “esquema de color” del usuario al cambiar para evitar esto? El cambio del lado del cliente puede proporcionar una transición fluida, y cambiar la preferencia del usuario puede evitar el breve destello del esquema de color opuesto al actualizar.

5 Me gusta

@jordan.vidrine Solo quería volver a plantear esto. :slight_smile:

2 Me gusta

Debería aparecer en el nuevo menú desplegable del encabezado. (El que es la “barra lateral” pero en forma de menú desplegable)

1 me gusta

@awesomerobot y @jrgong solo una actualización. Esto se investigará :+1:

2 Me gusta

Lamentablemente no fue así. Pero ahora sé por qué.

navigation_menu está configurado como Header-Drop-Down pero no pude ver la opción. Pero cuando desactivé add_color_scheme_toggle_to_header, apareció en el menú desplegable. Así que parece que solo se muestra en una ubicación.

¡Gracias! :slight_smile:

2 Me gusta

Este componente es capaz de seleccionar entre esquemas de color “claro” y “oscuro”, pero no cambia entre modos claro y oscuro, ya que: @media (prefers-color-scheme) no se respeta.

Un componente de tema que se ve así
CSS

@media (prefers-color-scheme: light) {
    .darkonly { display: none; }
}
@media (prefers-color-scheme: dark) {
    .lightonly { display: none; }
}

y HEAD

<script type='text/x-handlebars' data-template-name='/connectors/above-site-header/darkdetector'>
    <span class="darkonly">Oscuro</span><span class="lightonly">Claro</span>
</script>

Mostrará el texto “claro” incluso si el “modo” oscuro está habilitado (o mejor dicho: dirá “oscuro” o “claro” dependiendo del modo oscuro del sistema operativo, e independientemente del esquema de color elegido).

¿Hay alguna solución para esto? Hay muchas cosas que dependen de esas consultas de medios.

3 Me gusta

Si discourse es similar a Windows XP, intenta tener el navegador/sistema operativo en modo claro y discourse en modo oscuro. En Windows XP, el esquema de colores siempre se superpone al predeterminado.

Cuando hay más de un esquema de color oscuro seleccionable por el usuario, aparecen los dos menús desplegables y se muestra el icono de alternancia.

image

Cuando solo hay un esquema de color oscuro seleccionable por el usuario, el menú desplegable Oscuro desaparece y, en su lugar, aparece la casilla de verificación “modo oscuro automático”.

Cuando un usuario piensa: “Oye, no quiero que sea automático, quiero usar el interruptor” y deselecciona la casilla “automático”, el interruptor desaparece.

Así que para obtener el interruptor manual, tienes que habilitar el cambio automático. :thinking:

5 Me gusta

Por lo tanto, la muesca de un iPhone obtiene su color utilizando las etiquetas <meta name="theme-color" media="(prefers-color-scheme: ...)" content="#..."> que se inyectan en el HTML del encabezado. Esto significa que si su dispositivo está en modo oscuro y el conmutador ha seleccionado un esquema de color claro, o cuando el dispositivo está en modo claro y el conmutador ha seleccionado un esquema de color oscuro, el color de la muesca del iPhone es incorrecto.

1 me gusta

Creo que este comportamiento no es deseado:

Actualmente, el color del sistema está configurado en modo oscuro. Uso un logotipo en blanco y negro para el tema claro/oscuro.

  1. En la instancia, configuro el tema en Claro.
  2. Visito la página de un tema.
  3. Inicialmente, se carga el logotipo correcto, pero:
  4. Desplázate hacia abajo y hacia arriba (el encabezado debe cambiar de logotipo completo > título del tema > logotipo completo).
  5. Al desplazarse hacia arriba nuevamente (por ejemplo, donde el título del tema vuelve a ser el logotipo completo, aparece el logotipo incorrecto (blanco sobre blanco).
2 Me gusta

Estoy intentando reproducir esto localmente e incluso cuando solo se puede seleccionar un esquema de color oscuro, todavía veo el menú desplegable, en lugar del modo automático. (en la configuración de administrador)

Reproducción:

  • Instalación vacía de Discourse lista para usar de esta mañana
  • Ver esto en mi perfil → interfaz

  • Eliminar los esquemas de color oscuro dracula, solarized dark y WCAG dark
  • Volver al perfil
  • Ver desaparecer el menú desplegable y aparecer el encabezado “modo oscuro” más la casilla de verificación

Controlado por showDarkColorSchemeSelector y showDarkModeToggle en interface.hbs. Ver también el comentario en interface.js

  @discourseComputed("userSelectableDarkColorSchemes")
  showDarkColorSchemeSelector(darkSchemes) {
    // cuando se establece un esquema oscuro predeterminado
    // el menú desplegable tiene dos elementos (deshabilitar / usar el predeterminado del sitio)
    // pero mostramos una casilla en ese caso
    const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
    return darkSchemes && darkSchemes.length > minToShow;
  },

2 Me gusta

:star_struck: Gracias por una respuesta tan detallada. Solo estaba “no permitiendo” que estos temas oscuros fueran seleccionables, ahora haré algunas pruebas eliminando estos temas por completo.

1 me gusta

Así es, este es un buen caso extremo que has encontrado. Este interruptor solo funcionará en este escenario si el usuario también tiene habilitada esta preferencia personal de discourse-core.

Trabajaremos para que esto funcione también en esa instancia.

4 Me gusta