ミントテーマ

Discourse · 2021 年 9 月 7 日午後 12:06

||||
-|-|
| 概要 | Mint - ミントのニュアンスを効かせたモダンなテーマ。
| | プレビュー | Discourse Theme Creator でのプレビュー
| リポジトリリンク | https://github.com/discourse/discourse-mint-theme
|Discourse テーマ初心者の方へ | Discourse テーマの使い方入門ガイド

このテーマをインストール

機能

ミントのニュアンスを効かせたモダンなテーマ。

ホームページ（カテゴリ）

ヒント

Discourse 設定

このテーマが正しくレンダリングされるためには、以下の設定変更が必要です：

top menu は category, latest, new, unread, top に設定する必要があります
desktop category page style は Boxes with Subcategories に設定する必要があります

ウェルカムバナー

Admin > Welcome banner (/admin/config/welcome-banner) ページに移動します。

Enabled on themes… ドロップダウンで Mint Theme を選択します
Page visibility ドロップダウンで Homepage only を選択します
Location ドロップダウンで Below site header を選択します
Background image は要件に応じて設定できます

Discourse Showcased Categories

Showcased Categories テーマコンポーネントのオプションにおいて、このテーマが正しくレンダリングされるためには、以下の変更が必要です：

要件に応じて feed one category と feed two category を選択します
要件に応じて feed one title と feed two title を入力します
max list length の推奨値は 3 です。

当社でホストされていますか？ テーマは、Standard、Business、Enterprise プランでご利用いただけます。

IAmGav · 2021 年 9 月 7 日午後 12:30

とても素敵なテーマですね

テストサイトでは、お気に入りの色であるロイヤルブルーで試してみようかなと思います。

ありがとう

P2W · 2021 年 9 月 10 日午後 4:27

@meghna 素晴らしいテーマを次々と作成してくれてありがとう。すごく素敵ですね。すぐにデプロイして試してみます。

Rebecca_Chen · 2021 年 9 月 13 日午後 6:31

素敵なテーマですね！作成していただき、ありがとうございます

背景の四角と丸を削除する方法はありますでしょうか？ヒントをいただければ幸いです

tjot · 2021 年 9 月 14 日午前 11:14

desktop.scss から以下のコードを削除してください。そうすれば問題なく動作するはずです

#main-outlet:after  {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 500px;
  height: 500px;
  border-radius: 2000px;
  background: $color-blue;
  right: 1px;
  top: -57px;
}

#main-outlet:before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 30px;
  background: -webkit-linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  // background: linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  background: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
  left: 70px;
  top: 350px;
  transform: rotate(74deg);
  transform-origin: 0 100%;
}

Rebecca_Chen · 2021 年 9 月 14 日午後 5:15

Tomaszさん、本当にありがとうございます！とても感謝しています

adalo_jesse · 2021 年 10 月 15 日午後 7:23

このテーマは素晴らしいですね。作成してくださりありがとうございます！Discourse の世界は初心者です。テーマのアップロード方法はわかりますが、特定の部分をどう変更すればよいかわかりません。変更したいのは、背景にあるブロック（円と四角）の色です。さらに、背景色も変えたいです。テーマファイルをダウンロードしてそこで編集し、独自テーマを作成するのでしょうか？それとも、もっと簡単な方法がありますか？

meghna · 2021 年 10 月 18 日午前 9:27

ありがとうございます！

はい。色を変更するには、テーマをフォークして、ご自身の要件に合わせてカラーコードを更新する必要があります。その方法は以下の通りです：

variables.scss 内で、お好みの色コードに変更してください：


$color-blue: #e5f8ff;
$color-square-gradient: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);

背景色を変更するには、about.json 内の secondary カラーを更新してください（これにより一部のボタンの文字色も変更されます）：

"secondary": "F6FBFC"

Nick_Chomey · 2021 年 11 月 4 日午後 6:42

このテーマが大好きです！プロジェクトのブランディングに完璧に合っています。ただ、ダークモードを有効にするとテーマの表示がおかしくなってしまいます。これは想定された動作でしょうか？ユーザーにダークモードを無効化させる方法はありますか？

Nick_Chomey · 2021 年 11 月 8 日午後 8:30

フロントエンドからCSSを編集できると、デフォルトのテーマのようにさらに便利になります。

cvx · 2021 年 12 月 4 日午後 12:54

コンポーザーに2つの小さな問題があります。歯車ボタンの背景が常に表示されており、最初のボタンのホバー時の形状がフレームの湾曲と一致していません。

meghna · 2021 年 12 月 6 日午前 11:31

以下の方法で両方の問題を修正しました。

Pika · 2021 年 12 月 7 日午前 8:02

テーマがとても気に入ったのでインストールしました。
検索バナーの背景が角丸ではなく、全幅になっていません。
これをあなたのレイアウトに変更するにはどうすればよいですか？

meghna · 2021 年 12 月 7 日午後 3:27

他のテーマやコンポーネントがミントテーマのスタイリングに干渉している可能性があります。インストールした他のテーマ/コンポーネントを無効にしてみてください。

Pika · 2021 年 12 月 7 日午後 3:32

Defaultテーマが無効化されたクリーンインストールで、以下のコンポーネントのみが含まれています。

discourse-search-banner
Showcased Categories

meghna · 2021 年 12 月 7 日午後 4:27

それは奇妙ですね。DiscourseインスタンスのURLをプライベートメッセージで送っていただけますか？確認します。

meghna · 2021 年 12 月 9 日午後 5:01

バナーの問題は、以下のコミットで修正されました。

また、Patrickさんが指摘してくれた、showcased categories プラグインの問題もありました。それも修正しました。

Ivan_Rapekas · 2021 年 12 月 15 日午後 8:58

デバイスのダークモードと、素敵なミントテーマでプレイしていました。ダークモードをサポートするためにいくつかの変更を加えました。テスト用です。

discourse-mint.zip (5.1 KB) もちろん間違いが含まれている可能性がありますこのため、github から PR を作成しません。

コードブロック、GitLab スタイルのフォーマット、ワイドページなどのいくつかの変更を加えました…モバイルデバイスはテストしていません。

meghna · 2021 年 12 月 17 日午後 3:28

イヴァンさん、ご尽力いただきありがとうございます！作業内容を確認しましたが、コアに含める必要のないカスタム変更がいくつかありました。ダークモード固有の変更については、さらにテストを行った後、コアに含めるかどうか検討します。

Ivan_Rapekas · 2021 年 12 月 17 日午後 3:37

どういたしまして、Meghna！いくつか要素に revert 値を適用すれば十分だと思います。

トピック		返信	表示
Air Theme Theme air-theme	389	65619	2026 年 6 月 7 日
Alien Night Theme - A free Dark Theme for Discourse Theme	78	28781	2025 年 2 月 4 日
Battle Axe - A free theme by the Tappara.co hockey community Theme	56	15819	2025 年 12 月 21 日
A reddit-ish theme for Discourse Theme	114	15842	2026 年 4 月 24 日
Daemonite Material Theme Theme	93	29990	2024 年 2 月 1 日

ミントテーマ

機能

ヒント

Discourse 設定

ウェルカムバナー

Discourse Showcased Categories

関連トピック