Sfide nella creazione di una tavolozza di colori personalizzata

mk0r · 27 Gennaio 2025, 12:17am

Ho provato a creare uno schema di colori completamente personalizzato definendo i miei colori nel file about.json del mio tema su GitHub.

Sfortunatamente, solo alcune delle mie definizioni di colore vengono rispettate sul sito.

Ad esempio, nel mio schema json definisco: "success_low": "DDE2B2",

Tuttavia, la mia guida di stile mostra un colore diverso (calcolato) per var(--success-low)

Ho letto tutte le guide e sembra che forse le definizioni della palette json non vengano utilizzate tutte e invece discourse stia calcolando alcuni valori da solo e non rispettando la mia definizione.

Devo invece codificare a mano i colori in un file di variabili css? Sovrascriveranno i valori calcolati? Dove e come dovrei farlo? Vorrei definire ogni singolo colore sia per la modalità chiara che per quella scura in discourse, non mi piacciono nessuno dei valori calcolati.

Grazie per qualsiasi aiuto. È stato molto difficile capire come funzionano tutte queste cose, cosa ha la priorità nel css finale, ecc.

aggiornamento: questo post sembrerebbe contraddire la mia risoluzione dei problemi:

Quindi mi lascia ancora più confuso sul motivo per cui discourse sembra ancora generare automaticamente i colori.

Lilly · 27 Gennaio 2025, 12:43am

vedo che c’è un underscore nel primo (success_low) e un trattino nel secondo (success-low).

puoi sempre incollare qui la tua palette di colori così come appare nel file json per darci un’occhiata.

mk0r · 27 Gennaio 2025, 12:58am

Grazie, esaminerò e controllerò tutti i trattini bassi rispetto ai trattini. Esiste un file JSON di riferimento che potrei trovare da qualche parte con un riferimento per tutte le variabili, con trattini e trattini bassi nei posti giusti?

mk0r · 27 Gennaio 2025, 1:02am

Originariamente ho usato il tema “solarized” come riferimento

mk0r · 27 Gennaio 2025, 1:14am

Questo è estremamente confuso. Nella styleguide le variabili CSS etichettate usano i trattini:

Mentre in questo (e in altri) schemi di esempio hanno i trattini bassi:

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

Ammetto di non essere il coltello da codice più affilato nel cassetto, e sono sicuro che le persone che ci hanno lavorato a lungo lo trovino più ovvio e intuitivo… ma cercare di farsi strada in questo mi fa sentire un po’ pazzo.

È davvero difficile avere una comprensione intuitiva di tutta la logica su come vengono utilizzati i colori della modalità chiara e scura. Tra la moltitudine di file SCSS e trasformazioni, JSON, GUI di amministrazione, palette che sono (in qualche modo?) indipendenti dai temi…

Scusa per il mio divagare, sto solo lottando un po’ qui.

Lilly · 27 Gennaio 2025, 1:30am

hai un altro vecchio argomento che potrebbe aiutarti con questo

mk0r · 29 Gennaio 2025, 1:26am

Purtroppo quel thread non ha risolto il problema.

Sono ancora confuso: non ci sono indicazioni chiare su come impostare ogni colore? E quali sono la sintassi/i nomi corretti nel json rispetto alle variabili CSS?

Lilly · 29 Gennaio 2025, 1:47am

hai guardato questo?

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

Non vedo nulla di palesemente sbagliato nel tuo file about.json, quindi potrebbe essere qualcos’altro nel modo in cui hai configurato il tuo tema.

specificamente quali variabili funzionano e quali no?

hai letto alcuni degli argomenti di sviluppo dei temi? penso sia possibile che ti manchino altri file di tema richiesti nel tuo repository.

mk0r · 29 Gennaio 2025, 2:21am

Sì, li ho letti, ma non c’è un riferimento completo per tutte le variabili di colore che ho potuto vedere. Ho basato il mio file about.json sul tema “solarized” che sembrava avere tutte le variabili dichiarate. Proverò di nuovo da zero e ti farò sapere, utilizzando gli strumenti per sviluppatori per vedere quali potrebbero essere i problemi…

Grazie per l’aiuto finora.

Argomento		Risposte	Visualizzazioni
Reference for full color customization Dev	4	1306	Febbraio 14, 2023
How do colors work and how to change them? Support ux	5	113	Marzo 20, 2025
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11858	Gennaio 9, 2018
How to add more options to color palettes? Support color-palettes	4	69	Agosto 15, 2025
Color definitions for more than light/dark color schemes Support	2	492	Gennaio 6, 2024

Sfide nella creazione di una tavolozza di colori personalizzata

Argomenti correlati