Riferimento per la personalizzazione a colori

Sviluppatore
1

Vorrei creare due schemi di colori personalizzati in cui scelgo tutte le variabili di colore (non mi piacciono i valori calcolati/trasformati).

Esiste un riferimento per questo? Il file JSON di esempio in questo post:

Elenca solo alcuni dei valori (sembra quelli personalizzabili per impostazione predefinita tramite il pannello di amministrazione). Mentre alcuni schemi di colori che ho visto, come quelli WCAG, espongono alcune variabili in più.

Questo post parlava della creazione di un plugin per la personalizzazione avanzata dei colori: Customizing colors - #10 by awesomerobot

Ma non credo sia necessario, se fosse possibile avere semplicemente un file JSON di riferimento con tutte le variabili di colore nominate che possono essere sovrascritte, bypassando i valori calcolati.

1 Mi Piace
2

Quando ispezioni un’istanza di discourse nel tuo browser puoi trovare tutti i nomi delle variabili root nella scheda degli stili:

image
image394×1320 110 KB

Quindi dichiara semplicemente le variabili aggiuntive nel tuo file json. Ad esempio:

{
  "about_url": null,
  "license_url": null,
  "name": "Full Color Schemes",
  "color_schemes": {
    "Colors Light": {
      "primary": "222",
      "secondary": "fff",
      "tertiary": "08c",
      "quaternary": "e45735",
      "header_background": "fff",
      "header_primary": "333",
      "highlight": "ffff4d",
      "danger": "c80001",
      "success": "090",
      "love": "fa6c8d",
      "primary-very-low": "f8f8f8",
      "primary-low": "e9e9e9",
      "primary-low-mid": "bdbdbd",
      "primary-medium": "919191",
      "primary-high": "646464",
      "primary-very-high": "434343",
      "secondary-low": "4d4d4d",
      "secondary-medium": "gray",
      "secondary-high": "a6a6a6",
      "secondary-very-high": "ededed"
    },
    "Colors Dark": {
      "primary": "ddd",
      "secondary": "222",
      "tertiary": "0f82af",
      "quaternary": "c14924",
      "header_background": "111",
      "header_primary": "ddd",
      "highlight": "a87137",
      "danger": "e45735",
      "success": "1ca551",
      "love": "fa6c8d",
      "primary-very-low": "282828",
      "primary-low": "313131",
      "primary-low-mid": "7a7a7a",
      "primary-medium": "909090",
      "primary-high": "a6a6a6",
      "primary-very-high": "c7c7c7",
      "secondary-low": "bdbdbd",
      "secondary-medium": "919191",
      "secondary-high": "646464",
      "secondary-very-high": "313131"
    }
  }
}

La cosa bella è che quelle variabili appariranno anche nel backend:

image
image1632×1747 210 KB

6 Mi Piace
3

Grazie — dopo aver pubblicato questo, ho visto che è tutto elencato anche nella pagina /styleguide > colors di un’istanza — presumo che questo sia l’elenco completo…

Mi chiedo ora quale sia la differenza di utilizzo tra le variabili descrittive (ad esempio, primary-high) e quelle numerate (ad esempio, primary-800) e come tenerne conto quando creo il mio tema.

4

Per quanto ne so, si tratta solo di alcuni calcoli aggiuntivi, più precisi, che potresti utilizzare in un tema o in un componente del tema. Ma non vengono utilizzati nel core di Discourse.

Se volessi scrivere il tuo schema di colori solo con i valori numerici, potresti ridefinire quelli descrittivi in questo modo nel tuo tema:

:root {
  --primary-high: var(--primary-800);
}

Ma poi, ci sono solo valori numerici per primario e terziario.

1 Mi Piace
5

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