Skip to content

Instantly share code, notes, and snippets.

Created February 9, 2015 11:21
What would you like to do?
Small & colorful indicator label for Gtk
/* Support for colored labels.
* These are sometimes handy in order to highlight errors
* or mark some entries with "xx new items".
#AppIndicatorLabelTheme {
/* Animate changes so the label color gets faded in */
transition-property: color, border-color, background-color;
transition: 250ms ease-in-out;
/* More readable on colored background */
text-shadow: None;
color: @theme_selected_fg_color;
/* Make the shape round and give it enough space */
border-radius: 4px;
padding: 1px 6px;
/* Add a small border around the label */
border-style: outset;
border-width: 2px;
/* This will look pretty much like a normal label.
* Just include a fix for doing the blending right.
#AppIndicatiorLabelEmpty {
border-color: alpha(white, 0);
/* That's probably a dumb way to find the colors.
* We inherit the theme colors and try to modify them
* so they fit our needs. A hue-changing functions would be nice.
* See here for reference on the used theme colors:
@define-color indicator_label_error
alpha(mix(@error_color, @theme_selected_fg_color, 0.3), 0.9);
@define-color indicator_label_success
alpha(mix(shade(@success_color, 0.85), @theme_selected_fg_color, 0.3), 0.9);
@define-color indicator_label_warning
alpha(mix(@warning_color, @theme_selected_fg_color, 0.3), 0.9);
@define-color indicator_label_theme
mix(@theme_selected_bg_color, @theme_selected_fg_color, 0.3);
#AppIndicatorLabelError {
background-color: @indicator_label_error;
border-color: alpha(mix(@indicator_label_error, @theme_selected_fg_color, 0.66), 0.5);
#AppIndicatorLabelSuccess {
background-color: @indicator_label_success;
border-color: alpha(mix(@indicator_label_success, @theme_selected_fg_color, 0.66), 0.5);
#AppIndicatorLabelWarning {
background-color: @indicator_label_warning;
border-color: alpha(mix(@indicator_label_warning, @theme_selected_fg_color, 0.66), 0.5);
#AppIndicatorLabelTheme {
background-color: @indicator_label_theme;
border-color: alpha(mix(@indicator_label_theme, @theme_selected_fg_color, 0.66), 0.5);
class IndicatorLabel(Gtk.Label):
"""A label that has a rounded, colored background.
It is mainly useful for showing new entries or indicate errors.
There are 3 colors available, plus a color derived from the
theme's main color. In case of Adwaita blue.
def __init__(self, *args):
Gtk.Label.__init__(self, *args)
# Do not expand space.
# Use the theme's color by default.
def set_color(self, state):
classes = {
IndicatorLabel.ERROR: 'AppIndicatorLabelError',
IndicatorLabel.SUCCESS: 'AppIndicatorLabelSuccess',
IndicatorLabel.WARNING: 'AppIndicatorLabelWarning',
IndicatorLabel.THEME: 'AppIndicatorLabelTheme'
# Will act as normal label for invalid states.
# Useful for highlighting problematic input.
self.set_name(classes.get(state, 'AppIndicatorLabelEmpty'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment