Since the widget toolkit is GTK3 theming is done with CSS.

• CSS tutorial
• GTK CSS Overview wiki
• GTK CSS Properties Overview wiki

:::caution[GTK is not the web] While most features are implemented in GTK, you can't assume anything that works on the web will work with GTK. Refer to the GTK docs to see what is available. :::

So far every widget you made used your default GTK3 theme. To make them more custom, you can apply stylesheets to them, which are either imported css files or inline css applied with the css property.

From file at startup

// config.js
App.config({
  // this style attribute takes a full path to a css file
  style: "/home/username/.config/ags/style.css",

  // or relative to config.js
  style: "./style.css",
});
Copy

Css Property on Widgets

Widget.Label({
  css: "color: blue; padding: 1em;",
  label: "hello",
});
Copy

Apply Stylesheets at Runtime

App.applyCss("/path/to/file.css");
Copy

App.applyCss(`
window {
    background-color: transparent;
}
`);
Copy

App.resetCss(); // reset if need
Copy

Inspector

If you are not sure about the widget hierarchy or any CSS selector, you can use the GTK inspector

# to bring up the inspector run
ags --inspector
Copy

Using pre-processors like SCSS

// config.js
// main scss file
const scss = `${App.configDir}/style.scss`;

// target css file
const css = `/tmp/my-style.css`;

// make sure sassc is installed on your system
Utils.exec(`sassc ${scss} ${css}`);

App.config({
  style: css,
  windows: [/* windows */],
});
Copy

Autoreload Css

Utils.monitorFile(
  // directory that contains the scss files
  `${App.configDir}/style`,
  // reload function
  function () {
    // main scss file
    const scss = `${App.configDir}/style.scss`;

    // target css file
    const css = `/tmp/my-style.css`;

    // compile, reset, apply
    Utils.exec(`sassc ${scss} ${css}`);
    App.resetCss();
    App.applyCss(css);
  },
);
Copy