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

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;
}

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

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になってアニメーションなどできることも増えた反面 ちょっと混んだデザインは読むのが大変で困ります。