テーマ用データセレクター

開発
1

こんにちは、

テーマに対してデータセレクターを導入し、コンポーネントからフルテーマの編集をより容易にする提案をさせていただきたく思います。

私の状況がどれほど特殊なものかわかりませんが、現在は「graceful」を2つのインスタンスとして実行しており、ダークパレットとライトパレットを利用しています。これらのリモートテーマに対して「いいね」ボタンの変更など、普遍的な変更を行うためにテーマコンポーネントを使用しています。スタイルによる普遍的な編集は問題なく機能していますが、ダークバージョンにのみ適用され、ライトテーマには表示されないような編集を行いたい場合に問題が発生します。現在、CSSを使ってテーマIDごとに変更を加える方法が見当たりません。現在やりたいことを実現するには、私が望む小さな変更のたびに、各テーマ用の個別のテーマコンポーネントを作成する必要があります。

例えば、[data-theme-id] のような仕組みがあると良いかもしれません。

もし既にそのような機能がある場合は、この提案は無視して結構です。ただ、複数のテーマを編集したいサイトにとって、コンポーネントリストが膨れ上がるのを防ぎ、非常に役立つものになると思います。

2

よく理解できていないかもしれませんが、これらのライトテーマとダークテーマに直接 CSS を追加することはできます。

個人的には、マージン、表示、パディング、幅などの普遍的な変更にはコンポーネントが非常に優れていますが、色については、変数を使用しない限り、テーマを直接編集する方が良いでしょう。

すでに利用可能な解決策を複雑にしすぎているように思えます :thinking:

3

しかし、リモートテーマを編集すると、次回更新時に編集内容が失われてしまうのではないでしょうか？

これは単に色の変更だけでなく、特定のテーマに対して特定のコンポーネントから個別の変更を加え、より多くのコンポーネントを作成することなく、一部のテーマにのみ適用できるようにすることです。

4

おっしゃる通りです。リモートテーマの場合、以下の 3 つのコンポーネントを使用できます。

共有の変更にはユニバーサルテーマ修正を、
色などの特定の変更にはダークテーマ修正またはライトテーマ修正を使用します。コンポーネントは 1 つのテーマにのみリンクできます。

ライトグレースフルには、ユニバーサルとライトの修正が含まれます。
ダークグレースフルには、ユニバーサルとダークの修正が含まれます。

最終手段として、変更が適用されない場合、これらのライト/ダーク修正の行に !important を追加できます。

5

おっしゃる通りですね。私はすでに、1 つの汎用コンポーネントと、テーマごとに 1 つのコンポーネント（この例では 3 つ）を想定していました。しかし、Discourse のほぼ他のすべてにデータセレクターがあることを考えると、3 つのリポジトリを持つのは過剰に思えました。もしかすると、データセレクターで簡単に解決できたかもしれません。

補足ですが、テーマ ID はメタタグの name 属性に content として格納されており、キーワードは discourse_themes_id です。また、テーマ切り替えへのリンクは [data-id=“#”] となっています。少なくとも、Meta にインストールされているこのコンポーネントが作成するハンバーガーメニューのテーマセレクターリンク、あるいは私のテストサイトのいずれかを検証すれば、そのようになっています。つまり、Discourse 側でその情報が提示できないわけではありません。

6

テーマコンポーネントのヘッダータブに以下を追加すると、

<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>

<body> タグに data-theme-id 属性が追加され、以下のように利用できます。

[data-theme-id="1"] {
  // ライトテーマの CSS
}

[data-theme-id="2"] {
  // ダークテーマの CSS
}
7

この非常に特定のケースでは、SCSS ヘルパーを使用できる可能性があります。以下はコアからの例ですが、テーマ内でも同様に機能するはずです。

@is-dark-color-scheme を使用することもできます。

これにより、コンポーネントがテーマ ID に依存しなくなります。テーマを別のサイトにインストールした場合、テーマ ID は変更される可能性があります。

8

二人とも最高です。本当にありがとうございます :slight_smile: