Terraglass——一款精心调配明暗配色的磨砂玻璃主题

我刚发布了一个经过长期打磨的主题,现已以 MIT 协议开源:这是一款简洁现代的主题,围绕半透明磨砂玻璃表面(页眉、侧边栏、菜单、对话框、搜索框)构建,并配备了专为浅色和深色模式定制的色彩方案——没有硬编码颜色,一切都绑定到 Discourse 的 CSS 自定义属性,因此开箱即用,支持自动切换浅色/深色模式。

仓库地址:terraboss/discourse-terraglass

截图

浅色模式,运行在 Meta 上。通知菜单,页面内容隐约可见:

搜索下拉菜单:

对话框——背后的页面被模糊处理而非变暗:

功能特性

  • 磨砂玻璃表面——页眉、侧边栏/汉堡菜单以及页眉搜索框/下拉菜单均为半透明并带有背景模糊效果;透明度和模糊强度均可配置
  • 玻璃质感的菜单和对话框——下拉菜单(例如通知)和对话框共享磨砂外观,带有细窄的头发丝边缘和顶部微弱的高光;对话框背后的页面会被模糊而非变暗。菜单和对话框的透明度与模糊度可分别调整
  • 可选的页眉色调——为页眉添加微妙的颜色,可以跟随当前色彩方案的强调色,也可以是任意自定义颜色,强度可调。在 Safari 中,浏览器工具栏区域也会相应着色。默认关闭
  • 独立的、专为浅色和深色模式定制的色彩方案(不仅仅是单一方案的反转),并针对文本和 UI 元素通过了 WCAG AA 对比度检查
  • 类似 X/Twitter 的单盒(onebox)链接预览,带有细边框和圆角
  • 类似礼仪(Etiquette)主题的旗帜/箭头形状标签
  • 在所有设备上固定为 16:9 的视频嵌入
  • 斑马纹主题列表,带有微妙的悬停状态
  • 按钮、卡片、模态框和输入框的圆角半径可配置
  • 可访问的焦点轮廓,使用方案自身的文本颜色,因此在浅色和深色模式下均清晰可见
  • 以上所有功能均为主题设置——您可以关闭或调整任何不需要的部分

安装

自定义 → 主题 → 安装 → 从 Git 仓库:

https://github.com/terraboss/discourse-terraglass

这也将为您提供未来的一键“检查更新”功能。

欢迎反馈,乐意接受功能请求或错误报告。

附注:截图在 Meta 上拍摄 :discourse2: 主题通过开发者控制台在本地浏览器中应用 :goodnews:

4 个赞

能发几张截图吗?听起来很棒

3 个赞

也许以后吧。自己试试看!:slight_smile:

1 个赞

也许你想加入 @theme_authors,这样你就可以在 Customization > Theme 分类中发帖了?

4 个赞

非常感谢你的提示,@NateDhaliwal!我之前不知道有 theme_authors 这个组,所以我会加入它,然后我们可以把该主题移到“主题”版块。

2 个赞

我试了一下,但没有任何效果。我点击了“试用主题”按钮。

例如,可以看看 https://riben.talk/。(感谢 @kddkd 提供示例)

你也可以在 https://discourse.theme-creator.io 上体验,限制极少(建议将搜索框放置在页眉中间)

附注!应用新主题后,别忘了在浏览器中刷新网站。

更新:@Heliosurge 的截图现已添加到首帖中,感谢提醒!如果你尝试了,请告诉我你的看法。

4 个赞

Terraglass 1.2.0 — 玻璃菜单和对话框

新增:玻璃菜单和对话框

磨砂效果现已扩展至页头、侧边栏和搜索框之外:

  • 下拉菜单 采用半透明设计并带有柔和的模糊效果,包括悬停和选中高亮
  • 对话框 也采用了相同的处理,其背后的页面会被模糊而不是变暗
  • 细微的发丝边缘和顶部淡淡的高光使表面呈现出玻璃质感
  • 菜单和对话框的不透明度和模糊度可以分别设置

默认开启。 如果您更喜欢之前的外观,请在主题设置中关闭 glass_surfaces。


Terraglass 1.1.0 — 可选页头色调,以及重要的错误修复

新增:页头色调

现在您可以为页头添加一种微妙的自定义颜色,适用于希望拥有更多视觉识别度的论坛。

  • auto 跟随当前配色方案的强调色,因此会随浅色/深色模式切换
  • custom 允许您选择任意颜色(十六进制、命名颜色、rgb 等)
  • 强度可调,从淡淡的提示到实心色条
  • 磨砂玻璃的透明度和模糊效果在下方保持完整

默认关闭 — 在主题设置中启用 header_tint 即可开启。

修复:开关设置无效的问题

在 1.0.x 版本中,在主题设置中关闭某个功能实际上并不会将其关闭。现在所有开关都能按预期正常工作。

4 个赞