¿Cómo anular una variable de color solo para un tema?

[Queth (Q)]

(Lo siento, no pude encontrar dónde encajaría mejor esto; elegí dev)

Tengo 3 temas. En uno de ellos, el cálculo de $primary_low genera un color con muy poco contraste respecto al bgcolor. He intentado ajustar el color primario (el color de fondo no se puede cambiar porque es un color de marca), pero sin éxito. O bien no hay casi contraste, o se crea un efecto muy de “resaltado”, que es justo lo contrario de lo que quiero.

La solución (según pensé) sería simplemente asignar un valor de color a $primary_low en el CSS de ese tema específico. Pero no se mantiene. Incluso añadir !important no funciona. ¿Hay alguna manera de cambiar esto solo para 1 tema? Nota: estos son temas locales.

[david (David Taylor)]

Mira la guía de @awesomerobot aquí:

Override values for auto-generated color variables

As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.) To override one of these colors you need to add it to the color_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors. "color_schemes": { “My_colors”: { "primary": "000000…

[Queth (Q)]

¡Ah, gracias! Lamentablemente, es un tema local y no será remoto. ¿Hay alguna otra forma en la que pueda hacer esto?

[david (David Taylor)]

Esto se considera una función avanzada, por lo que no está disponible en la interfaz de usuario. Puedes usar la CLI de temas en ‘temas locales’.

[Queth (Q)]

Me alegra que se pueda hacer de alguna manera Aunque todo esto de Ruby todavía es demasiado avanzado para mí, realmente espero que en el futuro también se pueda usar la sobrescritura para temas locales.

Voy a pensar en cuál puedo hacer con mi nivel de conocimiento… Soy un completo novato en GitHub, así que crear un tema remoto me parece muy intimidante. (Sí, he leído la guía).

[smrtey]

Los temas remotos son realmente sencillos. Nunca había usado GitHub antes y no tenía idea de qué significaba about.json, pero lo he utilizado en varios temas sin ningún problema. Solo creas un tema local, lo subes a GitHub y luego puedes añadir contenido al archivo about.json en GitHub. Así obtendrás una serie de opciones personalizables geniales para tu tema al reinstalarlo en tu sitio desde GitHub.

Tendré tiempo más tarde hoy para escribir una guía paso a paso y entonces todo debería tener sentido muy rápidamente.

Edit: Jaja, estaba pensando en settings.yml, que también es otra gran ventaja de los temas remotos, pero al ver el enlace de David más arriba, about.json es aún más sencillo.

[smrtey]

Aquí están las instrucciones excesivamente detalladas. Avísame si no funcionan como se anuncia.

1. Crea una cuenta en GitHub si aún no tienes una.

2. En Discourse, exporta tu tema:
   Administración → Personalizar → Selecciona el tema que deseas exportar
   

   
   
   Esto guardará el tema como un archivo .zip en tu computadora.

3. Extrae los archivos en tu computadora.

4. Ve a GitHub y crea un nuevo repositorio:
   

   
   
   
   

5. Haz clic en “subir un archivo existente”
   

   

6. Arrastra las carpetas y archivos descomprimidos del tema que exportaste (algo como esto):
   

   
   
   desde tu computadora a tu repositorio y haz clic en “Confirmar cambios”.

7. Ahora puedes editar el archivo about.json. Haz clic en el nombre del archivo.
   
   

El archivo se verá algo así:

{
  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-light": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

8. Haz clic en el icono del lápiz de edición.

Ahora puedes editarlo. Recomiendo cambiar el nombre del esquema de colores; de lo contrario, cuando importes el tema de nuevo a tu sitio, terminarás con dos esquemas de colores diferentes con el mismo nombre. Así que a continuación he cambiado "blue-light": { por "blue-lite": {.

Simplemente agrega tus sobrescrituras de variables de color al final del esquema de colores después de love y asegúrate de incluir una coma después del valor de love.

  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-lite": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100",
      "primary-high": "333333",
      "primary-medium": "666666",
      "primary-low-mid": "999999",
      "primary-low": "cccccc"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

9. Haz clic en “Confirmar cambios”.

10. Haz clic en el nombre del repositorio para volver a la página principal del repositorio.
    

    

11. Copia el enlace de Clonar o Descargar.
    

    

12. En Discourse, importa tu tema:
    Administración → Personalizar → Instalar → Desde un repositorio git: Pega el enlace e instala.
    

    

13. Ahora puedes editar este tema tal como lo harías con cualquier tema local, utilizando tus valores personalizados $primary-high, $primary-medium, $primary-low-mid y $primary-low.

[Queth (Q)]

¡Muchas gracias, @smrtey, por crear esta guía paso a paso! Hoy finalmente pude sentarme a seguirla y funcionó a la perfección.
Estos fueron también mis primeros pasos en GitHub; nunca había creado una cuenta ni un repositorio. Así que, gracias de nuevo.

¿Quizás esto podría incluirse en la guía de creación de temas? ¿O tal vez enlazarse a ella?

[smrtey]

Las configuraciones personalizadas también son una gran cosa que descubrí. Necesitas agregar un archivo settings.yml al repositorio de GitHub de tu tema o componente. Aquí hay un componente de ejemplo con configuraciones que puedes personalizar:

GitHub - oerog/CustomSettings

Este es el archivo settings.yml que define las variables $header_text, $header_text_color y $header_bg:

header_text: 
  type: bool
  default: false
  description:
    en: 'Selecciona para agregar texto en la cabecera junto al logotipo.'
header_text_color: 
  type: string
  default: "$header_primary"
  description:
    en: 'Color del texto (el predeterminado es "header primary")'
header_bg: 
  type: string
  default: "$header_background"
  description:
    en: 'Color del fondo (el predeterminado es "header background")'

Esto te ofrece estas opciones de configuración al instalar el componente:

Lo cual genera este CSS:

@if $header_text == "true" {
    .d-header .title::after {
        padding: 0 20px;
        font-size: 1.3em;
        color: $header_text_color;
        background-color:$header_bg;
        content: "Here is some text";
    }
    .archetype-regular #main.no-text .d-header .title::after {
        display:none;
    }
}

Puedes instalar el mismo componente varias veces (simplemente renómbralo una vez instalado para facilitar el seguimiento), de modo que puedas agregar el componente a diferentes temas con configuraciones distintas para cada uno.

Así es como creas el archivo settings.yml. Crea un archivo nuevo:

Ingresa el código (yo lo escribo en un archivo de texto y luego lo copio y lo pego):

Guárdalo con “Commit new file”:

Luego instala el componente en tu sitio y edita las configuraciones.