Desafíos al crear una paleta de colores personalizada

mk0r · 27 Enero, 2025 00:17

He intentado crear un esquema de color completamente personalizado definiendo mis colores en el archivo about.json de mi tema en GitHub.

Desafortunadamente, solo algunas de mis definiciones de color se respetan en el sitio.

Por ejemplo, en mi esquema json defino: "success_low": "DDE2B2",

Sin embargo, mi guía de estilo muestra un color diferente (calculado) para var(--success-low).

He leído todas las guías y parece que tal vez las definiciones de paleta json no se utilizan todas y, en cambio, discourse está calculando algunos de los valores por sí mismo y no respeta mi definición.

¿Necesito codificar los colores en un archivo de variables css? ¿Anularán estos los valores calculados? ¿Dónde y cómo debería hacer esto? Me gustaría definir cada color individualmente para el modo claro y oscuro en discourse, no me gustan ninguno de los valores calculados.

Gracias por cualquier ayuda. Ha sido muy difícil entender cómo funciona todo esto, qué tiene prioridad en el css final, etc.

actualización: esta publicación parecería contradecir mi solución de problemas:

Entonces, esto me deja más confundido sobre por qué discourse todavía parece generar colores automáticamente.

Lilly · 27 Enero, 2025 00:43

Veo que hay un guion bajo en el primero (success_low) y un guion en el segundo (success-low).

Siempre puedes pegar tu paleta de colores aquí tal como aparece en el archivo json para que podamos echar un vistazo.

mk0r · 27 Enero, 2025 00:58

Gracias, revisaré todos los guiones bajos frente a los guiones. ¿Hay algún archivo JSON de referencia que pueda encontrar en algún lugar que tenga una referencia para todas las variables, con guiones y guiones bajos en los lugares correctos?

mk0r · 27 Enero, 2025 01:02

Originalmente usé el tema “solarized” como referencia.

mk0r · 27 Enero, 2025 01:14

Esto es extremadamente confuso. En la guía de estilo, las variables CSS etiquetadas usan guiones:

Mientras que en este (y otros) esquemas de ejemplo tienen guiones bajos:

github.com/exodrifter/discourse-gruvbox

about.json

main

{
  "name" : "Gruvbox",
  "about_url" : "https://github.com/exodrifter/discourse-gruvbox",
  "license_url": "https://github.com/exodrifter/discourse-gruvbox/blob/master/LICENSE.md",
  "color_schemes": {
    "Gruvbox Light": {
      "primary": "3c3836",
      "secondary": "fbf1c7",
      "tertiary": "076678",
      "quaternary": "af3a03",
      "header_background": "f9f5d7",
      "header_primary": "282828",
      "highlight": "427b58",
      "danger": "9d0006",
      "success": "79740e",
      "love": "8f3f71",
      "primary_very_low": "fbf1c7",
      "primary_low": "d5c4a1",
      "primary_low_mid": "a89984",
      "primary_medium": "7c6f64",

This file has been truncated. show original

Admito que no soy el más listo de la clase para codificar, y estoy seguro de que a las personas que han trabajado en esto durante mucho tiempo les resulta más obvio e intuitivo… pero intentar descifrar esto me hace sentir un poco loco.

Es realmente difícil tener una comprensión intuitiva de toda la lógica de cómo se utilizan los colores del modo claro y oscuro. Entre la multitud de archivos SCSS y transformaciones, JSON, la GUI de administración, las paletas que son (¿un tanto?) independientes de los temas…

Disculpen mi divagación, solo estoy teniendo algunas dificultades.

Lilly · 27 Enero, 2025 01:30

tienes otro tema antiguo que puede ayudarte con esto

mk0r · 29 Enero, 2025 01:26

Lamentablemente, ese hilo no resolvió el problema.

Sigo confundido: ¿no hay una guía clara disponible sobre cómo configurar cada color? ¿Y cuáles son la sintaxis/nombres correctos en el json frente a las variables css?

Lilly · 29 Enero, 2025 01:47

¿Miraste esto?

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/color_transformations.scss

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

No veo nada obviamente malo en tu archivo about.json, así que puede ser algo más con la forma en que tienes configurado tu tema.

¿Específicamente qué variables funcionan y cuáles no?

¿Has leído alguno de los temas de desarrollo de temas? Creo que es posible que te falten otros archivos de tema requeridos en tu repositorio.

mk0r · 29 Enero, 2025 02:21

Sí, los he leído, pero no hay una referencia completa para todas las variables de color que pude ver. Basé mi archivo about.json en el tema “solarized” que parecía tener todas las variables declaradas. Voy a intentarlo de nuevo desde cero y volveré a informar y usaré las herramientas de desarrollador para ver cuáles podrían ser los problemas…

Gracias por la ayuda hasta ahora.

Tema		Respuestas	Vistas
Reference for full color customization Dev	4	1308	14 Febrero 2023
How do colors work and how to change them? Support ux	5	113	20 Marzo 2025
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11859	9 Enero 2018
How to add more options to color palettes? Support color-palettes	4	69	15 Agosto 2025
Color definitions for more than light/dark color schemes Support	2	494	6 Enero 2024

Desafíos al crear una paleta de colores personalizada

Temas relacionados