---
title: Hyprland Waybar 設定とテーマ：モジュール化、インタラクション、Matugen
url: https://doc.liz6.com/ja/tools/hyprland/04-waybar-theming
locale: ja
area: tools
tags:
- Waybar
- Hyprland
- Matugen
- Wayland
- GTK CSS
- tools
- hyprland
date: 2026-08-11
modified: 2026-08-11
description: 動作可能な Hyprland Waybar 設定を基に、モジュールの分割、左右中央のレイアウト、GTK CSS テーマ、ワークスペース、音量とネットワークのインタラクション、systemd による起動、およびオプションの Matugen による動的配色について解説します。
---
# Hyprland Waybar 設定とテーマ
この Waybar は Hyprland デスクトップの**バックアップステータスバー**です。現在のメインデスクトップでは Quickshell を使用しており、Waybar の systemd サービスは `disabled/inactive` に設定されていますが、設定自体は独立して起動可能であり、Quickshell のデバッグやデスクトップの復旧、軽量なステータスバーが必要な場合に適しています。
本記事は実際の環境設定に基づいており、巨大な JSON ファイルを羅列するのではなく、Waybar をどのように保守可能なモジュール、スタイル、インタラクションスクリプトに分割するかを解説することを目的としています。
## 1. ファイル構造
```text
~/.config/waybar/
├── config # メインレイアウト。モジュールの順序とグローバル動作のみを決定
├── style.css # CSS エントリポイント
├── theme.css # 現在の静的配色（Catppuccin Mocha）
├── styles/
│ ├── fonts.css
│ ├── modules-left.css
│ ├── modules-center.css
│ ├── modules-right.css
│ └── states.css
├── modules/
│ ├── hyprland/*.jsonc # ワークスペース、ウィンドウ、IME
│ ├── custom/*.jsonc # ユーザー、区切り文字、電源
│ └── *.jsonc # CPU、メモリ、ネットワーク、Bluetooth、音量など
└── scripts/ # クリック、スクロール、パネル制御スクリプト
```
メイン設定は `include` を通じてモジュールスニペットを取り込みます：
```jsonc
{
"include": [
"~/.config/waybar/modules/*.jsonc",
"~/.config/waybar/modules/custom/*.jsonc",
"~/.config/waybar/modules/hyprland/*.jsonc"
]
}
```
これにより、新しいモジュールを追加する際には JSONC ファイルを1つ追加するだけで済み、メイン設定が保守不可能な単一ファイルに膨れ上がるのを防ぎます。
## 2. 三段構成のレイアウト
実際のレイアウトは left、center、right の3つのグループに分かれています：
```jsonc
"modules-left": [
"custom/user",
"hyprland/workspaces",
"hyprland/window"
],
"modules-center": [
"hyprland/language",
"temperature",
"memory",
"cpu",
"idle_inhibitor",
"clock#time",
"clock#date",
"network",
"bluetooth"
],
"modules-right": [
"mpris",
"group/pulseaudio",
"battery",
"custom/power"
]
```
実際の設定では、モジュールの間に左右の斜め区切り文字が挿入されています。これらはプレゼンテーション用のモジュールであり、状態ロジックは担いません。区切り文字を削除しても、業務モジュールは正常に動作し続けます。
グローバルオプションの中で特に保持すべきものは以下の通りです：
```jsonc
"layer": "top",
"mode": "dock",
"spacing": 0,
"reload_style_on_change": true
```
`reload_style_on_change` は CSS ファイルが変更された際にスタイルを再読み込みするため、テーマを調整する際に Waybar を繰り返し再起動する必要がなくなります。
## 3. Hyprland ワークスペース
ワークスペースモジュールは5つのワークスペースを固定で保持し、スクロールホイールでの切り替えを許可します：
```jsonc
{
"hyprland/workspaces": {
"format": "{icon}",
"format-icons": {
"active": "",
"default": ""
},
"persistent-workspaces": {
"*": 5
},
"on-scroll-up": "hyprctl dispatch workspace +1",
"on-scroll-down": "hyprctl dispatch workspace -1",
"cursor": true
}
}
```
ここでは Nerd Font のアイコンに依存しています。Waybar で四角いボックスが表示される場合は、JSON を修正する前にまずフォントを確認してください。
## 4. 音量：drawer + クリック/スクロールスクリプト
出力音量と入力音量は、横長の drawer に収められています：
```jsonc
"group/pulseaudio": {
"orientation": "horizontal",
"modules": [
"pulseaudio#output",
"pulseaudio#input"
],
"drawer": {
"transition-left-to-right": false
}
}
```
出力モジュールでは、3種類の操作を分離しています：
```jsonc
"on-click": "~/.config/waybar/scripts/volume output mute",
"on-scroll-up": "~/.config/waybar/scripts/volume output raise",
"on-scroll-down": "~/.config/waybar/scripts/volume output lower"
```
入力モジュールでは同じスクリプトを再利用し、オブジェクトを `input` のみに変更しています。このインターフェースは、JSON 内で `wpctl`/`pactl` コマンドをコピー＆ペーストするよりもテストが容易であり、ステップサイズ、デフォルトデバイス、エラーメッセージの処理を統一できます。
## 5. ネットワークとコントロールパネル
ネットワークモジュールはアイコンをコンパクトに保ち、詳細情報はツールチップに格納します：
```jsonc
{
"network": {
"interval": 10,
"format-ethernet": "",
"format-wifi": "{icon}",
"format-disconnected": "",
"on-click": "ghostty -e ~/.config/waybar/scripts/network",
"on-click-right": "~/.config/waybar/scripts/network off",
"tooltip-format-wifi": "Network: {essid}\nIP: {ipaddr}/{cidr}\nStrength: {signalStrength}%"
}
}
```
音量と Bluetooth のボタンは、統一された `panel_toggle.sh` を介して GTK パネルを開きます。スクリプトは以下の3つのルールに従います：
1. 同じボタンを再度クリックすると、パネルが閉じます。
2. 別のパネルを開く前に現在のパネルを閉じ、複数のコントロールセンターが重なり合わないようにします。
3. `panel_watch.sh` は Hyprland のアクティブウィンドウを観察し、フォーカスがパネルから外れると自動的に閉じます。
パネルの存在を確認する際は、`pgrep` のみに頼らず、`hyprctl clients -j` のウィンドウクラスを照会してください。Blueman などのプログラムは Python によって起動される場合があり、プロセス名はユーザーが実際に目にするウィンドウを必ずしも正確に表すわけではありません。
## 6. CSS の階層化
`style.css` は組み合わせのみを担当します：
```css
@import "theme.css";
* {
all: initial;
color: @main-fg;
}
@import "styles/fonts.css";
@import "styles/modules-center.css";
@import "styles/modules-left.css";
@import "styles/modules-right.css";
@import "styles/states.css";
```
現在の `theme.css` は静的な Catppuccin Mocha で、基本色を定義した後に意味的な色にマッピングしています：
```css
@define-color lavender #b4befe;
@define-color text #cdd6f4;
@define-color crust #11111b;
@define-color accent @lavender;
@define-color main-bg @crust;
@define-color main-fg @text;
@define-color warning @yellow;
@define-color critical @red;
```
業務用のスタイルでは、10箇所以上の16進数値を直接記述するのではなく、`@main-bg`、`@accent`、`@critical` などの意味的な色のみを参照します。テーマを変更する際は、`theme.css` を置き換えるだけです。
## 7. オプション：Matugen による Waybar テーマの生成
現在の環境では、Matugen は Quickshell、Hyprland、Hyprlock、Fuzzel、Fcitx5、GTK、Ghostty、KDE、Zellij を管理していますが、**Waybar の `theme.css` はまだ生成されていません**。Waybar を壁紙に合わせて変更したい場合は、新しいテンプレートを追加できます：
```toml
[templates.waybar]
input_path = '~/.config/matugen/templates/waybar/theme.css'
output_path = '~/.config/waybar/theme.css'
post_hook = 'pkill -SIGUSR2 waybar 2>/dev/null || true'
```
テンプレートは意味的な色のみを出力し、既存のモジュール CSS は変更しません：
```css
@define-color accent #{{colors.primary.default.hex}};
@define-color main-bg #{{colors.surface.default.hex}};
@define-color main-fg #{{colors.on_surface.default.hex}};
@define-color main-br #{{colors.outline.default.hex}};
@define-color warning #{{colors.tertiary.default.hex}};
@define-color critical #{{colors.error.default.hex}};
```
Matugen のテンプレート変数構文はバージョンによって変更される可能性があります。導入する前に、現在のインストールバージョンで一時ファイルにレンダリングし、空の変数がないことを確認してから、正式な `theme.css` に上書きしてください。
## 8. systemd による起動とフォールバック
Waybar のユーザーサービス：
```ini
[Unit]
Description=Highly customizable Wayland bar for Hyprland
PartOf=graphical-session.target
After=graphical-session.target
ConditionEnvironment=WAYLAND_DISPLAY
[Service]
ExecStart=/usr/bin/waybar
ExecReload=kill -SIGUSR2 $MAINPID
Restart=on-failure
[Install]
WantedBy=hyprland-session.target
```
手動でのテスト実行：
```bash
waybar -l info
```
デフォルトのステータスバーへの切り替え：
```bash
systemctl --user enable --now waybar.service
```
バックアップ状態への復元：
```bash
systemctl --user disable --now waybar.service
```
Waybar を有効にする前に、同じ画面端を占有している他のバーを停止してください。これにより、exclusive zone、クリック領域、または階層が互いに重なるのを防ぎます。
## 9. トラブルシューティングの手順
1. `waybar -l trace`：JSONC、モジュール、CSS の解析エラーをまず確認します。
2. `hyprctl clients -j`：クリックスクリプトが依存するウィンドウクラスを確認します。
3. `fc-match`：Nerd Font とアイコンフォントをチェックします。
4. `scripts/` 内のコマンドを個別に実行し、Waybar の問題とスクリプトの問題を区別します。
5. `@import` を一時的に削除し、CSS の解析失敗を段階的に特定します。
6. `systemctl --user status waybar.service` と journal を使用して、セッション環境を確認します。
この構造の核心は、**レイアウト、モジュールの動作、インタラクションスクリプト、カラーテーマを分離すること**にあります。Waybar は軽量なバックアップとして維持することも、独立して進化させることもできます。Matugen の導入は単なるテーマのソース選択に過ぎず、モジュール自体に影響を与えるべきではありません。