Merge branch 'main' into feat/cava

2 files changed, 39 insertions, 11 deletions

diff --git a/docs/guide/ags/cli-app.md b/docs/guide/ags/cli-app.md
index ceed56a..ec6d174 100644
--- a/docs/guide/ags/cli-app.md
+++ b/docs/guide/ags/cli-app.md
@@ -95,6 +95,42 @@ ags -m "return 'hello';"
 # hello
 ```
 
+## Toggling Windows by their name
+
+In order for AGS to know about your windows, you have to register them.
+You can do this by specifying a **unique** `name` and calling `App.add_window`
+
+```tsx {4}
+import { App } from "astal"
+
+function Bar() {
+    return <window name="Bar" setup={self => App.add_window(self)}>
+        <box />
+    </window>
+}
+```
+
+You can also invoke `App.add_window` by simply passing the `App` to the `application` prop.
+
+```tsx {4}
+import { App } from "astal"
+
+function Bar() {
+    return <window name="Bar" application={App}>
+        <box />
+    </window>
+}
+```
+
+:::warning
+When assigning the `application` prop make sure `name` comes before.
+Props are set sequentially and if name is applied after application it won't work.
+:::
+
+```sh
+ags -t Bar
+```
+
 ## App without AGS
 
 As mentioned before AGS is only a scaffolding tool. You can setup
diff --git a/docs/guide/ags/theming.md b/docs/guide/ags/theming.md
index ea83e35..cb0ebff 100644
--- a/docs/guide/ags/theming.md
+++ b/docs/guide/ags/theming.md
@@ -99,26 +99,18 @@ workaround by using preprocessors like [SCSS](https://sass-lang.com/).
 
 :::code-group
 
-```sh [Arch]
+```sh [<i class="devicon-archlinux-plain"></i> Arch]
 sudo pacman -Syu dart-sass
 ```
 
-```sh [Fedora]
+```sh [<i class="devicon-fedora-plain"></i> Fedora]
 npm install -g sass # not packaged on Fedora
 ```
 
-```sh [Alpine]
-sudo apk add dart-sass
-```
-
-```sh [Ubuntu]
+```sh [<i class="devicon-ubuntu-plain"></i> Ubuntu]
 npm install -g sass # not packaged on Ubuntu
 ```
 
-```sh [openSUSE]
-sudo zypper install dart-sass
-```
-
 :::
 
 Importing `scss` files will simply return transpiled css.