1 つのテーマのみで色変数を上書きする方法は?

(すみません、最も適切な場所が見つからなかったため、dev として選択しました)

3 つのテーマを持っています。あるテーマでは、$primary_low の計算結果が、背景色とのコントラストが不足する色になります。プライマリ色を調整してみましたが(背景色はブランドカラーのため変更できません)、うまくいきませんでした。ほとんどコントラストがなくなるか、逆に望むのと正反対の非常に「ハイライト」のような効果になってしまいます。

解決策(私の考えでは)は、その特定のテーマの CSS で $primary_low に色値を割り当てることでした。しかし、反映されません。!important を追加しても効果はありません。1 つのテーマのみでこれを変更する方法はありますか?注:これらはローカルテーマです。

@awesomerobot のガイドはこちらでご覧ください:

「いいね!」 6

あ、ありがとうございます!残念ながら、これはローカルテーマであり、リモートにはなりません。
他に方法はありませんか?

これは高度な機能と見なされるため、UI では利用できません。'ローカルテーマ’に対して theme cli を使用できます。

「いいね!」 9

どうにかできるなら嬉しいです :slight_smile: ただ、この Ruby の部分はまだ私には難しすぎます。将来的にはローカルテーマでもオーバーライドが使えるようになることを本当に願っています。

自分の知識レベルで何ができるか考えます… GitHub は完全な初心者なので、リモートテーマを作るのはとても大変そうです。(ええ、ガイドは読みました)

リモートテーマは本当に簡単です。私は以前GitHubを使ったことがなく、about.jsonが何を意味するのかもわかりませんでしたが、いくつかのテーマで問題なく使用できました。ローカルでテーマを作成し、それをGitHubにアップロードするだけで、GitHub上のabout.jsonファイルに情報を追加できます。そうすると、GitHubからサイトを再インストールする際に、テーマのカスタマイズ可能なオプションが多数利用可能になります。

今日は後ほど、手順を詳しく解説する投稿を作成する時間がありますので、それを読めばすぐに理解できるはずです。

追記:settings.ymlについて考えていましたが、これもリモートテーマの素晴らしい点の一つです。しかし、上記のDavidのリンクを見ると、about.jsonの方がさらにシンプルですね。

「いいね!」 6

こちらに、詳細すぎる手順を示します。期待通りに動作しない場合はお知らせください。

  1. GitHub アカウントをお持ちでない場合は、作成してください。

  2. Discourse でテーマをエクスポートします:
    管理画面 → カスタマイズ → エクスポートしたいテーマを選択


    これで、テーマが .zip ファイルとしてコンピューターに保存されます。

  3. コンピューター上でファイルを解凍します。

  4. GitHub に移動し、新しいリポジトリを作成します:


  5. 「既存のファイルをアップロード」をクリックします。

  6. エクスポートしたテーマから、解凍されたフォルダーとファイルをドラッグ&ドロップします。ファイル名は以下のような形式になるはずです:


    その後、「変更をコミット」をクリックします。

  1. 次に、about.json ファイルを編集できます。ファイル名をクリックしてください。

ファイルの中身は以下のようになります:


{
  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-light": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
  1. 編集アイコン(鉛筆マーク)をクリックします。

image これで編集可能です。カラースキームの名前を変更することをお勧めします。そうしないと、テーマを再度サイトにインポートした際に、同じ名前のカラースキームが重複して存在することになります。以下では、"blue-light": {"blue-lite": { に変更しています。

カラー変数のオーバーライドを、love の後にカラースキームの末尾に追加し、love の値の後にカンマを入れることを忘れないでください。

  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-lite": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100",
      "primary-high": "333333",
      "primary-medium": "666666",
      "primary-low-mid": "999999",
      "primary-low": "cccccc"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
  1. 「変更をコミット」をクリックします。

  2. リポジトリ名をクリックして、メインのリポジトリページに戻ります。

  3. クローンまたはダウンロードリンクをコピーします。

  4. Discourse でテーマをインポートします:
    管理画面 → カスタマイズ → インストール → Git リポジトリから:リンクを貼り付けてインストール

  5. これで、カスタム値 $primary-high$primary-medium$primary-low-mid$primary-low を使用して、ローカルテーマと同様にこのテーマを編集できるようになりました。

「いいね!」 7

@smrtey さん、このステップバイステップのガイドを作成してくださり、本当にありがとうございます!今日、ようやく時間を取ってこれに取り組み、手順に従うことができました。完璧に動作しました!
これは私の GitHub での最初のステップでもありました。アカウントもリポジトリも作ったことがありませんでした。改めてありがとうございます。

もしかしたら、テーマ作成ガイドに含めるか、リンクを貼ることはできるでしょうか?

「いいね!」 3

カスタム設定も私が発見した素晴らしい機能の一つです。テーマまたはコンポーネントの GitHub リポジトリに settings.yml ファイルを追加する必要があります。カスタマイズ可能な設定を含むサンプル・コンポーネントは以下です:

これは、変数 $header_text$header_text_color$header_bg を設定する settings.yml ファイルです。

header_text: 
  type: bool
  default: false
  description:
    en: 'Select to add text in header next to logo.'
header_text_color: 
  type: string
  default: "$header_primary"
  description:
    en: 'Text color (default is "header primary")'
header_bg: 
  type: string
  default: "$header_background"
  description:
    en: 'Text color (default is "header background")'

これにより、コンポーネントをインストールした際に以下の設定オプションが表示されます:


これにより、以下の CSS が適用されます:

@if $header_text == "true" {
    .d-header .title::after {
        padding: 0 20px;
        font-size: 1.3em;
        color: $header_text_color;
        background-color:$header_bg;
        content: "Here is some text";
    }
    .archetype-regular #main.no-text .d-header .title::after {
        display:none;
    }
}

同じコンポーネントを複数回インストールできます(インストール後に名前を変更して管理しやすくすると便利です)。これにより、異なるテーマごとに異なる設定でコンポーネントを追加できます。

settings.yml ファイルの作成方法は以下の通りです。新しいファイルを作成します:

コードを入力します(テキストファイルに書いてからコピー&ペーストしています):

「Commit new file」で保存します:

その後、サイトをコンポーネントにインストールし、設定を編集してください。

「いいね!」 2