Terraglass — a frosted-glass theme with considered light/dark palettes

Customization Theme
1

I just published a theme I’ve been refining for a while, now open source under MIT: a clean, modern look built around translucent, frosted-glass surfaces (header, sidebar, menus, dialogs, search) with a purpose-built light and dark color scheme — no hardcoded colors, everything tied to Discourse’s CSS custom properties, so it works out of the box with automatic light/dark switching.

Repo: terraboss/discourse-terraglass

Screenshots

Light scheme, running on Meta. Notifications menu, with the page showing through:

Notifications menu
Notifications menu2200×1150 428 KB

Search dropdown:

Search dropdown
Search dropdown2200×1150 516 KB

Dialogs — the page behind is blurred instead of darkened:

Keyboard shortcuts dialog
Keyboard shortcuts dialog2200×1150 262 KB

Flag dialog
Flag dialog2200×1150 252 KB

Features

  • Frosted glass surfaces — header, sidebar/hamburger menu, and the header search field/dropdown are semi-transparent with a backdrop blur; opacity and blur strength are both configurable
  • Glass menus and dialogs — dropdown menus (e.g. notifications) and dialogs share the frosted look, with a thin hairline edge and a faint highlight along the top; behind a dialog the page is blurred instead of darkened. Opacity and blur are adjustable separately for menus and dialogs
  • Optional header tint — give the header a subtle color, either following the accent color of the active color scheme or any custom color, with adjustable strength. In Safari the browser’s toolbar area is tinted to match. Off by default
  • Separate, purpose-built light and dark color schemes (not just an inverted single scheme), checked against WCAG AA contrast for text and UI elements
  • X/Twitter-style onebox link previews with a hairline border and rounded corners
  • Etiquette-style flag/arrow-shaped tags
  • Fixed 16:9 video embeds on every device
  • Zebra-striped topic list with a subtle hover state
  • Configurable corner rounding across buttons, cards, modals and inputs
  • Accessible focus outline that uses the scheme’s own text color, so it stays visible in both light and dark mode
  • Everything above is a theme setting — turn off or tune whatever you don’t want

Installation

Customize → Themes → Install → From a git repository:

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

That also gives you one-click “Check for updates” going forward.

Feedback welcome, happy to take feature requests or bug reports.

PS: Screenshots taken on Meta :discourse2: with the theme applied locally in my browser via the developer console :goodnews:

4 Likes
Backdrop-filter (blur) has no effect on .menu-panel, even though background transparency works
2

Can you post some screenshots? Sounds great

3 Likes
3

Maybe later. Just try it yourself! :slight_smile:

1 Like
4

Perhaps you want to join @theme_authors so you can post in the Customization > Theme category?

4 Likes
6

Thanks a lot for the hint, @NateDhaliwal! I didn’t know about the theme_authors group, so I’ll join it and we could move the topic to Theme afterwards.

2 Likes
7

I tried it out but didn’t get any effects. I used the try thene button.

8

Take a look at https://riben.talk/ for example. (Credits @kddkd)

You could also get in touch with it at https://discourse.theme-creator.io with minimal limitations (positioning the search field in the middle of the header, I would recommend)

PS! After applying the new theme, don’t forget to refresh the website in your browser.

IMG_0021
IMG_00211320×2868 506 KB

Update: @Heliosurge screenshots are now in the first post, thanks for the nudge! Let me know what you think if you give it a try.

4 Likes
9

Terraglass 1.2.0 — glass menus and dialogs

New: glass menus and dialogs

The frosted look now extends beyond header, sidebar and search:

  • Dropdown menus are translucent with a soft blur, including their hover and selection highlights
  • Dialogs get the same treatment, and the page behind them is blurred instead of darkened
  • A thin hairline edge and a faint highlight along the top make the surfaces read as glass
  • Opacity and blur can be set separately for menus and dialogs

It’s on by default. If you prefer the previous look, turn off glass_surfaces in the theme settings.

Terraglass 1.1.0 — optional header tint, plus an important bugfix

New: header tint

You can now give the header a subtle color of your own, for forums that want a bit more visual identity.

  • auto follows the accent color of the active color scheme, so it switches along with light/dark mode
  • custom lets you pick any color (hex, named color, rgb…)
  • Adjustable strength, from a faint hint to a solid bar
  • The frosted-glass transparency and blur stay intact underneath

It’s off by default — enable it with header_tint in the theme settings.

Fixed: on/off settings had no effect

In 1.0.x, switching a feature off in the theme settings didn’t actually turn it off. All toggles now work as intended.

4 Likes