LoginSignup
27
17
@matoruru

GTK+のAdapta-Noktoが気に入りすぎてPolybarテーマを作った

Last updated at Posted at 2019-03-09

⭐️⭐️⭐️ GitHubスター70個突破！ありがとうございます😊 ⭐️⭐️⭐️

作成したテーマはこちら↓
matoruru/polybar-adapta-theme - GitHub

きっかけ

GTK+のテーマであるAdapta-Noktoの洗練されたダークなカッコ良さに感動し、触発され、タイル型ウインドウマネージャi3のステータスバーとして有名なPolybarのテーマを作りました。

以下のような見た目です。
screenshot_1

本家Adapta-Noktoのコンポーネントと同テーマのNautilusも一緒に表示してみます。相性抜群です。
screenshot_2.png

もともとウインドウマネージャとしてタイル型のXMonadを常用しており、(半)付属のステータスバーであるxmobarを使っていましたが、その深遠さと難易度に震え、Polybarに逃げ移った次第です。

しかし結果として、Polybarのカスタマイズ性の高さとデフォルト設定の出来の良さに感動させられ、Adapta-Nokto風のダークでクールなデザインを適用することもたった数時間で完了しました。もっと早く移っていればよかった・・・。

動作環境

OS：Arch Linux
ウインドウマネージャ(WM)：XMonad
コンポジットマネージャ：Picom
ステータスバー：Polybar

設定ファイル

以下のリポジトリからご覧ください。
matoruru/polybar-adapta-theme - GitHub

各モジュールについては機能の節で説明します。

インストール手順

以下のいずれかのインストール方法を選んでください。

# 対話式インストーラ
$ bash -c "bash <(curl -sL https://git.io/Jv0e4)"

# 非対話式インストーラ
$ bash -c "bash <(curl -sL https://git.io/Jv0e4) --yes"

あとは ~/.config/polybar/launch.sh を実行すれば起動します！

ログイン時に自動で起動してほしい場合は、launch.sh をスタートアップスクリプトとして設定してください（~/.xinitrcに追記、など）。

本家テーマとの比較

中途半端なテーマを作りたくなかったので、本家テーマのカラーコードを調べて作成しました。

背景、文字、下線、シークバー、バッテリーなど、本テーマで使用する色は全て本家Adapta-Nokto様と同じカラーコードです(ドキュメントに載っていないものはGIMPのスポイト機能で調査しました)。

以下にカラーコードの対応表と比較用画像を載せます。
※比較用画像では、ステータスバーの背景部分を一部省略しています。

使用箇所 カラーコード 本家カラーコード 色見本
背景 #222D32 #222D32 color-222D32.png
文字 #CFD8DC #CFD8DC color-CFD8DC.png
下線 #00BCD4 #00BCD4 color-00BCD4.png
シークバー(到達) #4DB6AC #4DB6AC color-4DB6AC.png
シークバー(未到達) #475359 #475359 color-475359.png
弱警告 #C9BC0E #C9BC0E color-C9BC0E.png
強警告 #FF5252 #FF5252 color-FF5252.png

details.png

機能

主な機能の説明をします。各機能の末尾には対応する設定を記載します(全文はこちら)。

全体を通して使う設定は以下の通りです。

~/.config/polybar/config
;====General Settings======================================
[colors]
bg = #222D32
fg = #CFD8DC
adapta-cyan = #00BCD4
adapta-red = #FF5252
adapta-yellow = #C9BC0E
adapta-lightgreen = #4DB6AC
adapta-green = #009688
adapta-grey = #475359

[margin]
for-modules = 1

[bar/main]
width = 100%
height = 22
fixed-center = true
line-size = 2
background = ${colors.bg}
foreground = ${colors.fg}
font-0 = "Fantasque Sans Mono:pixelsize=10;3"
font-1 = "Iosevka Nerd Font:pixelsize=14;3"
cursor-click = pointer
;==========================================================

;====Module settings+======================================
modules-left = windows explorer google amazon github reddit facebook youtube workspaces-xmonad
modules-center = date
modules-right = mpd pkg xbacklight volume wlan cpu-graph memory battery powermenu
;==========================================================

Module settingsの中にあるmodules-left、modules-center、modules-rightに表示したいモジュールを設定することで、ステータスバーのレイアウトを決められます。

名前のとおりですが、

  • ステータスバーの左側に表示したい -> modules-left
  • ステータスバーの中央に表示したい -> modules-center
  • ステータスバーの右側に表示したい -> modules-right

といった対応になっています。

また、fixed-centerをtrueにすることで、leftとrightの詰まり具合に影響されることなく中央を定めることができます。

fixed-center 表示結果
true fixed-center-true
false fixed-center-false

アプリアイコン一覧

app_icons

左から,

  • Appleアイコン
    • ご存知、あのリンゴです。特に機能ないです。見た目だけ。Windowが4つくらい並んだ風なマークも設定できます。
  • ファイルマネージャ
    • Nautilusを開きます。GTK+テーマをAdapta-NoktoにするとPolybarと合います。
  • Googleアイコン
    • ブラウザでGoogle検索のトップページを開きます。
  • ...
  • ...、 あとはアイコンの通りのページをブラウザで開きます。
~/.config/polybar/config
[module/arch]
type = custom/text
content = 
content-padding = 1
content-foreground = ${colors.fg}
content-underline = ${colors.adapta-cyan}
;click-left = rmenu_1
;click-right = rmenu_wi_1

[module/apple]
type = custom/text
content = 
content-padding = 1
content-foreground = ${colors.fg}
content-underline = ${colors.adapta-cyan}
;click-left = rmenu_1
;click-right = rmenu_wi_1

[module/windows]
type = custom/text
content = 
content-padding = 1
content-foreground = ${colors.fg}
content-underline = ${colors.adapta-cyan}
;click-left = rmenu_1
;click-right = rmenu_wi_1

[module/explorer]
type = custom/text
content = 
;content = 
content-padding = 1
content-foreground = ${colors.fg}
click-left = nautilus

[module/google]
type = custom/text
content = 
content-padding = 1
content-foreground = ${colors.fg}
click-left = xdg-open https://www.google.com/

[module/amazon]
type = custom/text
content = 
content-padding = 1
content-foreground = ${colors.fg}
click-left = xdg-open https://www.amazon.co.jp/
;click-left = xdg-open https://www.amazon.com/

[module/github]
type = custom/text
content = 
content-padding = 1
content-foreground = ${colors.fg}
click-left = xdg-open https://www.github.com/

[module/reddit]
type = custom/text
content = 
;content = 
content-padding = 1
content-foreground = ${colors.fg}
click-left = xdg-open https://www.reddit.com/

[module/facebook]
type = custom/text
content = 
content-padding = 1
content-foreground = ${colors.fg}
click-left = xdg-open https://www.facebook.com/

[module/youtube]
type = custom/text
content = 
;content = 
content-padding = 1
content-foreground = ${colors.fg}
click-left = xdg-open https://www.youtube.com/

ワークスペース一覧表示

この機能は、XMonadの持つHaskellパワーをフル活用して実現しました。我々が愛するPolybarはxmobarやdzenのようなXMonadの半公式サポートを受けることが許されていないので、欲しい機能は自分で作る必要があります。

こちらにPolybarユーザ様の誰かが作成してくださったワークスペース表示用モジュールがありますが、機能が乏しく（全ワークスペースと現在のワークスペースのみの表示）、名前付きパイプ作成のために外部ツールであるmkfifoへの依存性があり、良くないです。

本記事で紹介する方法では、空のワークスペース（未使用のWS）とウインドウが存在するワークスペース（使用中のWS）を区別することができ、とても便利です。

createNamedPipe関数で作成した名前付きパイプを通じてワークスペース情報を取得しています。

以下のように表示されます（GitHubにアニメーションがあります）。

workspaces

現在のWS 使用中のWS 未使用のWS
workspaces_now workspaces_exists workspaces_empty

configファイル内で、普通のワークスペース用モジュール([module/workspaces])とは別にXMonad用([module/workspaces-xmonad])を作成しました。

~/.config/polybar/config
[module/workspaces-xmonad]
type = custom/script
exec = tail -F /tmp/.xmonad-workspace-log
exec-if = [ -p /tmp/.xmonad-workspace-log ]
tail = true
format-underline = ${colors.adapta-cyan}
format-padding = 1
;format-margin = ${margin.for-modules}

[module/workspaces]
type = internal/xworkspaces
pin-workspaces = false
enable-click = true
enable-scroll = true
format-padding = 1
;icon-0 = 1;❶
;icon-1 = 2;❷
;icon-2 = 3;❸
;icon-3 = 4;❹
;icon-4 = 5;❺
;icon-5 = 6;❻
;icon-6 = 7;❼
;icon-7 = 8;❽
;icon-8 = 9;❾
;icon-9 = 10;❿
icon-default = 
format = <label-state>
;format-background = ${colors.shade2}
label-active = 
label-occupied = 
label-urgent = 
label-empty = 
label-empty-padding = 1
label-active-padding = 1
label-urgent-padding = 1
label-occupied-padding = 1
label-empty-foreground = ${colors.fg}
;label-active-foreground = ${colors.}
;label-urgent-foreground = ${colors.}
;label-occupied-foreground = ${colors.}

xmonadの設定は以下の通りです。

~/.xmonad/xmonad.hs
import Control.Monad
import Data.List
import Data.Monoid
import Data.Ord
import System.Directory
import System.Posix.Files

import qualified XMonad.StackSet as S

-- 〜〜省略〜〜

getWorkspaceLog :: X String
getWorkspaceLog = do
      winset <- gets windowset
      let currWs = S.currentTag winset
      let wss    = S.workspaces winset
      let wsIds  = map S.tag   $ wss
      let wins   = map S.stack $ wss
      let (wsIds', wins') = sortById wsIds wins
      return . join . map (fmt currWs wins') $ wsIds'
      where
         hasW = not . null
         idx = flip (-) 1 . read
         sortById ids xs = unzip $ sortBy (comparing fst) (zip ids xs)
         fmt cw ws id
              | id == cw            = "\63022"
              | hasW $ ws !! idx id = "\61842"
              | otherwise           = "\63023"

eventLogHook :: FilePath -> X ()
eventLogHook filename = io . appendFile filename . (++ "\n") =<< getWorkspaceLog

main :: IO ()
main = do
      wsLogfile <- return "/tmp/.xmonad-workspace-log"
      de <- doesFileExist wsLogfile
      case de of
         True -> return ()
         _    -> createNamedPipe wsLogfile stdFileMode
      xmonad . ewmh $ myConfig wsLogfile

myConfig filename = def
   { -- 〜〜省略〜〜
   , logHook = eventLogHook filename
   , -- 〜〜省略〜〜
   }

日付・時間表示

date-time.png

画面上部中央のやつです。下線がおしゃれ！

~/.config/polybar/config
[module/date]
type = internal/date
interval = 1
label =  %time%
label-padding = 1
;label-background = ${colors.shade1}
label-underline = ${colors.adapta-cyan}
time =   %a %d %b %Y %T
label-margin = ${margin.for-modules}

パッケージの更新チェック

これはとても良い機能です。

自動でパッケージの更新が必要かどうかを確認し、表情でパッケージの更新の有無を、数字で更新パッケージ数を知らせてくれます。パッケージマネージャにはpacmanとyayを使用します。

更新あり 更新なし 情報取得失敗
updated notupdated syncfailed

パッケージの更新が降ってくるとしかめっ面になりますが、更新するとすぐに笑顔を取り戻してくれます。

こんな感じで笑顔を取り戻します。かわいい。
frown-smile
また、パッケージ情報の取得時に回転アニメーションが表示されているのがわかるでしょうか。これによって、退屈だったステータスバーがよりリッチなものになりますね。

定期的な更新をサボらず、この子の笑顔を守ってあげてください。

~/.config/polybar/config
[module/pkg]
type = custom/script
exec = bash ~/.config/polybar/updates.sh
;format-background = ${colors.shade2}
format-underline = ${colors.adapta-cyan}
format-padding = 1
tail = true
format-margin = ${margin.for-modules}

以下がパッケージ更新の有無と数を取得するスクリプトです。

~/.config/polybar/update.sh
#!/bin/sh

if ! updates_arch=$(checkupdates 2> /dev/null | wc -l ); then
    updates_arch=0
fi

if ! updates_aur=$(yay -Qum 2> /dev/null | wc -l); then
# if ! updates_aur=$(cower -u 2> /dev/null | wc -l); then
# if ! updates_aur=$(trizen -Su --aur --quiet | wc -l); then
    updates_aur=0
fi

updates=$(("$updates_arch" + "$updates_aur"))

if [ "$updates" -gt 0 ]; then
    echo " $updates"
else
    echo " $updates"
fi

バックライトの輝度調整

バックライトの明るさをシークバーで表しています。

backlight-seekbar.png

マウスホイールやタッチパッドでスクロールすることでも明るさを変更できます。

backlight_slider

~/.config/polybar/config
[module/xbacklight]
type = internal/xbacklight
format = <label> <bar>
format-underline = ${colors.adapta-cyan}
format-padding = 1
label = 
bar-width = 8
bar-indicator = 
bar-indicator-foreground = ${colors.adapta-lightgreen}
bar-indicator-font = 0
bar-fill = ─
bar-fill-font = 2
bar-fill-foreground = ${colors.adapta-lightgreen}
bar-empty = ─
bar-empty-font = 2
bar-empty-foreground = ${colors.adapta-grey}
;format-margin = ${margin.for-modules}

音量調整(ALSA)

これも結構良い機能です。

音量を視覚的に知らせてくれます。大きすぎて危険な場合には黄色や赤色で目立たせます。特に色にこだわったポイントです。

ミュート 無音〜適切 適切〜大音量(警告) 大音量〜爆音 (Danger!)
volume_muted volume_normal volume_yellos volume_red

バックライトのシークバーと同じように、マウスホイールやタッチパッドでも音量を変更できます。

volume_slider

また、クリックすることでスピーカーのオン・オフを切り替えることができます。

volume-click

~/.config/polybar/config
[module/volume]
type = internal/alsa
format-volume = <label-volume> <bar-volume>
format-volume-underline = ${colors.adapta-cyan}
format-volume-padding = 1
label-volume = 墳
label-muted = 婢
label-muted-underline = ${colors.adapta-cyan}
label-muted-padding = 1
bar-volume-width = 8
bar-volume-foreground-0 = ${colors.adapta-lightgreen}
bar-volume-foreground-1 = ${colors.adapta-lightgreen}
bar-volume-foreground-2 = ${colors.adapta-lightgreen}
bar-volume-foreground-3 = ${colors.adapta-lightgreen}
bar-volume-foreground-4 = ${colors.adapta-lightgreen}
bar-volume-foreground-5 = ${colors.adapta-yellow}
bar-volume-foreground-6 = ${colors.adapta-yellow}
bar-volume-foreground-7 = ${colors.adapta-red}
bar-volume-gradient = false
bar-volume-indicator = 
bar-volume-indicator-foreground = ${colors.adapta-lightgreen}
bar-volume-indicator-font = 0
bar-volume-fill = ─
bar-volume-fill-font = 2
bar-volume-empty = ─
bar-volume-empty-font = 2
bar-volume-empty-foreground = ${colors.adapta-grey}
format-muted-margin = ${margin.for-modules}
format-volume-margin = ${margin.for-modules}

通信速度モニタ

送受信の量や速度がわかりやすくリアルタイムで表示されます。通信時の例は、YouTubeで動画を見ている時のものです。

非通信時 通信時 動作例
network-speed.png network-speed-using.png volume_red
~/.config/polybar/config
[module/wlan]
type = internal/network
interface = wlp2s0
interval = 0.1
format-connected = <label-connected>
;format-connected-background = ${colors.shade2}
format-connected-underline = ${colors.adapta-cyan}
format-connected-padding = 1
label-connected =  %upspeed:9%  %downspeed:9%
;label-connected =  %upspeed:9%  %downspeed:9%
format-disconnected = <label-disconnected>
format-disconnected-padding = 1
format-disconnected-underline = ${colors.adapta-cyan}
label-disconnected = 睊
;format-connected-margin = ${margin.for-modules}
;format-disconnected-margin = ${margin.for-modules}

各CPUコアの使用状況

以下のようなアニメーションで各CPUコアの使用状況が表示されます。

volume_red

オーディオ機器ののボリュームバーみたいで、見ていて楽しいです。キャプチャ時にはたくさん動いてもらうためにAndroid Studioを動かしてました。

~/.config/polybar/config
[module/cpu-value]
type = internal/cpu
interval = 0.1
format-prefix = " "
format-underline = ${colors.adapta-cyan}
format-margin = ${margin.for-modules}
format-padding = 1
label = %percentage:2%%

[module/cpu-graph]
type = internal/cpu
interval = 0.08
format = " <ramp-coreload>"
format-underline = ${colors.adapta-cyan}
format-margin = ${margin.for-modules}
format-padding = 1
ramp-coreload-0 = ▁
ramp-coreload-0-foreground = ${colors.adapta-cyan}
ramp-coreload-1 = ▂
ramp-coreload-1-foreground = ${colors.adapta-green}
ramp-coreload-2 = ▃
ramp-coreload-2-foreground = ${colors.adapta-lightgreen}
ramp-coreload-3 = ▄
ramp-coreload-3-foreground = ${colors.adapta-lightgreen}
ramp-coreload-4 = ▅
ramp-coreload-4-foreground = ${colors.adapta-yellow}
ramp-coreload-5 = ▆
ramp-coreload-5-foreground = ${colors.adapta-yellow}
ramp-coreload-6 = ▇
ramp-coreload-6-foreground = ${colors.adapta-red}
ramp-coreload-7 = █
ramp-coreload-7-foreground = ${colors.adapta-red}

モジュールが2つ(cpu-valueとcpu-graph)ありますが、cpu-valueはCPU使用率を数値で表示するシンプルなもので、cpu-graphが本項の初めに載せたアニメーションを表示するものです。

メモリ使用量モニタ

特筆すべきことはないです。メモリを模したゲジゲジ横の数字でメモリ使用量を示します。

memory

~/.config/polybar/config
[module/memory]
type = internal/memory
interval = 0.1
format-prefix = " "
format-underline = ${colors.adapta-cyan}
;format-margin = ${margin.for-modules}
format-padding = 1
label = %percentage_used:2%%

バッテリ残量・状態モニタ

これも結構良い機能で、気に入っています。

バッテリ残量が少なくなってくると、色が黄色→赤と変化し、警告してくれます。

充電中 十分 少なめ すごく少ない
battery_charing battery_normal battery_yellow battery_red

また、充電時には以下のようなアニメーションがあります。
battery_red
なんだかすごく速いですが、キャプチャがうまくいっていないだけで、実際はもっと遅いです。

~/.config/polybar/config
[module/battery]
type = internal/battery
full-at = 99
battery = CMB0
adapter = ADP1
format-charging = <animation-charging> <label-charging>
;format-charging-background = ${colors.shade2}
format-charging-underline = ${colors.adapta-cyan}
format-charging-padding = 1
label-charging = %percentage%%
format-discharging = <ramp-capacity> <label-discharging>
format-discharging-underline = ${colors.adapta-cyan}
format-discharging-padding = 1
label-discharging = %percentage:2%%
format-full = <label-full>
format-full-underline = ${colors.adapta-cyan}
format-full-padding = 1
format-charging-margin = ${margin.for-modules}
format-discharging-margin = ${margin.for-modules}
format-full-margin = ${margin.for-modules}
format-full-prefix = " "
ramp-capacity-0 = 
ramp-capacity-1 = 
ramp-capacity-2 = 
ramp-capacity-3 = 
ramp-capacity-4 = 
ramp-capacity-5 = 
ramp-capacity-6 = 
ramp-capacity-7 = 
ramp-capacity-8 = 
ramp-capacity-9 = 
ramp-capacity-0-foreground = ${colors.adapta-red}
ramp-capacity-1-foreground = ${colors.adapta-red}
ramp-capacity-2-foreground = ${colors.adapta-red}
ramp-capacity-3-foreground = ${colors.adapta-red}
ramp-capacity-4-foreground = ${colors.adapta-yellow}
ramp-capacity-5-foreground = ${colors.adapta-yellow}
ramp-capacity-foreground   = ${colors.fg}
animation-charging-0 = 
animation-charging-1 = 
animation-charging-2 = 
animation-charging-3 = 
animation-charging-4 = 
animation-charging-5 = 
animation-charging-6 = 
animation-charging-foreground = ${colors.fg}
animation-charging-framerate = 750

最後に

本家Adapta-Nokto様のダークかつクールな雰囲気をそのままに、結構良いテーマができたと思います。ぜひ使ってみてください。

matoruru/polybar-adapta-theme - GitHub

Twitterフォローしていただけると嬉しいです！
https://twitter.com/_matoruru

参考

27
17
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
27
17