GTK+3でCSSを適用する

せしまるです。

GTKのボタンを角丸にしたい、ボックスに枠をつけたいなど、見た目を変更したいときはCSSを使います。
CSSの書き方はWeb開発の時とあまり変わりません。

以下にCSSとコードからCSSを読み込む処理を記載します。

test.css

// 特定のウィジェットに適用するとき.
GtkLabel{
    color:red;
}

// 特定のウィジェットの特定の状態の時
// 今回はトグルボタンが押されている時
GtkToggleButton:checked{
    background-image:none;
    background-color:red;
}

// ウィジェットにクラスを指定した場合は、クラス名で指定できる.
.button_a{
    color:white;
}

.button_b{
    border:2px solid #000000;
    border-radius:10px;
    font-size:15px;
}

reader.cpp

void LoadCss(){
    // CSS読み込む際に必要です.
    GtkCssProvider* provider = gtk_css_provider_new();
    GError* error;

    // CSSファイルの読み込み.
    gtk_css_provider_load_from_path(provider, ここにファイルパスを記述, &error);

    if( error != NULL ){
        // 読み込み失敗.
        return;
    }

    // 読み込んだCSSの適用
    gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_USER);
}

このCSSを適用した場合、見た目は以下のようになります（ボタンだけ）
左が「.button_a」右が「.button_b」を適用しています。

このような感じでウィジェットの見た目を変更することができます（白にするんじゃなかった）。