¿Cómo agregar una clase de cuerpo específica para el modo oscuro (o claro)?

Actualmente no parece haber ninguna clase específica.

Encontré esto pero no funciona ya que el ID del tema es el mismo para el modo oscuro y claro (que se define en el esquema de color, supongo).

¿Supongo que un script corto podría ayudar? ¿Y, tal vez añadir esto al núcleo de Discourse?

¿Le importaría explicar por qué necesita clases específicas añadidas al body para el modo oscuro o claro?

¿Esta característica principal no permite lo que necesita?

El personal del foro que estoy migrando no está de acuerdo con una variable de color generada específica (--tertiary-very-low) que produce este color marrón específico:

Les gustaría modificarlo, y parece que no puedo cambiarlo realmente ya que está generado Y no hay una clase específica para el modo oscuro.

Sin embargo, me encontré con esta información:

No sé si es válido, aún no he podido probarlo, tengo demasiadas cosas que hacer ahora mismo :sweat_smile:. Pero si funciona, eso servirá. De hecho, sería aún mejor.

2 Me gusta

Nosotros (lo siento, diré nosotros ya que estoy con @Canapin haciendo los ajustes en nuestro foro) creamos un tema oscuro usando el preset llamado “Café crème” en la versión francesa de Discourse (“café”, supongo) y acabamos de cambiar el color del :heart: a rojo en lugar de marrón.
La cosa extraña con este tema es que los hipervínculos son casi del mismo color que el texto.
Así que cuando son un enlace incrustado, apenas se pueden ver:


(sí, las últimas dos palabras “cliquez-ici” son un enlace a una página web…)

Así que nuestra idea era hacerlos un poco marrones, para que destacaran. Pero cuando ajustamos la configuración quaternary en la paleta de colores, un montón de colores cambian: el fondo de la “burbuja” detrás del DM cambia a algo más parecido a excremento de pájaro que al marrón que se muestra en el primer mensaje de @Canapin. El cuadro del mensaje superior también cambia (el cuadro “el correo saliente ha sido deshabilitado”) a este mismo color de excremento de pájaro.

Así que la idea era primero usar el css para colorear los hipervínculos, pero aún no hemos descubierto cómo.

1 me gusta

Usar .cooked a como destino de CSS debería funcionar para que establezcas un color personalizado para estos enlaces.

Si bien nuestro sistema principal ahora permite el uso de opciones de esquemas de color oscuros/claros para sus modos correspondientes, también deberías poder usar la consulta de medios CSS para modos oscuros/claros de la siguiente manera:

1 me gusta
@media (prefers-color-scheme: dark) {
    .cooked a, .d-editor-preview a {
        color: var(--primary-low-mid);
    }
}

¡Hice el trabajo. Gracias!

Oops.
No, no funcionó.

Por favor, corríjame si me equivoco. ¿prefers-color-scheme se basa en la preferencia del dispositivo, no en el tema de Discourse realmente seleccionado?

En mi dispositivo con Windows, configuré un tema oscuro. Por lo tanto, los sitios web que utilizan la preferencia de mi dispositivo mostrarán, si es posible, un tema oscuro.

Pero en mi foro, elegí deliberadamente usar un tema claro, no uno oscuro.

La consulta de medios prefers-color-scheme todavía se carga a pesar de que estoy usando un tema claro:

Tema claro, sin modo oscuro,

Aún así, la regla para el tema oscuro se aplica de todos modos:

Pantalla completa:

1 me gusta

Lo siento, te entendí mal y pensé que te referías a la configuración del sistema del modo oscuro, activando el modo oscuro en el foro.

Entonces, ¿tú personalmente usas el esquema de colores claro, pero tus usuarios usan el esquema de colores oscuro?

La captura de pantalla anterior mostraba el esquema de colores oscuro en acción, pero tu respuesta reciente indica que usas el esquema de colores claro.

Hola, lo siento, sí, no está claro, especialmente porque estaba hablando de dos cosas del mismo tipo pero con diferentes esquemas de color. Además, fue un poco confuso para mí.

Entonces, mi pregunta sería: En Discourse, ¿cómo sé qué esquema de color se está utilizando, independientemente de las preferencias de modo claro/oscuro del dispositivo?

Si entiendo las cosas correctamente:
Si mi dispositivo (Windows 10) está configurado en modo oscuro, pero selecciono un esquema de color claro en Discourse, la media query (prefers-color-scheme: dark) en el CSS de mi foro devolverá de todos modos algún tipo de “verdadero” y mis reglas anidadas se aplicarán, aunque haya elegido un esquema de color claro en mi foro (incluso si Windows está configurado en modo oscuro).

Entonces: ¿cómo sé, en el código HTML de Discourse, si estoy utilizando actualmente un esquema de color claro u oscuro? No encontré ninguna clase padre como “light-color-scheme” o “dark-color-scheme”. Por lo tanto, no puedo diferenciar/dirigir esquemas de color específicos en CSS y crear reglas solo para uno u otro.

1 me gusta

Gracias por la aclaración, ahora entiendo.

No agregamos ninguna clase al cuerpo basada en el esquema de color seleccionado actualmente por el usuario.

Si puedo indagar más, ¿es la razón que no te gusta el color que generan nuestras funciones de color para --tertiary en tu esquema oscuro actualmente seleccionado?

¿Qué te gustaría lograr a través de una clase de cuerpo que sientes que no puedes hacer actualmente?

[quote=“jordan.vidrine, post:10, topic:220062”]
¿Es la razón que no te gusta el color que generan nuestras funciones de color para --tertiary en tu esquema oscuro seleccionado actualmente?
[/quote]Sí, exactamente :slight_smile:

[quote=“jordan.vidrine, post:10, topic:220062”]
¿Qué te gustaría lograr a través de una clase de cuerpo que sientes que no puedes hacer actualmente?
[/quote]Ahora que leo esta pregunta… no estoy seguro, ya que la única forma de reemplazar un color generado, hasta donde yo sé, es

:root {
  --primary-medium: #666666;
}

Pero al ser un selector raíz, una clase en el elemento html o body no podría apuntar a un esquema de color antes de :root.
Así que… no lo sé.

Pero en resumen, la idea sería cambiar un color generado específico para un esquema de color específico. :person_shrugging:

No pasa nada si no es posible. Hicimos algunos experimentos con los colores de nuestro esquema y actualmente estamos lo suficientemente satisfechos con los colores generados. :slight_smile: Podría ser mejor, pero está lejos de ser un gran problema. :slight_smile:

1 me gusta

Si lo deseas, existe una especie de solución alternativa oculta.

Puedes crear una carpeta y solo añadir un archivo about.json en ella.

De hecho, hice esto para crear un esquema de color solarized light, porque quería especificar mis propias variantes, en lugar de depender de las funciones de color integradas.

Aquí está el archivo about.json real que hice.

Luego, instalarías este “tema”, que a su vez instalaría este esquema de color en tu foro. En ese momento, podrías hacerlo disponible para usar en otros temas también.

{
  "name": "Solarized Light",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Solarized Light": {
      "primary": "002B36",
      "primary-high": "4C6869",
      "primary-medium": "7E918C",
      "primary-low-mid": "A4AFA5",
      "primary-low": "D6D8C7",
      "primary-very-low": "F0ECD7",
      "secondary": "FCF6E1",
      "secondary-very-high": "E8E6D3",
      "secondary-high": "97A59D",
      "secondary-medium": "6C8280",
      "secondary-low": "325458",
      "tertiary": "0088cc",
      "tertiary-high": "329ED0",
      "tertiary-medium": "7EBFD7",
      "tertiary-low": "D6E6DE",
      "quaternary": "e45735",
      "header_background": "FCF6E1",
      "header_primary": "002B36",
      "highlight": "ffff4d",
      "highlight-high": "BCAA7F",
      "highlight-medium": "E3D0A3",
      "highlight-low": "FDF9AD",
      "danger": "e45735",
      "danger-low": "F8D9C2",
      "success": "009900",
      "success-medium": "4CB544",
      "success-low": "CFE5B9",
      "love": "fa6c8d",
      "love-low": "FCDDD2"
    }
  },
  "modifiers": {
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
2 Me gusta

Recuerdo haber visto esto hace mucho tiempo, ¡cuando trabajaba más a fondo en mis instalaciones de Discourse!

Definitivamente una buena solución alternativa. Gracias. La consideraré la solución adecuada, aunque pueda considerarse un poco improvisada.

1 me gusta

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.