1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
# Theming
Since the widget toolkit is **GTK3** theming is done with **CSS**.
- [CSS tutorial](https://www.w3schools.com/css/)
- [GTK CSS Overview wiki](https://docs.gtk.org/gtk3/css-overview.html)
- [GTK CSS Properties Overview wiki](https://docs.gtk.org/gtk3/css-properties.html)
:::warning 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](https://docs.gtk.org/gtk3/css-overview.html)
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.
## From file at startup
You can pass a path to a file or css as a string in `App.start`
:::code-group
```ts [app.ts]
const inlineCss = `
window {
background-color: transparent;
}
`
App.start({
css: "./style.css",
css: `${SRC}/style.css'`,
css: inlineCss,
})
```
:::
:::info
The global `SRC` will point to the directory `app.ts` is in.
AGS will set the current working directory to `--config`, so `./style.css` also works.
:::
## Css Property on Widgets
```ts
Widget.Label({
css: "color: blue; padding: 1em;",
label: "hello",
})
```
:::info
The `css` property of a widget will not cascade to its children.
:::
## Apply Stylesheets at Runtime
You can apply additional styles at runtime.
```ts
App.apply_css("/path/to/file.css")
```
```ts
App.apply_css(`
window {
background-color: transparent;
}
`)
```
```ts
App.reset_css() // reset if need
```
:::warning
`App.apply_css` will apply on top of other stylesheets applied before.
You can reset stylesheets with `App.resetCss`
:::
## Inspector
If you are not sure about the widget hierarchy or any CSS selector,
you can use the [GTK inspector](https://wiki.gnome.org/Projects/GTK/Inspector)
```sh
# to bring up the inspector run
ags --inspector
```
## Using SCSS
Gtk's CSS only supports a subset of what the web offers.
Most notably nested selectors are unsupported by Gtk, but this can be
workaround by using preprocessors like [SCSS](https://sass-lang.com/).
:::code-group
```sh [<i class="devicon-archlinux-plain"></i> Arch]
sudo pacman -Syu dart-sass
```
```sh [<i class="devicon-fedora-plain"></i> Fedora]
npm install -g sass # not packaged on Fedora
```
```sh [<i class="devicon-ubuntu-plain"></i> Ubuntu]
npm install -g sass # not packaged on Ubuntu
```
:::
Importing `scss` files will simply return transpiled css.
:::code-group
```ts [app.ts]
import style from "./style.scss"
App.start({
css: style,
main() {},
})
```
:::
:::tip
If you for example want to set scss varibles from JS,
You can inline import, compose, and transpile yourself.
```ts [app.ts]
import style1 from "inline:./style1.scss"
import style2 from "inline:./style2.scss"
const tmpscss = "/tmp/style.scss"
const target = "/tmp/style.css"
writeFile(tmpscss, `
$var1: red;
$var1: blue;
${style1}
${style1}
`)
exec(`sass ${tmpscss} ${target}`)
App.start({
css: target,
})
```
:::
:::info
If you want other preprocessors support builtin open an Issue.
:::
|
