¿Cómo funcionan los colores y cómo cambiarlos?

pHneutre · 20 Marzo, 2025 10:12

Lo siento por el tema tan general, pero he estado dándole vueltas a esto y no encuentro ningún tutorial o explicación adecuada.

Cada vez que necesito cambiar un color en algún lugar de Discourse, sigo este camino:

¿El color está gestionado por un componente de tema? Si no,
¿Parece estar gestionado por /admin/customize/colors? Si no,
Abro las herramientas de desarrollador e intento encontrar el CSS correspondiente.

Pero entonces me pierdo porque encuentro cosas como var(--primary-low) y no tengo ni idea de dónde se definen, aunque parecen relacionadas con la noción de color primario en /admin/customize/colors. Entonces:

¿Cómo se definen estas cosas var()?
¿Cuál es la forma recomendada de modificarlas de forma coherente?

Canapin · 20 Marzo, 2025 11:15

Los colores se (calculan) aquí:

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

Las variables CSS se definen aquí:

github.com/discourse/discourse

app/assets/stylesheets/color_definitions.scss

main

// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss
:root {
  color-scheme: #{schemeType()};

  --scheme-type: #{schemeType()};
  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};
  --quaternary: #{$quaternary};
  --header_background: #{$header_background};
  --header_primary: #{$header_primary};
  --highlight: #{$highlight};
  --danger: #{$danger};
  --success: #{$success};
  --love: #{$love};
  --d-selected: #{$selected};
  --d-hover: #{$hover};
  --always-black-rgb: 0, 0, 0;

This file has been truncated. show original

Si quieres anular, digamos, --primary-medium, puedes añadir esto a tu tema:

:root {
    --primary-high: red;
}

Sin embargo, no sé cómo usar las funciones de transformación de color, que necesitan variables SCSS.

Veo que @import "common/foundation/variables"; no es necesario ya que “las variables principales y del tema ahora se inyectan antes de que se compile cualquier archivo SCSS”, pero no pude hacerlo funcionar de todos modos. Le paso el micrófono a usuarios más conocedores

ondrej · 20 Marzo, 2025 13:13

Puedes consultar la guía de estilo

También puedes consultar /styleguide/atoms/colors para ver los colores. Debes habilitarlo en la configuración de tu sitio buscando ‘styleguide’

Por ejemplo: https://meta.discourse.org/styleguide/atoms/colors

pHneutre · 20 Marzo, 2025 13:24

Vaya, es la primera vez que oigo hablar de styleguide, gracias.
Entonces, entiendo que el CSS personalizado es la única forma de modificar estos estilos, como dijo @Canapin, ¿verdad? ( para confirmar si quieres)

awesomerobot · 20 Marzo, 2025 13:37

Este método es probablemente el más fácil, funcionará para cualquiera de los colores generados automáticamente

pero también puedes anular los colores en el archivo about.json de un tema como se describe aquí Override values for auto-generated color variables

system · 19 Abril, 2025 13:37

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

Tema		Respuestas	Vistas
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11860	9 Enero 2018
Referencing Discourse theme color variables in custom theme component? Support css	4	72	20 Abril 2025
Styling Discourse with variables: Show & Tell Dev dev-news	1	168	5 Agosto 2025
Reference for full color customization Dev	4	1311	14 Febrero 2023
Challenges creating a custom color palette Dev	8	149	29 Enero 2025

¿Cómo funcionan los colores y cómo cambiarlos?

Temas relacionados