Faire référence aux variables de couleur du thème Discourse dans un composant de thème personnalisé ?

Soutien
1

Est-il possible d’accéder aux variables de couleur du thème Discourse dans mon propre composant de thème?

J’essaie d’utiliser des variables comme --secondary dans mon CSS et cela ne semble pas fonctionner.

2 « J'aime »
3

Oui, vous devriez pouvoir accéder aux variables native-css de core à partir d’un thème ou d’un composant de thème :+1:

par exemple

body {
  background-color: var(--secondary);
}

Pourriez-vous partager un exemple qui ne fonctionne pas ?

5 « J'aime »
4

Ah ! Je n’utilisais pas var()

2 « J'aime »
5

J’ai toujours ce genre de problème. Bien sûr, il est « évident » d’utiliser var, mais seulement si vous le savez et vous en souvenez !

J’attends que quelque chose s’exécute, alors par curiosité, j’ai consulté https://ask.discourse.com/ et j’ai demandé « Est-il possible d’accéder aux variables de couleur du thème Discourse dans mon propre composant de thème ? » et voilà ! J’ai obtenu ceci :

  1. Variables de couleur disponibles :
    Discourse fournit plusieurs propriétés personnalisées CSS prédéfinies pour les couleurs, telles que :

    var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)

  2. Exemple d’utilisation :
    Vous pouvez utiliser ces variables dans votre CSS pour vous assurer que votre thème s’adapte aux différents schémas de couleurs sélectionnés par l’utilisateur. Par exemple :

    body {
    background: var(--highlight);
}
1 « J'aime »
6

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