How To Link Your CSS Styles With LGI (Lua + Gtk)

custom.css

/**
 * I add to the children of window (GtkWindow) that are buttons (GtkButton)
 * a blue color
 */
window button {
	color: #1E90FF;
}

/**
 * the labels that are inside the buttons and have the class red
 * will have a red color
 */
button.red label {
	color: #E32424;
}

ProviderCSS.lua

local lgi = require('lgi')
local Gtk = lgi.require('Gtk', '3.0')
local Gdk = lgi.require('Gdk', '3.0')
assert = lgi.assert -- With this function I will confirm if a file (in this case custom.css) exists.

--- I load my css
local provider = Gtk.CssProvider()

-- Show a message if custom.css does not exist
assert(provider:load_from_path('custom.css'), 'ERROR: file.css not found')

--- I add my CSS to the current window
local screen = Gdk.Display.get_default_screen(Gdk.Display:get_default())
local GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600
Gtk.StyleContext.add_provider_for_screen(
	screen, provider,
	GTK_STYLE_PROVIDER_PRIORITY_APPLICATION
)

local window = Gtk.Window {
	title = 'Linking CSS Styles',
	width = 200,
	height = 200,
	window_position = Gtk.WindowPosition.CENTER,
	{
		Gtk.Button {
			label = 'Example of the button with css',
			on_clicked = function (self)
				self:get_style_context():add_class('red')
			end
		}
	},
	on_destroy = function()
		Gtk.main_quit()
	end
}

window:show_all()
Gtk.main()

Tabien 👍