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
|
# Theming
Since the widget toolkit is **GTK** theming is done with **CSS**.
- [CSS tutorial](https://www.w3schools.com/css/)
- [GTK3 CSS Overview wiki](https://docs.gtk.org/gtk3/css-overview.html)
- [GTK3 CSS Properties Overview wiki](https://docs.gtk.org/gtk3/css-properties.html)
- [GTK4 CSS Overview wiki](https://docs.gtk.org/gtk4/css-overview.html)
- [GTK4 CSS Properties Overview wiki](https://docs.gtk.org/gtk4/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 to see what is available.
:::
So far every widget you made used your default GTK 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: inlineCss,
css: "./style.css",
css: "/path/to/style.css",
})
```
:::
:::warning
When using relative paths, for example `./style.css` keep in mind that they
will be relative to the current working directory.
:::
## 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
astal --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
```
:::
:::code-group
```ts [app.ts]
import { exec } from "astal/process"
exec("sass ./style.scss /tmp/style.css")
App.start({
css: "/tmp/style.css",
main() {},
})
```
:::
:::tip
You could also transpile scss into css using a bundler
and simply passing the path of the resulting css file to `css`.
:::
|
