要約
ホームディレクトリの.config/gtk-3.0/gtk.csvに下記の記述をしてログインしなおせば、選択中の画面の閉じるボタンが外観設定で選んた強調色になります。~/.config/gtk-3.0/gtk.css
button.titlebutton.close:backdrop {
background-image: none;
}
button.titlebutton.close {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4166666667, to(@theme_selected_bg_color), to(transparent));
}
背景
Ubuntu22.04の標準の設定ではUbuntu20.04のように選択中の画面のボタンが色づきません。
選択中の画面がどれかわからず作業効率が落ちる場面があったので、設定方法を調べて色を付けました。
備忘録を兼ねて関連情報を記事に残します。
使ったもの
Ubuntu22.04が入っているPCUbuntuの外観設定
キーボードのWindowsボタンを押した後の画面で外観と入力すると設定画面を開けます。自分は黒いテーマで緑色を選びました。
Ubuntu22.04はGnome42を使っておりgtk3の設定変更で大体変わる
Ubuntu22.04はGnome42を使っているようです。Gnome42はいくつかのプログラムがgtk4を利用しているらしいですが、自分の試した範囲ではgtk3の設定変更がgtk4対応プログラム（例: gnome 計算機）でも読み込まれて表示が変わりました。
余談でも書きますが、自分が試した範囲ではsnap版firefox102だけ設定を読み込んでくれませんでした。
gtk3の表示変更は~/.config/gtk-3.0/gtk.cssの記述で、閉じるボタンの表示形式はbutton.titlebutton.closeで変更可能
Ubuntuの閉じるボタンの見た目の変更方法を調べたところ、下記のやりとりで~/.config/gtk-3.0/gtk.cssに適用したいデザイン設定を記述すれば良いと分かりました。[question] How to change window titlebar's buttons (minimise, maximise , close) appearance? #370
下記のように記述してアプリの再起動かログインしなおすと、閉じるボタンが赤くなります。
~/.config/gtk-3.0/gtk.css
button.titlebutton.close {
background-color: red;
}
動作確認はプログラムの再起動が便利
gtkのcssを書き換えただけでは画面のボタンの色は変わりません。cssはプログラム起動時に読み込まれるようなので、計算機など軽めのプログラムの再起動で動作確認するのが速くて便利だと思います。
killall gnome-calculator
gnome-calculator
Ubuntu – Reload Gtk+ 3.0 theme
設定可能なテーマの色の中でtheme_selected_bg_colorが強調色らしい
gtk3-24ではテーマの色としてこれらが定義されていました。- theme_fg_color
- theme_text_color
- theme_bg_color
- theme_base_color
- theme_selected_bg_color
- theme_selected_fg_color
- insensitive_bg_color
- insensitive_fg_color
- insensitive_base_color
- theme_unfocused_fg_color
- theme_unfocused_text_color
- theme_unfocused_bg_color
- theme_unfocused_base_color
- theme_unfocused_selected_bg_color
- theme_unfocused_selected_fg_color
- unfocused_insensitive_color
- borders
- unfocused_borders
- warning_color
- error_color
- success_color
それぞれ試したところtheme_selected_bg_colorが外観設定で選んだ強調色を示していました。
ということで、gtk.cssを下記の記述にしてプログラムを再起動すると閉じるボタンが強調色になります。
~/.config/gtk-3.0/gtk.css
button.titlebutton.close {
background-color: @theme_selected_bg_color;
}
Default gtk css color scheme
gtk gtk theme Adwaita _colors-public.scss
背面の画面は:backdropで指定可能
button.titlebutton.closeのcss変更で見た目を変えられましたが、それだけでは背面に表示された画面のボタンにも色が付いたままになり、どれが選択中の画面か区別をつけづらいです。
調べたところ:backdropで背面の要素のstyleを指定できると分かりました。
How to change the color of an active window title bar in GNOME?
ということで、下記の記述にすると最前面でないボタンの色付けを無効化できます。
:not(backdrop)は期待するように動かなかったので、:backdrop付きと無しでstyleを指定しています。
~/.config/gtk-3.0/gtk.css
button.titlebutton.close:backdrop {
background-color: transparent;
}
button.titlebutton.close {
background-color: @theme_selected_bg_color;
}
最前面の画面でない閉じるボタンを無色にできました。
既存の外観の記述はgresourceで確認可能
Ubuntuでは外観に関するファイルは/usr/share/themesに配置されており、gresourceで詳しくみれます。Editing Yaru Gtk theme: where is resource:///com/ubuntu/themes/Yaru/3.20/gtk.css?
詳しく見るというのがどういうことかといいますと、themesディレクトリにあるgtk.cssファイルは中身がテーマの参照先を指定する構造になっておりcatコマンドなどでは具体的な内容が分からないのですが、gresourceコマンドを使うと見れるということです。
catコマンドと実行結果
cat /usr/share/themes/Yaru-dark/gtk-3.0/gtk-dark.css
@import url("resource:///com/ubuntu/themes/Yaru-dark/3.0/gtk-dark.css");
gresourceファイルバイナリファイルになっているらしく、catで見ようとすると表示が乱れます。
cat /usr/share/themes/Yaru-dark/gtk-3.0/gtk-dark.css
catコマンドでは表示できないgresourceファイルは、gresourceコマンドなら見れます。
gresourceの要素一覧表示コマンドです。
gresource list /usr/share/themes/Yaru-dark/gtk-3.0/gtk.gresource
一覧に表示された要素を展開するにはextractを使います。
cssの展開は情報量が多いのでlessで繋げて見るのが良いと思います。
gresource extract /usr/share/themes/Yaru-dark/gtk-3.0/gtk.gresource /com/ubuntu/themes/Yaru-dark/3.0/gtk.css | less
微妙な大きさの丸い背景は-gtk-gradientを使えば作れる
gresourceコマンドで展開したcssを見たところ、閉じるボタンのstyleで-gtk-gradientが使われているのが分かりました。 headerbar button.titlebutton:not(.appmenu).maximize, headerbar button.titlebutton:not(.appmenu).minimize, headerbar button.titlebutton:not(.appmenu).close, .titlebar button.titlebutton:not(.appmenu).maximize, .titlebar button.titlebutton:not(.appmenu).minimize, .titlebar button.titlebutton:not(.appmenu).close, headerbar.selection-mode button.titlebutton:not(.appmenu).maximize, headerbar.selection-mode button.titlebutton:not(.appmenu).minimize, headerbar.selection-mode button.titlebutton:not(.appmenu).close, button.titlebutton:not(.appmenu).maximize, button.titlebutton:not(.appmenu).minimize, button.titlebutton:not(.appmenu).close {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4166666667, to(rgba(247, 247, 247, 0.1)), to(transparent)); }
-gtk-gradientを利用して強調色を割り当てると、要約で紹介したのと同じ、下記の記述になります。
~/.config/gtk-3.0/gtk.css
button.titlebutton.close:backdrop {
background-image: none;
}
button.titlebutton.close {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.4166666667, to(@theme_selected_bg_color), to(transparent));
}
これを適用すると、backgroundの指定では他のボタンより大きくなっていた閉じるボタンを他と同じ大きさで表示できました。
余談: 解決方法求む: snap版firefox(102)にはgtk3のcssが反映されない -> 105で解消
snap版のchromiumやslackの画面は期待通りに閉じるボタンの色が変わったのですが、snap版のfirefoxだけ色が変わりませんでした。
下記のコマンドで実行するとgtkのテーマが読み込めてないようなエラーが表示されるのは確認しました。
snap run firefox
Gtk-Message: 00:35:01.492: Failed to load module "canberra-gtk-module"
これを解消すべく関連しそうなプログラムをインストールしましたが、解決しませんでした。
sudo apt install -y packagekit-gtk3-module libcanberra-gtk-moduleGtk-Message: 16:17:51.771: Failed to load module "canberra-gtk-module"
stack overflowにも似たような問題の報告がありましたが、効果のある解決方法は提示されていませんでした。
How to resolve Ubuntu 22.04 Gtk-messages seen when Firefox installed as snap used in terminal
Ubuntu 22.04 LTS: Starting firefox through terminal Error "cannot change mount " & Failed to load module "canberra-gtk-module", How to solve it?
snapのfirefoxに関する問題議論ページがありましたが、自分の見た範囲では解決方法はまだ無さそうでした。
Known issues with Firefox Snap?
firefoxの開発元であるmozillaの不具合報告には該当しそうな不具合を見つけられなかったので問題提起しました。
~/.config/gtk-3.0/gtk.css is not loaded by snap version firefox on Ubuntu22.04
問題提起により関連処理が変更されたので、それが反映されれば直ると思います。
終わり
標準の設定ではどれが最前面の画面か分かりにくいgnome42の画面の閉じるボタンに色を付けれました。参考
Ubuntu 22.04 LTS – what’s new for the world’s most popular Linux desktop?Introducing GNOME 42
[question] How to change window titlebar's buttons (minimise, maximise , close) appearance? #370
Ubuntu – Reload Gtk+ 3.0 theme
Default gtk css color scheme
gtk gtk theme Adwaita _colors-public.scss
How to change the color of an active window title bar in GNOME?
Editing Yaru Gtk theme: where is resource:///com/ubuntu/themes/Yaru/3.20/gtk.css?
変更履歴
2022.09.28firefoxの不具合がバージョン105で解消したのを追記しました。
2022.09.29
OSを再起動したらfirefoxの不具合が再発したので、解決した記述を削除しました。
0 件のコメント :
コメントを投稿