Hyprland Waybar の設定とテーマ

Waybar は主バーにも外殻保守中の予備にも使える。JSON/JSONC と GTK CSS を読み、完全な Quickshell 外殻を必要としない。

個人スクリプトなしの最小例から始める。既存 UI と競合しない辺で試し、正式切り替え前には同じ辺を使用するバーを停止する。

1. 独立した試験設定

~/.config/waybar-lab/ を作り、完全な config.jsonc を保存する。

{
  "layer": "top",
  "position": "bottom",
  "height": 32,
  "spacing": 8,
  "modules-left": ["hyprland/workspaces"],
  "modules-center": ["clock"],
  "modules-right": ["cpu", "memory"],
  "hyprland/workspaces": {
    "format": "{name}",
    "on-click": "activate"
  },
  "clock": {
    "format": "{:%H:%M}",
    "tooltip-format": "{:%Y-%m-%d %A}"
  },
  "cpu": { "format": "CPU {usage}%" },
  "memory": { "format": "RAM {percentage}%" }
}

アイコン問題を避けるため文字で表示する。下辺も既存配置と重なる場合があるため、環境に合わせる。

同じ場所の style.css：

* {
  font-family: sans-serif;
  font-size: 13px;
  border: none;
  border-radius: 0;
  min-height: 0;
}

window#waybar {
  background: #1e2530;
  color: #f1f4f8;
}

#workspaces button {
  padding: 0 8px;
  color: #b8c3d2;
  background: transparent;
}

#workspaces button.active {
  color: #ffffff;
  background: #40516b;
}

#clock, #cpu, #memory {
  padding: 0 8px;
}

Hyprland の端末から起動する。

waybar -c ~/.config/waybar-lab/config.jsonc -s ~/.config/waybar-lab/style.css -l info

workspace、時計、CPU、メモリを確認する。前面実行ならログを読め、Ctrl+C で停止できる。自動起動は変更しない。Waybar 設定

2. 動作後にファイルを分割する

waybar/
├── config.jsonc
├── modules/
│   ├── workspaces.jsonc
│   ├── audio.jsonc
│   └── network.jsonc
├── style.css
├── theme.css
└── styles/
    ├── base.css
    └── modules.css

主設定は配置順を残し、include を追加する。

{
  "include": [
    "~/.config/waybar/modules/workspaces.jsonc",
    "~/.config/waybar/modules/audio.jsonc",
    "~/.config/waybar/modules/network.jsonc"
  ]
}

これは include 部分で、バー全体の設定ではない。各モジュールファイルは完全な JSON オブジェクトにする。重複定義の不明な優先順へ依存しない。

3. workspace と多画面

{
  "hyprland/workspaces": {
    "format": "{name}",
    "on-click": "activate",
    "persistent-workspaces": { "*": 5 }
  }
}

ボタンの常時表示は、各 workspace に窓が存在する意味ではない。画面の所属、表示範囲、クリックを検証してからスクロールを追加する。記号の四角表示はフォントを先に確認する。workspace モジュール

4. 音量と入力操作

PipeWire/WirePlumber と対応 Waybar ビルドで使用する。

{
  "wireplumber": {
    "format": "VOL {volume}%",
    "format-muted": "MUTE",
    "on-click": "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle",
    "on-scroll-up": "wpctl set-volume -l 1.0 @DEFAULT_AUDIO_SINK@ 5%+",
    "on-scroll-down": "wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%-"
  }
}

wireplumber を modules-right に加える。上限 1.0 で 100% 超えを抑える。wpctl を単独確認してからクリックとホイールを試す。

既存構成では PulseAudio 互換サービス経由のモジュールも使える。システムとビルドに合う一つを選ぶ。入力・出力を drawer にまとめる場合も個別動作を先に確認する。WirePlumber モジュール

5. ネットワークと外部パネル

{
  "network": {
    "interval": 10,
    "format-ethernet": "LAN {ipaddr}",
    "format-wifi": "Wi-Fi {signalStrength}%",
    "format-disconnected": "Offline",
    "tooltip-format-wifi": "{essid}\n{ipaddr}/{cidr}"
  }
}

network を配置へ加える。クリックで開く GUI/TUI は導入を確認してから設定する。管理サービス、パネル、バーは別部品である。

共通パネル切り替えスクリプトは class、二度押し、エラー出力を明確にする。プロセスがあるだけでは窓の可視性を判断できない。

6. GTK CSS と色の役割

GTK CSS は Web CSS と対応範囲が異なる。構文エラーを確認してから装飾を追加し、ブラウザの構文を無条件で移植しない。

import は他の規則より前へ置く。

@import "theme.css";
@import "styles/base.css";
@import "styles/modules.css";

theme.css に役割を定義する。

@define-color main-bg #1e2530;
@define-color main-fg #f1f4f8;
@define-color accent #9bbdf0;

各モジュールは main-bg、main-fg、accent を参照する。警告、無効、選択、hover の可読性も確認する。

7. 任意の Matugen 生成

モジュールと操作が安定してから Matugen で同じ役割を生成する。4.1.0 の hex は # を含むため、実出力で確認する。

CSS を検証して指定インスタンスへ反映する。ファイルの更新だけでは既存バーの更新を保証しない。

8. ユーザーサービスと回退

前面動作を確認したら既存サービスを調べる。

systemctl --user cat waybar.service
systemctl --user status waybar.service

存在しない場合は実 session target に合わせて作る。セッション診断。ExecStart と終了時の停止も確認する。

既存サービスの一時起動：

systemctl --user start waybar.service

UI、ログ、主外殻との分担を確認してから恒久有効化を決める。予備へ戻す場合は停止と実際の自動起動元を整理する。systemd の disable だけでは別の Hyprland 起動命令は消えない。

9. 診断順序

trace ログ、明示パスと include、最小モジュール、単独クリック命令、フォントと CSS、サービス環境の順に切り分ける。

装飾を外しても機能が動き、予備バーを停止しても主デスクトップが使える構成を完成条件とする。