blob: 2c28ffbc1147e12af432a55dbe99527a80600da7 (
plain)
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
|
---
title: Theming
description: GTK3 CSS theming
sidebar:
order: 1
---
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: "/home/username/.config/ags/style.css",
css: `${SRC}/style.css'`,
css: inlineCss,
})
```
:::
:::info
The global `SRC` will point to the directory `app.ts` is in.
You can pass a relative path, but its resolution 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
ags --inspector
```
## Using pre-processors like SCSS
:::code-group
```ts [app.ts]
// main scss file
const scss = `${SRC}/style.scss`
// target css file
const css = `/tmp/my-style.css`
// make sure sassc is installed on your system
exec(`sassc ${scss} ${css}`)
App.config({
css,
main() {},
})
```
:::
|
