Search code examples
pythonbuttongtk3gnomegnome-3

Gtk3/Gnome 3 colored button: apply ".needs-attention" css styles

Preface

In gnome 3 applications some buttons are highlighted by having a tinted background instead of that greyish color of a normal button. These buttons aren't only colored differently when using the standard Adwaita Theme, but are also implemented in a variety of other themes. Below are examples of a normal button and a colored one respectively for the Adwaita and the Flat Plat Theme.

Adwaita

Adwaita normal Adwaita needs-attention

Flat Plat

Flat Plat normalFlat Plat needs-attention

Now to my problem

I would like to be able to also implement these "important buttons" in my Gtk3 applications. During research on how to do that I discovered in the theme files that these "important buttons" have a special CSS class called needs-attention. I then tried to set the CSS class of my button to needs-attention as well. However that didn't work. I'm still getting a grey standard button. To demonstrate what I did I'm appending a minimal script and a screenshot of the running program. The "Rename" button should be highlighted just like in the screenshot above. How do I do that?

My Code

Screenshot of script

#!/usr/bin/env python3

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk

class ButtonWindow(Gtk.Window):

    def __init__(self):
        Gtk.Window.__init__(self, title="Needs Attention Button")
        self.set_border_width(10)

        hbox = Gtk.Box(spacing=6)
        self.add(hbox)

        button = Gtk.Button.new_with_label("Remove")
        hbox.pack_start(button, True, True, 0)

        button = Gtk.Button.new_with_mnemonic("Rename")
        button.get_style_context().add_class("needs-attention")
        hbox.pack_start(button, True, True, 0)

win = ButtonWindow()
win.connect("delete-event", Gtk.main_quit)
win.show_all()
Gtk.main()
Solution

  • GNOME's Adwaita theme has predefined two classes for suggested actions:

    • suggested-action
    • destructive-action

    You can read it on GNOME Wiki HowDoI/Buttons:

    While most buttons are gray, it has become more fashionable to emphasize buttons that are the suggested action, by giving them a different color. In the Adwaita theme, the color is blue. ... Recently, another style class for dangerous actions has been added as well: 'destructive-action'. The Adwaita theme uses red for buttons marked as such.

    On Adwaita they look like this, respectively:

    • enter image description here
    • enter image description here

    The predefined needs-attention class, it's a Gtk.Stack/GtkStack child property and it's rendered in a Gtk.StackSwitcher to call for users attention, as described in the GtkStack API Reference:

    The “needs-attention” child property

    “needs-attention”          gboolean

    Sets a flag specifying whether the child requires the user attention. This is used by the GtkStackSwitcher to change the appearance of the corresponding button when a page needs attention and it is not the current one.

    The resulting visual aid can be seen in gtk3-widget-factory program, as a blue dot on the child needing attention (assuming Adwaita theme):

    enter image description here