しばらく調整してきたテーマを公開しました。現在はMITライセンスの下でオープンソースとして提供されています。半透明のフロストガラス風のサーフェス(ヘッダー、サイドバー、メニュー、ダイアログ、検索)を中心に構築された、クリーンでモダンな外観です。ライトモードとダークモード用に個別に設計されたカラーパレットを採用しており、ハードコードされた色は一切ありません。すべてDiscourseのCSSカスタムプロパティに紐付けられているため、ライト/ダークモードの自動切り替えにもそのまま対応します。
リポジトリ: terraboss/discourse-terraglass
スクリーンショット
ライトモード、Metaで実行。ページが透けて見える通知メニュー:
検索ドロップダウン:
ダイアログ — 背後のページは暗くするのではなく、ぼかされます:
機能
- フロストガラス風のサーフェス — ヘッダー、サイドバー/ハンバーガーメニュー、ヘッダーの検索フィールド/ドロップダウンは半透明で、背景にブラー(ぼかし)が適用されます。不透明度とブラーの強さはどちらも設定可能
- ガラス風のメニューとダイアログ — ドロップダウンメニュー(例: 通知)やダイアログも同じフロストガラス風の外観を共有し、細いヘアラインエッジと上部の淡いハイライトが施されています。ダイアログの背後では、ページが暗くされるのではなくぼかされます。メニューとダイアログで不透明度とブラーを個別に調整可能
- オプションのヘッダーティント — アクティブなカラーパレットのアクセントカラーに従うか、任意のカスタムカラーを使用して、ヘッダーに微細な色合いを付与できます。強度も調整可能。Safariでは、ブラウザのツールバー領域もそれに合わせて色付けされます。デフォルトではオフ
- 個別に設計されたライトモードとダークモードのカラーパレット(単一パレットの反転ではなく)、テキストとUI要素のコントラストはWCAG AA基準で検証済み
- X/Twitter風のワンボックスリンクプレビュー、ヘアラインボーダーと角丸付き
- エチケット風の旗/矢印形のタグ
- すべてのデバイスで固定の16:9ビデオ埋め込み
- 微妙なホバー状態を備えたジグザグストライプ(縞模様)のトピックリスト
- ボタン、カード、モーダル、入力フィールド全体の角丸設定可能
- スキーム自体のテキストカラーを使用するアクセシブルなフォーカスアウトライン。これにより、ライトモードでもダークモードでも視認性を維持
- 上記のすべてはテーマ設定です。不要なものをオフにしたり、調整したりできます
インストール
カスタマイズ → テーマ → インストール → Gitリポジトリから:
https://github.com/terraboss/discourse-terraglass
これにより、今後ワンクリックで「更新を確認」も可能になります。
フィードバックをお待ちしています。機能リクエストやバグ報告も喜んで受け付けます。
P.S.: スクリーンショットはMetaで撮影
ブラウザ内で開発者コンソールを介してローカルにテーマを適用したもの 
「いいね!」 4
Heliosurge
(Dan DeMontmorency)
2
スクリーンショットをいくつか投稿してもらえますか? 素晴らしいですね
「いいね!」 3
まあ、また今度でもいいよ。まずは自分で試してみて! 
「いいね!」 1
おそらく @theme_authors に参加して、Customization > Theme カテゴリに投稿できるようにしたいということでしょうか?
「いいね!」 4
@NateDhaliwal さん、ヒントをありがとうございます!theme_authors グループの存在を知らなかったので、参加して、その後にこのトピックを Theme に移動できればと思います。
「いいね!」 2
Heliosurge
(Dan DeMontmorency)
7
試してみましたが、何も変化がありませんでした。「テーマを試す」ボタンを使いました。
例えば https://riben.talk/ を見てみてください。(クレジット @kddkd)
また、https://discourse.theme-creator.io でも、最小限の制限(ヘッダーの中央に検索フィールドを配置することを推奨します)でこのテーマを利用できます。
P.S. 新しいテーマを適用した後、ブラウザでサイトを再読み込みすることを忘れないでください。
更新情報: @Heliosurge のスクリーンショットは最初の投稿に追加されました。促してくれてありがとう!試してみたら、どう思ったか教えてください。
「いいね!」 4
Terraglass 1.2.0 — ガラス風のメニューとダイアログ
新機能: ガラス風のメニューとダイアログ
フローズン(ぼかし)ルックは、ヘッダー、サイドバー、検索バーを超えて拡張されました:
- ドロップダウンメニューは半透明で、ソフトなぼかしが適用され、ホバーや選択時のハイライトにも反映されます
- ダイアログにも同様の処理が施され、背後のページは暗くされるのではなく、ぼかされます
- 細いヘアラインエッジと上部に沿った淡いハイライトにより、表面がガラスのように見えます
- 不透明度とぼかしは、メニューとダイアログで個別に設定できます
**デフォルトで有効になっています。**以前のルックを好む場合は、テーマ設定で glass_surfaces を無効にしてください。
Terraglass 1.1.0 — オプションのヘッダーティントと重要なバグ修正
新機能: ヘッダーティント
ビジュアルアイデンティティをもう少し強調したいフォーラム向けに、ヘッダーに独自の控えめな色を付けることができます。
- auto はアクティブなカラースキームのアクセントカラーに従うため、ライト/ダークモードの切り替えに合わせて変更されます
- custom では任意の色(16進数、名前付きカラー、rgb…)を選択できます
- 淡いヒントから固いバーまで、強さを調整できます
- 下部のフローズンガラスの透明感とぼかしはそのまま維持されます
デフォルトでは無効です — テーマ設定で header_tint を有効にしてください。
修正: オン/オフ設定が反映されない問題
1.0.x では、テーマ設定で機能をオフにしても、実際にはオフになりませんでした。すべてのトグルが意図した 대로動作するようになりました。
「いいね!」 4