Como funcionam as cores e como mudá-las?

pHneutre · Março 20, 2025, 10:12am

Desculpe pelo assunto amplo, mas tenho pensado sobre isso e não consigo encontrar um tutorial ou explicação apropriada.

Sempre que preciso alterar uma cor em qualquer lugar no Discourse, sigo este caminho:

A cor é gerenciada por um componente de tema? Se não,
Parece ser gerenciada por /admin/customize/colors? Se não,
Abra as ferramentas de desenvolvedor e tente encontrar o CSS correspondente

Mas então me perco porque encontro coisas como var(--primary-low) e não tenho ideia de onde elas são definidas, embora pareçam relacionadas à noção de cor primária em /admin/customize/colors. Então:

Como essas coisas var() são definidas?
Qual é a maneira recomendada de modificá-las consistentemente?

Canapin · Março 20, 2025, 11:15am

As cores são (calculadas) aqui:

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

As variáveis CSS são definidas aqui:

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

Se você quiser substituir, digamos, --primary-medium, você pode adicionar isso ao seu tema:

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

No entanto, não sei como usar as funções de transformação de cores, que precisam de variáveis SCSS.

Vejo que @import "common/foundation/variables"; não é necessário, pois “as variáveis principais e de tema agora são injetadas antes que qualquer arquivo SCSS seja compilado”, mas não consegui fazê-lo funcionar mesmo assim. Passo o microfone para usuários mais experientes

ondrej · Março 20, 2025, 1:13pm

Você pode verificar o guia de estilo

Você também pode verificar /styleguide/atoms/colors para cores. Você precisa habilitar nas configurações do seu site pesquisando por ‘styleguide’

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

pHneutre · Março 20, 2025, 1:24pm

Uau, primeira vez que ouço falar de styleguide, obrigado.
Então, entendo que CSS personalizado é a única maneira de modificar esses estilos, como @Canapin disse, certo? ( para confirmar se quiser)

awesomerobot · Março 20, 2025, 1:37pm

Este método é provavelmente o mais fácil, funcionará para qualquer uma das cores geradas automaticamente

mas você também pode substituir cores no arquivo about.json de um tema, conforme descrito aqui Override values for auto-generated color variables

system · Abril 19, 2025, 1:37pm

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

Tópico		Respostas	Visualizações
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11860	9 de Janeiro de 2018
Referencing Discourse theme color variables in custom theme component? Support css	4	72	20 de Abril de 2025
Styling Discourse with variables: Show & Tell Dev dev-news	1	168	5 de Agosto de 2025
Reference for full color customization Dev	4	1311	14 de Fevereiro de 2023
Challenges creating a custom color palette Dev	8	149	29 de Janeiro de 2025

Como funcionam as cores e como mudá-las?

Tópicos relacionados