Moeppyぷろじぇくとカラー部会


JWM のテーマファイルについて


必要ファイル

/root/.jwm/theme フォルダ内の4つのファイルで構成されている。
(hogehoge は、各ファイル統一すること)
hogehoge-colors 部分的な色の設定を記述
hogehoge-jwmrc メインとなる色の設定を記述
hogehoge-tray.png テーマ変更時の見本用画像
hogehoge-window.ping 同上


hogehoge-colors の解説

#see /usr/local/jwmconfig2/theme-switcher script.
MENU_BG='#000000' 任意(影響ないらしい)
ACTIVE_BG='#51daff' 不明(瞬く背景用らしい?)
FOREGROUND='#000000' 任意(影響ないらしい)
PAGER_BG='#00b8d0' トレイ(パネル)右側のCPU使用状況のバック
FG_SELECTED='#000000' 任意(影響ないらしい)


hogehoge-jwmrc の設定

カラーコードが「:」で仕切られて2つ書いてあるのは上から下へグラデーションがかかっている。

<JWM>

<WindowStyle> ウインドウの枠の設定
<Font>Sans-12</Font>
<Width>3</Width> 枠の幅
<Height>22</Height> 不明
<Active> ここから使用中のウインドウの設定
<Text>#004048</Text> 文字色
<Title>#51daff:#00b8d0</Title> ウインドウ枠の色
<!-- <Corner>white</Corner> -->
<Outline>#00b8d0</Outline> ウインドウ枠の縁の色
</Active>
<Inactive> ここから使用していないウインドウの設定
<Text>#004048</Text> 文字色
<Title>#71faff:#51daff</Title> ウインドウ枠の色
<!-- <Corner>#aaaaaa</Corner> -->
<Outline>gray70</Outline> ウインドウ枠の縁の色
</Inactive>
</WindowStyle>

<TaskListStyle> 下部のトレイ(パネル)のタスクリストの設定
<Font>Sans-12</Font>
<ActiveForeground>#004048</ActiveForeground> 使用中のタスクの文字色
<ActiveBackground>#51daff:#00b8d0</ActiveBackground> 使用しているタスクの背景色
<Foreground>#004048</Foreground> 使用していないタスクの文字色
<Background>#71faff:#51daff</Background> 使用していないタスクの背景色
</TaskListStyle>

<TrayStyle> トレイの設定
<Font>Sans-12</Font>
<Background>#51daff</Background> 通常時(クリックしていない時)の地色
(新しめのバージョンではグラデーション可能 例<Background>#71faff:#51daff</Background>)
<Foreground>#004048</Foreground> 通常時の文字色(グラデーション不可)
<ActiveForeground>#004048</ActiveForeground> メニューボタンをクリックしたときの文字色
<ActiveBackground>#51daff:#00b8d0</ActiveBackground> メニューボタンをクリックしたときの地色
</TrayStyle>

<PagerStyle> ページャー(仮想デスクトップの表示)の設定
<Outline>#004048</Outline> ウインドウの縁の色
<Foreground>#71faff</Foreground> 使用していないウインドウ
<Background>#51daff</Background> 使用していない仮想デスクトップ
<ActiveForeground>#00b8d0</ActiveForeground> 使用中のウインドウ
<ActiveBackground>#51daff</ActiveBackground> 使用中のデスクトップ
</PagerStyle>

<PopupStyle> 下部のトレイ(パネル)のメニューやページャにカーソルを置いたときに出るポップアップメッセージの設定
<Font>Sans-12</Font>
<Outline>#51daff</Outline> 縁の色
<Foreground>#004048</Foreground> ポップの文字色
<Background>#71faff</Background> ポップの背景色
</PopupStyle>

<MenuStyle> ニューボタンを押したときやデスクトップで右クリックしたときに表示されるメニューの設定
<Font>Sans-12</Font>
<Foreground>#004048</Foreground> 通常時の文字色
<Background>#71faff</Background> 通常時の背景色
<ActiveForeground>#004048</ActiveForeground> 選択時の文字色
<ActiveBackground>#51daff:#00b8d0</ActiveBackground> 選択時の背景色
</MenuStyle>

</JWM>


JWM の色の設定テンプレート

次の5色を設定して、実際の見栄えで調整していく。
(A) 白抜き文字色(テーマカラーが極端に明るい場合は、(D)にする場合も)
(B) ベースになる色
(C) Bよりやや濃い色
(D) さらに濃い色
(E) 文字色


設定テンプレート

  • hogehoge-colors
#see /usr/local/jwmconfig2/theme-switcher script.
MENU_BG='#000000'
ACTIVE_BG='(C)'
FOREGROUND='#000000'
PAGER_BG='(D)'
FG_SELECTED='#000000'

  • hogehoge-jwmrc
基本的に"Active" がついている項目は選択時や有効時の設定。
"Foreground" は通常は文字の設定だが、"PagerStyle" の所だけは違う。
注:<JWM></JWM>で挟まれた間にコメントを書く場合は、<!-- -->で囲むこと。文頭に # をつけてもコメントアウトされません。
<JWM>

<WindowStyle>
<Font>Sans-12</Font>
<Width>3</Width>
<Height>22</Height>
<Active>
<Text>(A)</Text>
<Title>(C):(D)</Title>
<!-- <Corner>white</Corner> -->
<Outline>(D)</Outline>
</Active>
<Inactive>
<Text>(E)</Text>
<Title>(B):(C)</Title>
<!-- <Corner>#aaaaaa</Corner> -->
<Outline>gray70</Outline>
</Inactive>
</WindowStyle>

<TaskListStyle>
<Font>Sans-12</Font>
<ActiveForeground>(A)</ActiveForeground>
<ActiveBackground>(C):(D)</ActiveBackground>
<Foreground>(E)</Foreground> (または#ffffff(白)、#000000(黒))
<Background>(B):(C)</Background>
</TaskListStyle>

<TrayStyle>
<Font>Sans-12</Font>
<Background>(C)</Background>(新しいバージョンでは<Background>(A):(B)</Background>)
<Foreground>(E)</Foreground>
<ActiveForeground>(A)</ActiveForeground>
<ActiveBackground>(C):(D)</ActiveBackground>
</TrayStyle>

<PagerStyle>
<Outline><E)</Outline>
<Foreground>(B)</Foreground>
<Background>(C)</Background>
<ActiveForeground>(D)</ActiveForeground>
<ActiveBackground>(C)</ActiveBackground>
</PagerStyle>

<PopupStyle>
<Font>Sans-12</Font>
<Outline>(C)</Outline>
<Foreground>(E)</Foreground>
<Background>(B)</Background>
</PopupStyle>

<MenuStyle>
<Font>Sans-12</Font>
<Foreground>(E)</Foreground>
<Background>(B)</Background>
<ActiveForeground>(A)</ActiveForeground>
<ActiveBackground>(C):(D)</ActiveBackground>
</MenuStyle>

</JWM>



GTK テーマについて

ウインドウの内側のメニュー、ボタン、タブ等については、GTK で設定されている。
GTK テーマは、ウインド内部の背景色や文字の大きさを設定したり(gtkrc というテキストファイルによる)、ボタン類(画像ファイル)を設定したりするようです。

置き場所

/usr/share/themes 以下にテーマ名と同じ名前のフォルダを作成し、さらにその中に gtk-2.0 というフォルダを作成し、その中に必要なファイルを置く。

必要ファイル

  • "gtkrc" --テーマの設定を記述したテキストファイル
  • ボタン等の画像ファイル(PNG 形式のファイル)


gtkrc ファイルの色指定(暫定 Citrus-cut ベース)

(注意 やってみると意図してない結果になることもあり、調査中です。)

style "list-header" 関係

GtkTreeView::odd_row_color リストのストライブ模様の白じゃない方の色 ごく明るい色で(jwmrcの(B)相当)
GtkTreeView::even_row_color = "#ffffff" リストのストライプ模様の白の方、いじらない
fg[NORMAL] = "#000000" 文字色、一番濃い色(jwmrcの(E)相当)
text[NORMAL] = "#000000" 文字色、一番濃い色(jwmrcの(E)相当)


style "default" 関係

fg[NORMAL] 文字色、一番濃い色(jwmrcの(E)相当)
fg[PRELIGHT]  同上
fg[ACTIVE]   同上
fg]SELECTED]  一番明るい色(背景が濃いので) 明るさ度(A)または白(#FFFFFF)
fg[INSENSITIVE] 無効な文字色、グレー(#747474)

bg[NORMAL]  ウインドウの背景色、JWM設定マネージャ等の地色 明るさ(A)
bg[PRELIGHT] 何だかわからないがとりあえず白(#FFFFFF)で
bg[ACTIVE]   クリックできる面の色 背景に比べやや濃い目で 明るさ度(C)
bg[SELECTED]  選択されたアイテムの背景色 一番濃い 明るさ度(D)
bg[INSENSITIVE] クリックできないウィジットの背景色? 明るさ度(B)

base[NORMAL] 通常のウインドウ背景色、テキストボックス等の色 bg[NORMAL]と同じ色にすること
base[SELECTED] 選択されたリストの背景色 明るさ度(C)
base[ACTIVE] 有効になっているリストの背景色 base[SELECTED]と同じ色にすること
base[INSENSITIVE] クリックできないウィジットの背景? 明るさ度(B)

text[INSENSITIVE] コメントアウトしておく
text[ACTIVE] 選択時の文字色 背景が濃いので明るさ度(A)または白(#FFFFFF)
test[SELECTED] 同上
text[PRELIGHT] コメントアウトしておく

近辺の fg や text はともに文字色の設定なので基本はかなり濃い色にする。ただし、text[SELECTED] および text[ACTIVE] は、背景色が濃いので白抜きにする(テーマ色自体がかなり明るい場合は、視認性を考慮して、白抜きしないこともある。)。

style "notebook" 関係

function = BOX_GAP 関係の記述を削除する。
(次の例文参照)
style "notebook"
{
engine "pixmap" 
   {
   image 
     {
       function        = EXTENSION
   recolorable     = TRUE
   state        = ACTIVE
   file            = "notebook1.png"
   border          = { 6,6,6,6 }
   stretch         = TRUE
     }

  image 
     {
       function        = EXTENSION
   recolorable     = TRUE
   file            = "notebook2.png"
   border          = { 6,6,6,6 }
   stretch         = TRUE
     }
## 以下をコメントアウトするか削除する。
# image
# {
# function = BOX_GAP
# recolorable = TRUE
# file = "up.png"
# border = { 2,2,2,2 }
# stretch = TRUE
# gap_file = "blank.png"
# gap_border = { 0, 0, 0, 0 }
# gap_start_file = "blank.png"
# gap_start_border= { 0, 0, 0, 0 }
# gap_end_file = "blank.png"
# gap_end_border = { 0, 0, 0, 0 }
# }
}
} class "GtkNotebook" style "notebook"
#部分を削除することによって、jwm設定マネージャの背景を他の色に変えられる。

style "menu" 関係

Citrus-cut のままだとサブメニューの背景がグラデーション画像になり見づらいので、画像を表示しないようにする。

style "menu" = "default"
{
xthickness = 3
ythickness = 1
engine "pixmap"
 {
   image
   {
     function            = BOX
     recolorable            = TRUE
     detail                = "menu"
# file = "list_header.png"
shadow = IN
    border            = { 3, 3, 3, 3 }
     stretch            = TRUE
   }
 }
}

画像ファイルについて

GTKテーマの画像ファイルは、基本的には、色のついている画像のみ GIMP などで同程度色合いを変更し、適用後の見栄えを確認しながら微調整していく。

ボタン画像について

ボタンファイルは3つあるがそれぞれの役割は次のとおり
  • button1.png 通常時(非選択時)の状態
  • button2.png 選択時や押したときの状態(濃い目に)
  • button3.png 無効(使えない)状態(存在感薄く)


ブルーグリーンテーマの色について

TOYです。
あれやこれやさんのところのコメント見て参考までに。
moebuntuのブルーグリーンカラーは初音ミクの色を基本としていて、
↓こちらになります。この色味を元に濃さを調節しています。需要もあると思うので。
【追記】純水なブルーグリーンならターコイズがいいかも?
turquoise #40e0d0
【追記】ブルーグリーンの色ってRGBだとちょっとチカチカするかもしれないのでそんな場合は明度か彩度で調整したほうがいいかもしれません。

カラーテーマ修正しました

☆ tapaboy です。
Moeppy カラーテーマの見直しが一通り終わりました。

主にTOYさんから指摘のあった点を修正しました。
  • 「JWMの設定」の背景などにテーマの色が反映するようにした。
  • サブメニューの背景がグラデーションになるのを解消しました。
  • サブメニューの▲をテーマの色に合わせました。

ただし、一部のテーマはあいかわらずケバケバしいままです。
Moeppy-Wakakusa-Theme を Moeppy-LimeGreen-Theme に名称を変更しました。

(追記)
TOYさん、カラーチャートの掲載ありがとうございます。参考にさせていただきます。

(2014.3.1)

カラーテーマ更新しました(2014.3.15)

tapaboy です。
Moeppy-Themes に新たに Red を追加してアップしました(Moeppy-Themes-2-2-0.pet)

→ ふうせん Fu-sen. です。
ISO 版ですが、本日 daily build 2014/03/18 で Moeppy-Themes-2-2-0.pet を反映しました。

  • 最終更新:2014-05-04 21:24:20

このWIKIを編集するにはパスワード入力が必要です

認証パスワード