Radiant, 洗練された Discourse 用テーマ

This theme aims to be minimal and at the same time has modern appeal. The entire styling is implemented via CSS and no image has been used.

:rainbow: :dizzy: :rocket:

Homepage:

Topic page:

Full page search:

Modal:

Let me know how this theme can be further improved. Enjoy! :smiley:

「いいね!」 29

Very nice design!

Is there a way to customize the background shapes/colors? Being able to customize the “glow” of the main body on the background could be useful too.

「いいね!」 3

Hello,

Amazing work :heart: This theme looks pretty cool :heart_eyes:
I have one suggestion with uniform rounded corners and shadows. I mean the popups, menu, input fields etc… Will be pretty awesome with the new loading slider :heart_eyes:

「いいね!」 2

No, the background is made via CSS linear gradients and adding the ability to customize it will add complexity for forum admins.

Feel free to fork the theme to further customize it as per your requirements.

Good point. I’ll add it on my list for improvements. :+1:

「いいね!」 6

I have improved the theme to make form inputs, header menu and modal consistent with the theme styling. Updated the first post with latest screenshots. :slight_smile:

「いいね!」 5

lovely theme. i might be using this soon. thanks, good work.

「いいね!」 2

Hi, the theme is very good. Is there any way to reduce that space at the top (see arrow)?

「いいね!」 2

I have reduced the default margin-top to 30px, via:

https://github.com/MeghnaAJ/discourse-radiant-theme/commit/d3eac88041c3e5ebc8529ac79d99193c2d285349

Feel free to fork the theme and further customize it as per your requirements. :slight_smile:

「いいね!」 3

personally i think the smaller margin makes the gradient too noticeable. :confused:

could you lead me in the right direction to implement this as the background? https://codepen.io/chris22smith/pen/RZogMa

「いいね!」 1

I absolutely love this theme, I would request it to the forum I’m on, just wanted to ask you some stuff.

I’m not someone who uses Discourse to make any forums, I’m the user of these forums, so some stuff might come out wrong, or too obvious, but I never used Discourse to build anything.

Are there any plans to make a Dark Mode version of this? I personally have the ‘Force Dark Mode for Web Contents’ flag on Edge enabled. It’s also a thing for Chrome. And it usually helps, these are some of the results I got from it.

image

Overall it looks fine with that flag on, but there’s some stuff that looks out of place for no obvious reason, which I would love to see adapted / fixed for Dark Mode if that’s possible :)

You woudn’t necessarily need to modify everything to make a Dark Mode specific version, as long as you fixed the weird color difference on the profile pages, it would pretty much work just fine with the flag enabled.

「いいね!」 4

Not yet, but I’ll look into it. I’ll have to go with different color scheme though.

Thanks for the suggestions! I’ll look into them and make the changes if they do not affect the default (original) light version. :slight_smile:

「いいね!」 5

I’ve just set up a Discourse and was itching to customizing it. I’m really glad I found your theme—it’s fresh, colorful, and lovely. Thanks!

– ben

「いいね!」 6

非常に良いテーマですが、最近、このテーマはディスコースと互換性がないようです。サイドバーが完全に押しつぶされています。

`

「いいね!」 3

よくぞ見つけてくれました!以下のコミットで修正しました。

「いいね!」 3

ありがとうございます。クールに見えますし、問題も修正されました。

「いいね!」 2

こんにちは

前回のアップデート以降、コンテンツの両側が「固定」されているようです。左右のパディング/マージンがなくなったような感じです。

これは意図的なものでしょうか?テーマのプレビュー画像ではこのようにはなっていません。どうすれば修正できますか?

よろしくお願いします。

「いいね!」 2

これで修正されました。

この問題を報告していただきありがとうございます :+1:

「いいね!」 3

修正されたことを確認しました!

信じられないほど速かったです。本当にありがとうございました。

素晴らしいテーマですね :slight_smile:

「いいね!」 3

一番上の青いアクセントバーの色を変更する方法を教えていただけますか?

デスクトップSCSSで次のように定義されているのを確認しました。

#main-outlet {
  border-top: 8px solid $tertiary;
}

ここで、$tertiary は Discourse コア SCSS で定義された変数から取得され、ユーザーが選択したカラーパレットから取得されると想定しています。

DevTools でバーが #3977ff に設定されていることがわかります。これは、下のスクリーンショットの青いバーとして表示されています。しかし、私のカラーパレットでは、「tertiary」に黄色が設定されており、どこにも #3977ff という色は定義されていません。

これはどういうことでしょうか?そして、色を設定するにはどうすればよいですか?

「いいね!」 1

ああ! about.jsontertiary が定義されていることがわかりました。

  "color_schemes": {
    "radiant": {
      "primary": "000000",
      "tertiary": "3977FF",
      "header_primary": "4d4d4d"
    }
  },

そのため、ここで色の値を取得していると推測されます。しかし、「radiant」カラー スキームが選択されていないのに、なぜここから取得しているのでしょうか?