如何使用 CSS 选择器将 CSS 应用到 GTK 应用程序元素

Question

我正在开发一个 C++ GTK 应用程序，并尝试使用 CSS 实现深色模式主题。我已经创建了一个包含必要样式的 style.css 文件，但我在将这些样式应用到特定 GTK 元素（例如 GtkTextView 和 GtkSidebar）时遇到问题。

我的 CSS 文件中定义的样式未按预期应用于 GTK 元素。我使用 ID 和类选择器来定位元素，但元素看起来没有变化（唯一受影响的是背景。）

主文件：

void load_css(void) {
    GtkCssProvider *provider;
    GdkDisplay *display;
    GdkScreen *screen;

    provider = gtk_css_provider_new();
    display = gdk_display_get_default();
    screen = gdk_display_get_default_screen(display);

    gtk_style_context_add_provider_for_screen(screen, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

    const gchar *css_file = "src/style.css";
    GError *error = 0;
    gtk_css_provider_load_from_file(provider, g_file_new_for_path(css_file), &error);

    if (error) {
        g_warning("%s", error->message);
        g_clear_error(&error);
    }

    g_object_unref(provider);
}

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);

    GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "yarncode");
    gtk_window_set_default_size(GTK_WINDOW(window), 600, 800);
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    GtkWidget *box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
    gtk_container_add(GTK_CONTAINER(window), box);

    GtkWidget *header = gtk_header_bar_new();
    gtk_box_pack_start(GTK_BOX(box), header, FALSE, FALSE, 0);

    GtkWidget *button = gtk_button_new_with_label("<<");
    gtk_header_bar_pack_start(GTK_HEADER_BAR(header), button);

    GtkWidget *content_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
    gtk_box_pack_start(GTK_BOX(box), content_box, TRUE, TRUE, 0);

    GtkWidget *paned = gtk_paned_new(GTK_ORIENTATION_HORIZONTAL);
    gtk_box_pack_start(GTK_BOX(content_box), paned, TRUE, TRUE, 0);

    text_view = gtk_source_view_new();
    gtk_widget_set_name(text_view, "text-view");
    gtk_source_view_set_show_line_numbers(GTK_SOURCE_VIEW(text_view), TRUE);
    gtk_source_view_set_highlight_current_line(GTK_SOURCE_VIEW(text_view), TRUE);

    GtkWidget *text_scrolled_window = gtk_scrolled_window_new(NULL, NULL);
    gtk_container_add(GTK_CONTAINER(text_scrolled_window), text_view);
    gtk_paned_add2(GTK_PANED(paned), text_scrolled_window);

    sidebar_window = gtk_scrolled_window_new(NULL, NULL);
    gtk_widget_set_name(sidebar_window, "sidebar-window");
    gtk_scrolled_window_set_min_content_width(GTK_SCROLLED_WINDOW(sidebar_window), 200);
    gtk_widget_set_size_request(sidebar_window, 200, -1);
    gtk_paned_add1(GTK_PANED(paned), sidebar_window);

    gtk_paned_set_position(GTK_PANED(paned), 200); 

    GtkTreeStore* store = gtk_tree_store_new(1, G_TYPE_STRING);
    GtkWidget* tree_view = gtk_tree_view_new_with_model(GTK_TREE_MODEL(store));
    gtk_container_add(GTK_CONTAINER(sidebar_window), tree_view);

    GtkTreeViewColumn* column = gtk_tree_view_column_new_with_attributes("Files", gtk_cell_renderer_text_new(), "text", 0, NULL);
    gtk_tree_view_append_column(GTK_TREE_VIEW(tree_view), column);

    GtkTreeIter root_iter;
    gtk_tree_store_append(store, &root_iter, NULL);
    gtk_tree_store_set(store, &root_iter, 0, ".", -1);
    populate_file_tree(store, &root_iter, ".");

    GtkTreePath* root_path = gtk_tree_path_new_from_string("0");
    gtk_tree_view_expand_row(GTK_TREE_VIEW(tree_view), root_path, FALSE);
    gtk_tree_path_free(root_path);

    GtkWidget *command_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
    gtk_box_pack_start(GTK_BOX(box), command_box, FALSE, FALSE, 0);

    output_label = gtk_label_new("");
    gtk_widget_set_name(output_label, "label");
    gtk_widget_set_opacity(output_label, 0.0);
    gtk_box_pack_start(GTK_BOX(command_box), output_label, FALSE, FALSE, 0);

    GtkWidget *entry = gtk_entry_new();
    gtk_box_pack_start(GTK_BOX(command_box), entry, FALSE, FALSE, 0);
    gtk_entry_set_placeholder_text(GTK_ENTRY(entry), "Enter command...");
    g_signal_connect(entry, "activate", G_CALLBACK(on_entry_activate), NULL);

    load_css();

    gtk_widget_show_all(window);

    g_signal_connect(button, "clicked", G_CALLBACK(toggle_sidebar), sidebar_window);
    g_signal_connect(entry, "key-press-event", G_CALLBACK(on_entry_key_press), NULL);

    gtk_main();

    return 0;
}

样式.css：

window {
    background-color: #ff0000;
}

#text-view {
    background-color: #ff0000;
}

#sidebar {
    background-color: #ff0000;
    color: #ffffff;
}

#output-label {
    background-color: #ff0000;
    color: #ffcc00; 
}

#entry {
    background-color: #ff0000;
    color: #ffffff;
}

#sidebar-tree-view {
    background-color: #333333;
    color: #ffffff;
}

#sidebar-tree-view row {
    background-color: #e40000;
    color: #ffffff;
}

不确定是否正确应用了 CSS，其中一些是不可见的。

Answer 1

这是一个常见的误解，GTK“ID”与CSS“ID”不对应。要通过 ID 使用 CSS 元素引用，您需要向 GTK 小部件添加“name”属性。出于 CSS 选择器的目的，此“名称”属性将被视为“ID”。