diff options
author | Aylur <[email protected]> | 2024-09-25 23:22:01 +0000 |
---|---|---|
committer | Aylur <[email protected]> | 2024-09-25 23:22:01 +0000 |
commit | 65654282a98cb0590d498e4ed9c924f97646f1dc (patch) | |
tree | 9150a8c5dca5429fafdd559db6e88f8bccb23d84 /docs/ags/theming.md | |
parent | fd8c3e81d8f7b235be123ce592f89e72f65a0f05 (diff) |
docs: restructure
Diffstat (limited to 'docs/ags/theming.md')
-rw-r--r-- | docs/ags/theming.md | 169 |
1 files changed, 0 insertions, 169 deletions
diff --git a/docs/ags/theming.md b/docs/ags/theming.md deleted file mode 100644 index ea83e35..0000000 --- a/docs/ags/theming.md +++ /dev/null @@ -1,169 +0,0 @@ -# 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 [Arch] -sudo pacman -Syu dart-sass -``` - -```sh [Fedora] -npm install -g sass # not packaged on Fedora -``` - -```sh [Alpine] -sudo apk add dart-sass -``` - -```sh [Ubuntu] -npm install -g sass # not packaged on Ubuntu -``` - -```sh [openSUSE] -sudo zypper install dart-sass -``` - -::: - -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. -::: |