Theming

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

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

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',
})

Css Property on Widgets

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

Apply Stylesheets at Runtime

App.applyCss('/path/to/file.css')

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

App.resetCss() // reset if need

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

Using pre-processors like SCSS

// 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 */ ],
})

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)
    },
)