Как исправить изображения светлой темы в тёмном режиме для Modern Category Group Boxes

Danny_Dainton · 09.Январь.2025 10:38:27

Всем привет ,

Скорее всего, я просто упустил какую-то настройку или что-то ещё тривиальное, поэтому обращаюсь за помощью.

Я использую компонент Modern Category + Group Boxes на своём сайте и создал тематические изображения для каждой категории.

Проблема в том, что в настройках категорий я указал как светлую, так и тёмную версии изображений, но на главной странице категорий отображаются изображения в светлой теме, даже когда включена тёмная тема.

Однако при переходе в конкретную категорию сверху отображается изображение в тёмной теме

Сталкивался ли кто-нибудь с этим и нашёл ли решение? Я готов попробовать любые «костыли» или обходные пути, которые могут быть у других

Canapin · 09.Январь.2025 11:14:13

У меня возникли небольшие трудности с поиском компонента: похоже, что на Meta нет соответствующей темы, либо название отличается.

Репозиторий находится по адресу: GitHub - discourse/discourse-minimal-category-boxes · GitHub

Подтверждаю проблему

Вот, как я полагаю, соответствующие фрагменты кода:

Код логотипа из TC:

github.com/discourse/discourse-minimal-category-boxes

javascripts/discourse/components/category-box.hbs

3e11019f0


      
            class="category category-box category-box-{{@category.slug}}
              {{if @category.isMuted 'muted'}}
              {{if this.noCategoryStyle 'no-category-boxes-style'}}"
          >
            <div class="category-box-inner">
              <div
                class="category-logo
                  {{if @category.uploaded_logo.url '' 'no-logo-present'}}"
                style={{this.backgroundColor}}
              >
                {{#if @category.uploaded_logo.url}}
                  {{cdn-img
                    src=@category.uploaded_logo.url
                    class="logo"
                    width=@category.uploaded_logo.width
                    height=@category.uploaded_logo.height
                    alt=""
                  }}
                {{else}}
                  <span class="category-abbreviation">
                    {{this.getAbbreviation}}

Обычные блоки категорий загружают шаблон:

github.com/discourse/discourse

app/assets/javascripts/discourse/app/components/categories-boxes.hbs

8d3c86d98


      
            data-category-id={{c.id}}
            data-notification-level={{c.notificationLevelString}}
            data-url={{c.url}}
            class="category category-box category-box-{{c.slug}}
              {{if c.isMuted 'muted'}}"
          >
            <div class="category-box-inner">
              {{#unless c.isMuted}}
                <div class="category-logo">
                  {{#if c.uploaded_logo.url}}
                    <CategoryLogo @category={{c}} />
                  {{/if}}
                </div>
              {{/unless}}
          
              <div class="category-details">
                <div class="category-box-heading">
                  <a class="parent-box-link" href={{c.url}}>
                    <h3>
                      <CategoryTitleBefore @category={{c}} />
                      {{#if c.read_restricted}}

Сам шаблон:

github.com/discourse/discourse

app/assets/javascripts/discourse/app/components/category-logo.gjs

8d3c86d98

import LightDarkImg from "discourse/components/light-dark-img";

const CategoryLogo = <template>
  <div class="category-logo aspect-image">
    <LightDarkImg
      @lightImg={{@category.uploaded_logo}}
      @darkImg={{@category.uploaded_logo_dark}}
    />
  </div>
</template>;

export default CategoryLogo;

Danny_Dainton · 09.Январь.2025 11:22:32

Благодарю за ответ @Canapin

Можете ли вы предоставить или предложить какие-либо шаги для применения обходного пути для размещенной версии Discourse?

Canapin · 09.Январь.2025 11:25:49

Если ваш сайт размещён на платформе Discourse, вы можете дождаться официального ответа здесь или написать на team@discourse.org.

Если нет, подождите, пока ответят более опытные пользователи (я не отношусь к их числу)
(или попробуйте связаться с хостинг-провайдером, у которого вы зарегистрированы).

В любом случае решение заключается в исправлении компонента темы путём отправки pull request в репозиторий кода.

Heliosurge · 10.Январь.2025 00:15:35

Этот TC используется в теме Air. Возможно, стоит также добавить тег «баг» для темы Air. У Air есть светлый и тёмный режимы.

Только заметил, что это уже сделано.

Danny_Dainton · 17.Январь.2025 12:06:27

Чтобы закрыть этот вопрос — проблема решена. Команда справилась с этим очень быстро.

«Привет, Дэнни, мы только что обновили компонент темы, который теперь автоматически использует правильный логотип для категорий в светлой и тёмной темах. В данном случае компонент был создан раньше функции логотипов для светлой и тёмной тем, поэтому нам просто нужно было добавить поддержку этой функции».

Heliosurge · 18.Январь.2025 08:49:38

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

Тема		Ответов	Просм.
Selecting dark/light versions of category logos Support	3	643	23.06.2023
Using LightDarkImg throws error Development	6	78	07.10.2025
Set category background image based on user's selected theme Support	0	389	28.12.2021
Is this still the solution for checking for dark mode? Development	4	156	20.02.2025
Adding category images in Air Theme with Modern Category + Group Boxes Support	0	204	05.02.2024

Как исправить изображения светлой темы в тёмном режиме для Modern Category Group Boxes

Связанные темы