しばらくかけて磨き上げてきたテーマを公開しました。現在は MIT ライセンスの下でオープンソースとして提供しています。半透明のフロストガラス風の表面（ヘッダー、サイドバー、検索）を中心に構築された、クリーンでモダンなデザインです。ライトモードとダークモード用に個別に設計されたカラースキームを備えており、色はハードコードされていません。すべて Discourse の CSS カスタムプロパティに紐付けられているため、ライト/ダークモードの自動切り替えにもそのまま対応します。
リポジトリ: terraboss/discourse-terraglass
機能
- フロストガラス風の表面 — ヘッダー、サイドバー/ハンバーガーメニュー、およびヘッダーの検索フィールド/ドロップダウンが半透明になり、背景ぼけが適用されます。不透明度とぼけの強さはどちらも設定可能
- 個別に設計されたライトモードとダークモード用のカラースキーム（単一スキームの反転ではなく）。テキストおよび UI 要素のコントラストは WCAG AA に準拠して確認済み
- X/Twitter スタイルのワンボックス形式のリンクプレビュー。細いボーダーと角丸を採用
- マナー（Etiquette）スタイルの旗/矢印形のタグ
- すべてのデバイスで 16:9 の固定アスペクト比の動画埋め込み
- 微妙なホバー状態を持つ、縞模様（ゼブラストライプ）のトピック一覧
- ボタン、カード、モーダル、入力フィールド全体の角丸の半径を個別に設定可能
- スキーム自体のテキストカラーを使用するアクセシブルなフォーカスアウトライン。ライトモードでもダークモードでも視認性を維持
- 上記すべての機能はテーマ設定として提供されています。不要なものはオフにしたり、調整したりできます
インストール
カスタマイズ → テーマ → インストール → Git リポジトリから:
https://github.com/terraboss/discourse-terraglass
これにより、今後ワンクリックで「更新を確認」できるようになります。
更新情報
以前に指摘していた backdrop-filter のぼけの問題は修正されました。実際の原因を指摘してくれた awesomerobot さんに感謝します（詳細はこちら）。サイドバー、ハンバーガーメニュー、検索パネルはいずれも正しくぼけが適用されるようになりました。
フィードバックを大歓迎します。機能のリクエストやバグレポートも喜んで受け付けます。
