Right way to set GTK3 widget colours to a computed value - haskell

Question

In my user interface (coded in Haskell) I want to set some widget background and foreground colours to values computed by the application (as opposed to a theme colour). I initially used widgetOverrideBackgroundColor and widgetOverrideColor for this, despite the fact that they are deprecated. However these have recently stopped working (fair enough, they are deprecated).
What is the easiest way to get the functionality of widgetOverrideColor and its relatives? Is there a way of programmatically generating a style provider for a single widget and setting the colours there (the widgets are also generated dynamically)? Or is the solution to intercept the draw callback? If so, how can I set the colours and then hand back control to the original?

Answer 1

I've now managed to do this using a combination of CSS and intercepted draw signals. The code is in Haskell as its what I'm writing in, but it should be translatable to other languages.
The basic technique is to add some extra Cairo code to the draw callback to paint a different background, and then use CSS to set make the widget itself transparent. This code uses the gi-gtk library for GTK3, the cairo library for drawing, and the colour library for colours. This has been extracted and slightly simplified from a larger program. I hope I haven't left anything dangling.
import qualified GI.Cairo.Structs.Context as Gtk
import qualified GI.Gtk as Gtk
import qualified Graphics.Rendering.Cairo as Cairo
import qualified Graphics.Rendering.Cairo.Internal as CI
import qualified Graphics.Rendering.Cairo.Types as Cairo (Cairo (Cairo))
import qualified Data.Colour as C
import qualified Data.Colour.CIE as C
import qualified Data.Colour.SRGB as C
customPaint :: (Gtk.isWidget w) => w -> Maybe Colour -> Gtk.Context -> IO ()
customPaint widget Nothing _ = do
-- No background, so reset everything.
style <- Gtk.widgetGetStyleContext widget
mapM_ (Gtk.styleContextRemoveClass style) [lightClass, darkClass]
customPaint widget (Just c) ctx = do
-- Get the dimensions of the background.
w <- Gtk.widgetGetAllocatedWidth widget
h <- Gtk.widgetGetAllocatedHeight widget
-- Set the widget style to transparent using a class.
style <- Gtk.widgetGetStyleContext widget
mapM_ (Gtk.styleContextRemoveClass style) [lightClass, darkClass]
Gtk.styleContextAddClass style $ if C.luminance c > 0.5 then lightClass else darkClass
-- Draw the background using the Cairo Render monad.
runRender ctx $ do
let
C.RGB r1 g1 b1 = C.toSRGB c
Cairo.setSourceRGB r1 g1 b1
Cairo.rectangle 0 0 (fromIntegral w) (fromIntegral h)
Cairo.fill
-- Conversion between gi-gtk Cairo Context and Cario library Render monad. Only
-- needed because they have different ways of wrapping the underlying C object.
runRender ctx action =
Gtk.withManagedPtr ctx $ \p ->
runReaderT (CI.runRender action) (Cairo.Cairo (castPtr p))
-- CSS class names. "light" uses black text on a pale background. "dark" is the opposite.
lightClass = "transparent-light"
darkClass = "transparent-dark"
Then you can store the colour you want in an IORef and create a callback for the widget drawing signal like this:
Gtk.onWidgetDraw myWidget $ \ctx -> do
c <- readIORef colourRef
customPaint myWidget c ctx
The CSS for the application contains the following:
/* Custom CSS classes for coloured widgets.
The background is transparent. The foreground is either black or white.
*/
.hades-transparent-dark {
color: white;
background-color: transparent; }
.hades-transparent-light {
color: black;
background-color: transparent; }
Luckily I only need to set the background colour, with the foreground colour being either black or white for contrast with the background. I don't know how I would go about setting an arbitrary foreground colour.

Answer 2

The GTK documentation recommends using CSS:
gtk_widget_override_background_color has been deprecated since version 3.16 and should not be used in newly-written code.
This function is not useful in the context of CSS-based rendering. If you wish to change the way a widget renders its background you should use a custom CSS style, through an application-specific GtkStyleProvider and a CSS style class. You can also override the default drawing of a widget through the “draw” signal, and use Cairo to draw a specific color, regardless of the CSS style.
For reference, in my own GTK3 application I used the following code to load custom CSS:
{-# LANGUAGE OverloadedStrings #-}
import GI.Gtk
main = do
-- stuff
prov <- cssProviderNew
cssProviderLoadFromPath prov "path/to/custom/css/file.css"
screenGetDefault >>= \case
Just screen -> styleContextAddProviderForScreen screen prov 800
Nothing -> return ()
For the CSS file itself, you can refer to widgets by their names. The following CSS is untested, but should work:
#widgetname1 {
color: red;
background-color: green;
}
I don’t know if there is a way of doing this purely programatically, without any external CSS files (i.e. specifying the CSS inline); if I find a method I will update this answer.