Selector de datos para temas

Desarrollador
1

Hola,

Me gustaría proponer un selector de datos para temas que facilite la edición de temas completos desde un Componente.

No estoy seguro de lo única que es mi situación, pero estoy ejecutando un ejemplo donde tengo dos instancias de graceful instaladas, por lo que puedo usar una paleta oscura y una clara. Estoy utilizando un componente de tema para realizar ediciones en estos temas remotos, como cambios universales (por ejemplo, modificar el botón de “me gusta”). Todo funciona muy bien para los cambios universales gestionados por los estilos, pero el problema surge cuando quiero hacer una edición específica de la versión oscura que no debe aparecer en el tema claro. No veo una forma de usar CSS para hacer cambios según el ID del tema. Para lograr lo que deseo actualmente, tendría que crear componentes de tema individuales para cada tema para los pequeños ajustes que necesito.

Quizás algo como [data-theme-id].

Si esto ya es posible, siéntete libre de ignorar mi sugerencia. Solo creo que esto ayudaría mucho a los sitios que desean hacer ediciones en múltiples temas sin acumular una larga lista de componentes.

2

No estoy seguro de que lo entienda, pero puedes agregar algo de CSS directamente en esos temas claros y oscuros.

En mi opinión, los componentes son realmente excelentes para cambios universales como margen, visualización, relleno y ancho, pero para los colores, a menos que uses variables, es mejor editar los temas directamente.

Parece una complicación innecesaria de una solución que ya está disponible :thinking:

3

Pero editar temas remotos hace que tus cambios se pierdan la próxima vez que se actualicen, ¿no?

Esto no se trata solo de colores, sino de realizar cambios específicos en temas concretos desde un solo componente, sin necesidad de crear más componentes y aplicarlos solo a algunos temas.

4

Tienes razón. Para un tema remoto, podrías usar tres componentes:

corrección de tema universal para cambios compartidos
y corrección de tema oscuro / corrección de tema claro para esos cambios específicos (como los colores). Puedes vincular un componente a un solo tema.

El tema claro ‘graceful’ tendrá la corrección universal y la corrección clara.
El tema oscuro ‘graceful’ tendrá la corrección universal y la corrección oscura.

Como último recurso, puedes agregar !important a una línea de esas correcciones claras/oscuras si un cambio no funciona.

5

Supongo que tienes razón. Ya había pensado en un componente universal y luego un componente por tema, es decir, tres en este ejemplo, pero me pareció excesivo tener tres repositorios cuando quizás se podría haber solucionado fácilmente con un selector de datos, ya que casi todo lo demás en Discourse lo tiene.

Como nota, el ID del tema está en el atributo meta name como un ID de contenido, y la palabra clave es discourse_themes_id. En el enlace para cambiar de tema, aparece como [data-id=“#”], al menos si inspecciono el enlace del selector de temas tipo hamburguesa creado por ese componente instalado aquí en Meta o en uno de mis sitios de prueba. Así que no es que la información no esté disponible en Discourse.

6

Si agregas esto a la pestaña de encabezado de tu componente de tema

<script type="text/discourse-plugin" version="0.8">
  const themeSelector = require('discourse/lib/theme-selector');
  const currentThemeId = themeSelector.currentThemeId();
  document.body.dataset.themeId = currentThemeId;
</script>

Se agregará un atributo data-theme-id a la etiqueta <body>, que puedes utilizar de la siguiente manera:

[data-theme-id="1"] {
  // CSS del tema claro
}

[data-theme-id="2"] {
  // CSS del tema oscuro
}
7

En este caso muy específico, es posible que puedas usar nuestros helpers de SCSS. Aquí tienes un ejemplo del núcleo, pero debería funcionar igual en un tema:

También puedes usar @is-dark-color-scheme.

De esta manera, tu componente no dependerá de theme-ids, los cuales cambiarían si instalas el tema en otro sitio.

8

¡Ambos son los mejores, muchas gracias :)}