summaryrefslogtreecommitdiff
path: root/docs/ags/theming.md
diff options
context:
space:
mode:
authorAylur <[email protected]>2024-09-25 23:22:01 +0000
committerAylur <[email protected]>2024-09-25 23:22:01 +0000
commit65654282a98cb0590d498e4ed9c924f97646f1dc (patch)
tree9150a8c5dca5429fafdd559db6e88f8bccb23d84 /docs/ags/theming.md
parentfd8c3e81d8f7b235be123ce592f89e72f65a0f05 (diff)
docs: restructure
Diffstat (limited to 'docs/ags/theming.md')
-rw-r--r--docs/ags/theming.md169
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.
-:::