Terraglass — 意図的な明暗パレットを持つフロストガラステーマ

しばらく調整してきたテーマを公開しました。現在は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で撮影 :discourse2: ブラウザ内で開発者コンソールを介してローカルにテーマを適用したもの :goodnews:

「いいね!」 4

スクリーンショットをいくつか投稿してもらえますか? 素晴らしいですね

「いいね!」 3

まあ、また今度でもいいよ。まずは自分で試してみて! :slight_smile:

「いいね!」 1

おそらく @theme_authors に参加して、Customization > Theme カテゴリに投稿できるようにしたいということでしょうか?

「いいね!」 4

@NateDhaliwal さん、ヒントをありがとうございます!theme_authors グループの存在を知らなかったので、参加して、その後にこのトピックを Theme に移動できればと思います。

「いいね!」 2

試してみましたが、何も変化がありませんでした。「テーマを試す」ボタンを使いました。

例えば 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