Alternar modo oscuro/claro

[Discourse]

Este componente de tema ha sido obsoleto. Consulta Dark/light mode toggle now available in core

	Resumen	Dark/Light Mode Toggle añade un botón de alternancia de esquema de colores en el menú hamburguesa. El botón alterna entre un esquema de colores claro u oscuro para un tema.
	Enlace al repositorio	https://github.com/discourse/discourse-color-scheme-toggle
	¿Nuevo en Temas de Discourse?	Guía para principiantes sobre el uso de Temas de Discourse

Instala este componente de tema

Dado que este es un componente de tema #oficial mantenido por el equipo de Discourse, las solicitudes de #soporte, #reportar:bug, #contribuir:ux y #contribuir:feature pueden realizarse en las categorías correspondientes aquí en Meta, y etiquetadas con la etiqueta adecuada del componente de tema. Haz clic en un enlace a continuación para comenzar.

 Soporte  Bug  UX  Función

Características

Este componente permite un icono de alternancia de modo oscuro/claro en tu foro de Discourse. También cambiará automáticamente si cambias el sistema operativo a un modo diferente a tu esquema de colores actual.

Puedes elegir mostrar el botón de alternancia en la nueva barra lateral de Discourse o en la cabecera junto con otros iconos.

Barra lateral

Cabecera

Pasos importantes

Para que esto funcione correctamente, al menos 2 opciones de esquema de colores deben estar habilitadas en tu área de /admin/customize/colors. Al menos dos colores deben tener habilitada la opción el esquema de colores puede ser seleccionado por los usuarios.

Se debe establecer un esquema de colores predeterminado para el modo oscuro: /admin/site_settings/category/basic?filter=dark

Una vez hecho esto, los usuarios deberían poder elegir entre dos esquemas de colores como sus preferencias light y dark en el menú de preferencias de su usuario.

Configuración

Nombre	Descripciones
iconos svg
agregar botón de alternancia de esquema de colores a la cabecera	Agregar botón de alternancia de esquema de colores a la cabecera del sitio

Traducción	Predeterminado
toggle_button_title	Alternar esquema de colores

¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Standard, Business y Enterprise.

[chrisbagsrocks]

¿Esto solo funciona con la entrada del usuario yendo a sus preferencias y habilitándolo? Sería mucho mejor si pudiera ser una implementación en todo el sitio en lugar de basarse en el usuario.

[jordan.vidrine]

Un administrador habilitaría este componente para todo el sitio.

A partir de ahí, dependiendo de lo que haya configurado el administrador que configuró el componente, el interruptor estará en el menú hamburguesa del usuario o en la cabecera del foro. Todos los usuarios pueden usarlo una vez que haya sido habilitado por un administrador.

[chrisbagsrocks]

Lo siento, no creo haber sido claro con mi pregunta. Al mirar su tutorial de instalación, después de que se habilita en el lado del administrador, ya sea en el menú hamburguesa o en la cabecera, parece que cada usuario individual tiene que ir a sus preferencias y habilitar/agregar los esquemas de color claro/oscuro. De lo contrario, no funciona para un nuevo usuario / alguien que no ha iniciado sesión. Entonces mi pregunta es:

¿Es posible implementar el esquema de color en todo el sitio en lugar de basarse en cada usuario?

Su foto está abajo como referencia

[jordan.vidrine]

Creo que un esquema claro y un esquema oscuro se asignarán automáticamente una vez que un administrador lo habilite. A partir de ahí, un usuario puede editar qué esquemas de colores oscuros y claros se utilizan según su preferencia personal.

Es posible que también tenga que agregar una selección aquí /admin/site_settings/category/basic?filter=dark

He actualizado las instrucciones para reflejar esta adición. ¡Disculpas por la confusión!

[bekircem]

Parece que no funciona correctamente cuando el esquema de color predeterminado es oscuro. ¿Cómo podemos adaptar esto?

Cuando el esquema de color predeterminado es oscuro, el interruptor no funciona a menos que el usuario haya seleccionado el esquema de color claro en las preferencias de la interfaz.

[jordan.vidrine]

Hmmm, creo que esto está sucediendo porque estoy verificando la configuración del esquema de usuario prefers-dark basándome en la configuración del navegador y del sistema.

¿Puedes mirar en la consola de tu inspector y ver si aparece algo al intentar usar el interruptor?

Puede que tenga que investigar esto.

[poyrazdursuncan (Dursun Can)]

Advertencias en domain.com/logs ;

El componente/tema de alternancia oscuro/claro está generando errores

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

A mí también. El componente de luz oscura está generando errores.

[jordan.vidrine]

@poyrazdursuncan

El tema/componente de alternancia claro-oscuro está generando errores

@Mr.X_Mr.X

Lo mismo por aquí. El componente claro-oscuro está generando errores.

Hmmm… no estoy seguro de dónde viene eso, ya que no tengo ningún código que deba enviarlo. La única comunicación que tengo sobre un error está aquí:

https://github.dev/discourse/discourse-color-scheme-toggle/blob/3474a80d81d89f1264be5d55652dc65b5aea68e2/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L56-L59

¿Puedes enlazar tu sitio aquí si es posible? ¿Está tu instancia actualizada?

[Arta_S (Arta)]

Hola,

Tengo un problema. Después de añadir el tema, los iconos de alternancia no se añaden en el menú hamburguesa. Ni siquiera existen en el código base. Además, demostración aquí los botones no funcionan. Es decir, no cambian entre temas claro y oscuro.

¿Alguien más tiene el mismo problema?

[jordan.vidrine]

¿Puedes revisar la consola de las herramientas de desarrollador y ver si aparece algo relacionado con esto? Estoy viendo que los iconos funcionan bien en el sitio de demostración.

[Arta_S (Arta)]

Aquí está el video:

Mi principal problema es que en mi foro, ni siquiera veo estas opciones en el menú hamburguesa:

[jordan.vidrine]

No tienes la pestaña console abierta en tu grabación de pantalla, por lo que es difícil ver si se están produciendo errores.

¿Te has asegurado de seguir cada paso en la publicación original de este tema?

al menos 2 opciones de esquema de color deben estar habilitadas en tu área /admin/customize/colors
Un tema oscuro debe estar habilitado en: /admin/site_settings/category/basic?filter=dark

¿Y tú, como usuario, tienes seleccionados dos esquemas de color, uno para claro y otro para oscuro, en tus preferencias de usuario?

[Arta_S (Arta)]

@jordan.vidrine

¿Te has asegurado de seguir cada paso en la publicación original de este tema?

Hola,

Sí, esto se ejecutó correctamente. Hoy todo se muestra correctamente. Esto se debió a las cookies. Fue extraño que en otros navegadores (donde nunca visité el foro) también se mostrara como faltante. Ahora todo está correcto. Gracias y disculpas por la confusión que he causado.

Lo único es que todos los usuarios, incluidos los invitados, pueden ver el interruptor en la cabecera. Pero como administrador, cuando estoy conectado, no puedo ver los interruptores. ¿Es esto intencional? ¿Podría ser caché del servidor o algo así?

[jordan.vidrine]

Hmm, eso es interesante. ¿Tienes un esquema de color oscuro y claro seleccionado en tus preferencias de usuario?

¿Y estás usando el tema que tiene el componente instalado?

[Arta_S (Arta)]

Tuve que ir a mi perfil y habilitar esta opción (Habilitar esquema de color automático en modo oscuro) para que apareciera en la cabecera. Probablemente estuve jugueteando y me perdí esa casilla de verificación.

[agungor]

¡Me encanta este componente! Pero tengo un pequeño problema.

Parece que el componente solo funciona cuando la opción “Habilitar esquema de color automático en modo oscuro” está activada. Mi problema ocurre cuando la opción está activada y la preferencia del sistema está configurada en modo oscuro (es decir, esquema de color preferido: oscuro).

En el escenario anterior, cuando intento cambiar a un tema claro a través de Preferencias > Interfaz > Tema, no sucede nada, lo cual está bien para mí. Presumiblemente, dado que mi preferencia del sistema ya está configurada en modo oscuro, cambiar a modo claro en Discourse no la anula.

Cuando hago lo mismo con el componente de alternancia de modo oscuro/claro, y si mi preferencia de tema en Discourse está configurada en claro, el interruptor realmente me permite cambiar a modo claro (lo cual es aún mejor en mi opinión), pero el logotipo del sitio en el encabezado permanece en modo oscuro y es difícil de ver en modo claro. Cuando miro en el inspector, veo que el elemento se ve así:

<div><a href="/" data-auto-route="true"><picture><source srcset="<link to image>" media="(prefers-color-scheme: dark)"><img src="<link to image>" id="site-logo" class="logo-big"></picture></a></div>

Noté la parte media=“(prefers-color-scheme: dark)” aunque ahora estamos en modo claro establecido por el interruptor.

Debo agregar que el logotipo del sitio normalmente cambia bien entre el modo claro y oscuro cuando la opción “Habilitar esquema de color automático en modo oscuro” en Discourse está desmarcada. Pero esto evita que se muestre el interruptor de modo oscuro/claro

Además, si mi preferencia de tema en Discourse está configurada en Oscuro desde Preferencias > Interfaz > Tema, y mi preferencia del sistema también es oscura, el interruptor no cambia entre claro y oscuro; siempre permanece en el tema oscuro.

Idealmente, preferiría que el componente de alternancia de modo oscuro/claro funcionara como lo hace ahora, pero que el logotipo del sitio en el encabezado siga la configuración clara/oscura actualmente activa, no el esquema de color preferido del sistema del usuario.

[MattiaB (Mattia)]

@agungor

Cuando hago lo mismo con el componente Dark / Light Mode Toggle, y si mi preferencia de tema en Discourse está configurada en Claro, el interruptor realmente me permite cambiar al modo claro (lo cual es aún mejor en mi opinión) pero el logo del sitio en la cabecera permanece en modo oscuro y es difícil de ver en modo claro.

¡Lo mismo aquí! ¿Encontraste una solución?

No soy desarrollador frontend, pero hice algunas depuraciones:
Cuando está en modo oscuro, como lo tiene configurado mi computadora, el HTML del logo se ve así:

Y el logo se ve bien, con el modo oscuro funcionando completamente. Al cambiar al modo claro, el tema se vuelve claro pero el logo desaparece (el logo oscuro permanece).

Así es como se ve el HTML:

Hay una línea adicional, <source srcset="https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png" media="(prefers-color-scheme: dark)"> que “bloquea” la carga del logo correcto. Si elimino esa línea con Inspect Element, y solo dejo <img src="https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png" alt="RadixTalk" id="site-logo" class="logo-small" width="36">, aparece el logo correcto.

Espero que esta información haya sido útil.

[agungor]

@MattiaB

¡Lo mismo aquí! ¿Encontraste una solución?

Me temo que no. Terminé cambiando el color de fondo del encabezado de una manera que ya no importaba cambiar el logotipo entre el modo claro y el oscuro