Use a custom renderer for the color

Use a custom cell renderer for rendering the color column, so  that
the color still remains visible when the row is selected.

gtk3-theme-prefs.py

@@ -30,7 +30,8 @@
 #
 
 
-from gi.repository import Gtk, Gdk, Gio
+import math
+from gi.repository import Gtk, Gdk, Gio, GObject
 
 
 class RGBA(Gdk.RGBA):
@@ -57,6 +58,58 @@ class RGBA(Gdk.RGBA):
                                       self.blue * 0xff)
 
 
+class CellRendererColor(Gtk.CellRenderer):
+    __gproperties__ = {
+        'color': (GObject.TYPE_STRING, 'color', 'displayed color', '',
+                  GObject.PARAM_READWRITE)
+    }
+    _property_names = __gproperties__.keys()
+
+    color = '#000000'
+
+    def do_set_property(self, prop, value):
+        if prop.name not in self._property_names:
+            raise AttributeError('No property %s in %s' % (prop.name, self))
+        self.__dict__[prop.name] = value
+
+    def do_get_property(self, prop):
+        if prop.name not in self._property_names:
+            raise AttributeError('No property %s in %s' % (prop.name, self))
+        return self.__dict__[prop.name]
+
+    def do_get_preferred_width(self, width):
+        xpad = self.get_padding()[0]
+        return xpad * 2 + 16, xpad * 2 + 32
+
+    def do_get_preferred_height(self, width):
+        ypad = self.get_padding()[1]
+        return ypad * 2 + 16, ypad * 2 + 24
+
+    def _rounded_rectangle(self, cr, x, y, w, h, r):
+        cr.move_to(x + r, y)
+        cr.arc(x + w - r, y + r, r, -math.pi/2.0, 0)
+        cr.arc(x + w - r, y + h - r, r, 0, math.pi/2.0)
+        cr.arc(x + r, y + h - r, r, math.pi/2.0, -math.pi)
+        cr.arc(x + r, y + r, r, -math.pi, -math.pi/2.0)
+        cr.close_path()
+
+    def do_render(self, cr, widget, background_area, cell_area, flags):
+        xpad, ypad = self.get_padding()
+        r = min(cell_area.width/4, cell_area.height/4)
+        x, y = cell_area.x + xpad, cell_area.y + ypad
+        w, h = cell_area.width - xpad * 2, cell_area.height - ypad * 2
+
+        # background
+        Gdk.cairo_set_source_rgba(cr, RGBA(self.color))
+        self._rounded_rectangle(cr, x, y, w, h, r)
+        cr.fill()
+        # border
+        cr.set_line_width(1)
+        cr.set_source_rgba(0, 0, 0, 0.3)
+        self._rounded_rectangle(cr, x+0.5, y+0.5, w-1, h-1, r)
+        cr.stroke()
+
+
 class AppWindow(Gtk.Window):
     ROW_KEY = 0
     ROW_COLOR = 1
@@ -88,6 +141,11 @@ class AppWindow(Gtk.Window):
         self.view = builder.get_object('treeview1')
         self.view.connect('row-activated', self.on_row_activated)
 
+        column = builder.get_object('treeviewcolumn2')
+        renderer = CellRendererColor()
+        column.pack_start(renderer, True)
+        column.add_attribute(renderer, 'color', self.ROW_COLOR)
+
         def on_key_cell_edited(cell, path, text, data=None):
             self.store.set(self.store.get_iter(path), self.ROW_KEY, text)
         cell = builder.get_object('cellrenderertext1')

window.ui

@@ -111,12 +111,6 @@
                 <child>
                   <object class="GtkTreeViewColumn" id="treeviewcolumn2">
                     <property name="title" translatable="yes">Color</property>
-                    <child>
-                      <object class="GtkCellRendererText" id="cellrenderertext2"/>
-                      <attributes>
-                        <attribute name="cell-background">1</attribute>
-                      </attributes>
-                    </child>
                   </object>
                 </child>
               </object>