cssterminalgtk

How to import variables to gtk css file from another css file

I would like to import color variables from another css file to my gtk.css file, they are in the same directory.

So my colors.css is:

:root {
    --bg-color: #101e21;
    --colo1: #a0bcca;
    --colo2: #a0bc2a;
}

I tried to import this in my gtk.css with:

@import url("colors.css");

.termite {
    background-color: var(--bg-color);
}

Is it possible? If it is, what am I doing wrong?

Note that if I use an hexadecimal value for background-color my terminal displays the color normally.

Solution

  • Your file may be importing fine, but GTK 3 CSS doesn't support CSS variables.
    (CSS variables are relatively new)
    GTK CSS has its own syntax for defining color variables, which predates the CSS variable syntax: @define-color.

    [edit 2025] This has changed with GTK 4.