Селектор данных для тем

Разработка
1

Привет,

Я хотел бы предложить селектор данных для тем, чтобы упростить редактирование полных тем из компонента.

Не уверен, насколько уникальна моя ситуация, но у меня запущен пример с двумя экземплярами Graceful, чтобы я мог использовать светлую и тёмную палитры. Я использую компонент темы для внесения изменений в эти удалённые темы, чтобы выполнять универсальные правки, например, изменение кнопки «лайк». Всё отлично работает для универсальных изменений, управляемых стилями, но проблема возникает, когда я хочу внести правку, например, только в тёмную версию, которая не должна отображаться в светлой теме. Я не вижу способа использовать CSS для изменения стилей по идентификатору темы. Чтобы реализовать то, что я хочу сейчас, мне пришлось бы создавать отдельные компоненты темы для каждой темы для незначительных изменений, которые я хочу внести.

Возможно, что-то вроде [data-theme-id].

Если это уже возможно, то можете проигнорировать моё сообщение. Я просто думаю, что это очень помогло бы сайтам, которые хотят вносить правки в несколько тем, не раздувая список компонентов.

2

Я не совсем уверен, что понял, но вы можете добавить CSS напрямую в эти светлую и тёмную темы.

На мой взгляд, компоненты отлично подходят для универсальных изменений, таких как margin, display, padding, width, но для цветов, если только вы не используете переменные, лучше редактировать темы напрямую.

Кажется, это излишнее усложнение решения, которое уже существует :thinking:

3

Но редактирование удалённых тем приводит к тому, что ваши правки теряются при следующем обновлении, верно?

Речь идёт не только о цветах, а о внесении конкретных изменений в определённые темы из одного компонента без необходимости создавать дополнительные компоненты и применять их только к некоторым темам.

4

Вы правы. Для удалённой темы можно использовать три компонента:

универсальная правка темы для общих изменений
и правка тёмной темы / правка светлой темы для специфичных изменений (например, цветов). Вы можете привязать компонент только к одной теме.

Светлая версия будет включать универсальную правку и правку светлой темы.
Тёмная версия будет включать универсальную правку и правку тёмной темы.

В крайнем случае, если изменение не срабатывает, вы можете добавить !important к строке в правках светлой или тёмной темы.

5

Думаю, вы правы. Я уже думал о создании одного универсального компонента и одного компонента для каждой темы, то есть трёх в данном примере, но это казалось излишним: три репозитория для чего-то, что, возможно, можно было легко исправить с помощью селектора данных, поскольку почти всё остальное в Discourse использует такой подход.

Кстати, идентификатор темы указан в мета-теге как content id с ключевым словом discourse_themes_id, а в ссылке для переключения тем используется атрибут [data-id=“#”]. По крайней мере, если проверить ссылку на селектор тем «гамбургер», созданную этим компонентом, установленным здесь на Meta или на одном из моих тестовых сайтов, то всё именно так. То есть информация, безусловно, доступна в Discourse.

6

Если вы добавите это во вкладку «Header» компонента вашей темы

<script type="text/discourse-plugin" version="0.8">
  const themeSelector = require('discourse/lib/theme-selector');
  const currentThemeId = themeSelector.currentThemeId();
  document.body.dataset.themeId = currentThemeId;
</script>

Это добавит атрибут data-theme-id к тегу <body>, который вы сможете использовать следующим образом:

[data-theme-id="1"] {
  // CSS для светлой темы
}

[data-theme-id="2"] {
  // CSS для тёмной темы
}
7

В этом очень конкретном случае вы, возможно, сможете использовать наши SCSS-хелперы. Вот пример из ядра, но то же самое должно работать и в теме:

Вы также можете использовать @is-dark-color-scheme.

Таким образом, ваш компонент не будет зависеть от идентификаторов тем, которые изменятся, если вы установите тему на другом сайте.

8

Вы оба лучшие, огромное спасибо :slight_smile: