Radiant,一个适用于Discourse的优雅主题

本主题旨在简约的同时兼具现代感。所有样式均通过 CSS 实现,未使用任何图片。

:rainbow: :dizzy: :rocket:

首页:

主题页面:

全屏搜索:

模态框:

欢迎提出如何进一步优化此主题的建议。祝您使用愉快!:smiley:

31 个赞

设计非常棒!

有没有办法自定义背景的形状和颜色?如果能自定义主体在背景上的“光晕”效果,也会很有用。

3 个赞

你好,

太棒了 :heart: 这个主题看起来非常酷 :heart_eyes:
我有一个建议:统一圆角和阴影效果。比如弹窗、菜单、输入框等……如果配合新的加载滑块,效果会非常惊艳 :heart_eyes:

2 个赞

不行,背景是通过 CSS 线性渐变实现的。若添加自定义功能,会增加论坛管理员的配置复杂度。

如果您有进一步定制的需求,欢迎 fork 该主题进行修改。

很好的建议。我会将其列入改进计划。:+1:

6 个赞

我已优化主题,使表单输入、顶部菜单和弹窗的样式与主题保持一致。已更新首帖,附上最新截图。:slight_smile:

5 个赞

主题很棒,我可能很快就要用它了。谢谢,做得很好。

2 个赞

你好,这个主题非常好。有没有办法减少顶部的空白区域(见箭头)?

2 个赞

我已通过以下方式将默认的 margin-top 减小为 30px

欢迎 Fork 该主题并根据您的需求进一步自定义。:slight_smile:

3 个赞

我个人认为较小的边距会让渐变效果过于明显。:confused:

你能指引我一下如何将其作为背景实现吗?https://codepen.io/chris22smith/pen/RZogMa

1 个赞

我绝对喜欢这个主题,我甚至想在论坛上推荐它。只是想问你一些问题。

我不是用 Discourse 搭建论坛的人,我只是这些论坛的用户,所以有些问题可能问得不太对,或者显得太基础,因为我从未使用过 Discourse 来构建任何东西。

你们有计划制作这个主题的深色模式版本吗?我个人在 Edge 浏览器中启用了“强制网页内容使用深色模式”的标志。Chrome 也有这个功能。 这通常很有帮助,以下是我启用该功能后得到的一些效果:

总体而言,启用该标志后整体效果还不错,但有些元素看起来莫名地不协调。如果可能的话,我很希望能针对深色模式对这些部分进行调整或修复:)

你们不一定需要修改所有内容来专门制作深色模式版本,只要修复个人资料页面上那些奇怪的颜色差异,启用该标志后就能很好地使用了。

4 个赞

目前还没有,但我会考虑一下。不过,我需要采用不同的配色方案。

感谢你的建议!我会仔细研究,如果这些改动不影响默认的(原始的)浅色版本,我会进行相应的调整。:slight_smile:

5 个赞

我刚搭建好 Discourse,正迫不及待想进行自定义。很高兴找到了你的主题——它清新、多彩又可爱。谢谢!

– 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”配色方案,为什么它会从中提取值呢?