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

非常好的主题,但最近似乎与 discourse 不兼容。侧边栏完全挤压在一起。

`

3 个赞

抓得好!现已通过以下方式修复:

3 个赞

谢谢,看起来很酷,问题已修复

2 个赞

您好

自上次更新以来,似乎所有内容都“卡”在两侧。就像左右内边距/外边距消失了一样

这是故意的吗?在主题的预览图片中并不是这样的。我该如何解决?

非常感谢

2 个赞

这现在已修复:

感谢报告此问题 :+1:

3 个赞

已确认修复!
速度非常快,非常感谢。
顺便说一句,主题很棒 :slight_smile:

3 个赞

我能帮您理解如何更改顶部的蓝色强调栏的颜色吗?

我在 desktop.scss 中看到如下定义:

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

我猜想 $tertiary 来自 Discourse 核心 SCSS 中定义的变量,并且应该从用户选择的配色方案中提取。

我可以在开发者工具中看到该栏被设置为 #3977ff,您可以在下面的屏幕截图中看到蓝色的栏。但在我的配色方案中,“tertiary”设置为黄色,并且我在任何地方都没有定义颜色 #3977ff

这是怎么回事,我该如何设置颜色?

1 个赞

哦!我看到 tertiary 是在 about.json 中定义的:

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

所以我想,这一定是它获取颜色值的地方。但如果我没有选择“radiant”配色方案,为什么它会从中提取值呢?