Как обратиться к переменным цветов темы Discourse в пользовательском компоненте темы?

Поддержка
1

Возможно ли получить доступ к переменным цветов темы Discourse в собственном компоненте темы?

Я пытаюсь использовать переменные, такие как --secondary, в своём CSS, но это, похоже, не работает.

3

Да, вы должны иметь возможность получать доступ к нативным CSS-переменным ядра из темы или компонента темы :+1:

Например:

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

Можете ли вы привести пример, который не работает?

4

Ах! Я не использовал var()

5

У меня постоянно возникают такие проблемы. Конечно, использовать var — это «очевидно», но только если вы знаете и помните об этом!

Пока жду выполнения чего-то, из любопытства зашел на https://ask.discourse.com/ и спросил: «Можно ли в собственном компоненте темы получить доступ к переменным цветов темы Discourse?», и о чудо! Вот что я получил:

  1. Доступные переменные цветов:
    Discourse предоставляет несколько предопределенных пользовательских свойств CSS для цветов, таких как:

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

  2. Пример использования:
    Вы можете использовать эти переменные в своём CSS, чтобы ваша тема адаптировалась к разным выбранным пользователем цветовым схемам. Например:

    body {
    background: var(--highlight);
}