カテゴリのユニークな配色

開発
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 を介して、ルートカラーテーマの値をオーバーライドできることは知っていますが、これらの変更はサイト全体で行われると考えています。

color_definitions.scss の 100 以上の変数をすべてリストアップする以外に、特定のカテゴリをカスタマイズするより効率的な方法はありますか？たとえば、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> は、ブラウザの URL フィールドに表示される小文字のコミュニティ名です（親カテゴリとサブカテゴリは parentcategory-subcategory のようにハイフンで区切ります）。

他にも、以下のような Customization > Theme component のカスタマイズ用テーマコンポーネントがいくつかありますので、検索してみてください。

3

リリー、ご協力とリソースをありがとうございました！

ロゴのCSSの指示は本当に感謝しています。私のぎこちないスクリプトよりもはるかに洗練されています。

あなたの解決策は私のユースケースに間違いなく役立つでしょう。ただし、すべての要素を選択して直接色をコーディングするのは面倒に思えました。Discourseがcolors.scssにある約12個の基本色からカラーパレットを生成するために使用するメカニズムを活用する方法があるかどうか疑問に思っています。そうするには、テーマコンポーネントではなくプラグインが必要になるかもしれませんが、それは別の日までの課題です。

ありがとう！