MateのGTKテーマカスタマイズ方法/Vimix系テーマの修正

長く GNOME2環境でLinuxデスクトップを体験していた人にとって
昔ながらの操作感が扱えるMateデスクトップの存在は
大きな救いです。

が、内部的には従来の GTK2からGTK3 に移行して
テーマファイルなどでは実は GNOME3 に近いものに置き換わっています。
GNOME lookなどでテーマを探すときも
GTK3 の欄から探さないと正しく適用できません。

さらに問題なのが GTK 3.10 〜 3.22 のテーマファイルがしれっと
それぞれ互換性がないことで、現在は GTK 3.22 対応のテーマでないと
例えば Plumaのメニューなどが潰れてしまいます。

となると、意外とMateにそのまま適応できるテーマは限られてきます。
GTK2はGNOME-lookだけで(現在) 3756もある対して GTK3対応のものは 741
で内3.22対応のものはもっと少ないでしょう。

そしてようやく使えそうなテーマが見つかったと思ったら、
パネルの色が合わなくて文字が潰れてしまっていたりして
使えない場合があったりします。

そんなときは諦める前に既存テーマのカスタムで意外と対応できるので
やって見る価値はあります。

まずテーマが保存されているフォルダを確認して下さい。
通常は ~/.themes か /usr/share/themes にあります。

$ cd ~/.themes/(テーマ名)/gtk-3.0
$ pluma gtk.css

gtk3のテーマは基本的にCSSで記述してあります。

GTKテーマカスタマイズTips

MATEトップパネルの色を変更する

gtk.css にて

.mate-panel-menu-bar menubar menuitem {
 color: #FF0000;
}

.mate-panel-menu-bar menubar menu menuitem {
 color: #00FF00;
}

.mate-panel-menu-bar #PanelApplet button {
  -GtkWidget-window-dragging: true;
   color: #0000FF;
}

以上の変更を行うと

このように色が対応します。
下部パネルのタスクスイッチャはこの場合青色です。
これをコピペして色を書き換えるだけで
上下パネルを暗い色にしている人の何割かが救えます(笑

ツールチップのテキスト色変更

ボタンなどにマウスカーソルを合わせたとき、
簡単な説明などを表示してくれるツールチップですが
よく、文字色が白色で背景色が薄い黄色 などになっていて
全然読めなかったりします。

  tooltip label {
    text-decoration: none;
    text-shadow: none;
    color:#0000FF;
}

この2つの変更で大概のテーマは実用的になる気がします。

Vimix系のデザイン崩れ修正

Vimix は更新が続いているシンプルなテーマです。
いくつかの環境に導入していたのですが、最新の v2.8になってちょっと
デザインが崩れてしまうようです。
おなじテーマが Fedora24 Mateの環境では問題なく使えているので
Fedora25にだけ発生する不具合っぽいです。


2016 11/30
gtk3-3.22.4-1 でテーマ崩れの問題は解消されたようです。

このgtk3-widget-factory の左列が問題のデザイン崩れです。
Checkboxに謎のボーダーが描画されており、うるさい感じになっています。

こういう設定が並ぶところはかなり見にくく
その他 いくつかのデザインでMateでは都合が悪くなっています。

すべてを治していくのは大変ですが、
ひとまずこの謎ボーダー他、クリティカルなものの
修正を行いました。

1500〜1600行目のcheckboxの設定で
check,radio の部分に border-style:none; を書き加えて下さい。

check,
radio {
  min-height: 24px;
  min-width: 24px;
  margin: -12px;
  padding: 12px; 
  border-style: none;
}

これでOKです。
ひとまず なぞの枠は消えます。

同様の問題は
VimixDarkやVimix-Aurora で発生し、どのバージョンでも
これで一応治ります。

(以下はVimixDarkでの設定)
次に
800〜900行目 gtk3アプリのヘッダー部分文字色の設定で
最終行の colorを #FFFFFF → #333333 に変更

headerbar {
  transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
  min-height: 48px;
  padding: 0 6px;
  box-shadow: none;
  background-color: #444444;
  color: #333333; 
}

ここの background-color がなぜか効かないので
灰背景白文字になってしまっていました。

最後に
2600~2700行目
text-decoration shadow と color の設定を追加

  tooltip label {
    text-decoration: none;
    text-shadow: none;
    color:#333333;
    min-height: 20px;
    padding: 0 2px; 
}

ここも灰色背景に白文字になってしまっています。
本来は黒背景のようですが、これも効いていません。
テキスト文字色だけ変更すると影色とぶつかって
滲んだようになるので デコレーションも切ります。

以上の変更でひとまず実用可能になりました。

昔は XMLで描画手順を記述していたのですが
CSSになってアニメーションなどできることも増えた反面
ちょっと混んだデザインは読むのが大変で困ります。

コメントを追加する