Уникальная цветовая схема для категории

Разработка
1

Приветствую.

Я перенослю старый форум на Discourse, и на оригинальном сайте для одной из категорий была уникальная тема (включая уникальный логотип в шапке).

Мое текущее решение — это компонент темы, который выглядит примерно так:

CSS:

body.category-target-category{
///замените #hexcodes на значения цветов по вашему выбору
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
///продолжите для любых/всех необходимых значений цветов
}

HTML/JS:

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() =>{
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

В настоящее время мне приходится перебирать все возможные значения цветов, упомянутые в color_definitions.scss, чтобы переопределить их. Я полагаю, что значения для этого файла генерируются в foundation/color_transformations.scss, которые, в свою очередь, создаются на основе значений из foundation/colors.scss. Я знаю, что можно переопределить корневые значения цветовой темы либо через админ-меню, либо в about.json компонента темы, но, насколько я понимаю, эти изменения применяются ко всему сайту.

Существует ли более эффективный способ настроить конкретную категорию, кроме перечисления всех 100+ переменных в color_definitions.scss? Например, можно ли изменить файл foundation/colors.scss через компонент темы?

Спасибо за помощь!

2

Привет @Rhababo :wave: добро пожаловать в Meta :slight_smile:

Если вы ещё не работали с темами и разработкой для Discourse, рекомендую начать с ресурсов здесь:

Кроме того, например, вы можете изменить логотип, цвет заголовка и даже цвет иконок для конкретной категории с помощью CSS-кода, похожего на этот:

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

Если вы просто создадите новую тему, вы сможете добавить код и загрузить логотипы как ресурсы. <category-slug> — это название категории в нижнем регистре, которое отображается в адресной строке браузера (разделяйте родительские и подкатегории дефисами «-», например, parentcategory-subcategory).

Также существуют различные компоненты тем (#theme-component), подобные этому, которые вы можете найти:

3

Спасибо, Лилли, за вашу помощь и материалы!

Я очень ценю инструкции по CSS для логотипа. Это намного элегантнее, чем мой громоздкий скрипт.

Ваше решение точно подойдёт для моей задачи. Хотя выбор каждого элемента и прямое задание цвета для него кажется утомительным. Интересно, есть ли способ использовать механизм, который Discourse применяет для генерации своей цветовой палитры на основе примерно 12 базовых цветов из файла colors.scss. Думаю, для этого потребуется плагин, а не компонент темы, но это задача на другой день.

Спасибо!