merge pull request #2 from uncenter/pr-c330cebe

refactor: move themes to `themes/` and improve usage docs

README.md

@@ -12,44 +12,37 @@
 </p>
 
 <p align="center">
-	<img src="/assets/collections.webp"/>
+	<img src="assets/collections.webp"/>
 </p>
 
 ## Previews
 
 <details>
 <summary>🌻 Latte</summary>
-<img src="/assets/lattebar.webp"/>
+<img src="assets/lattebar.webp"/>
 </details>
 <details>
 <summary>🪴 Frappé</summary>
-<img src="/assets/frappebar.webp"/>
+<img src="assets/frappebar.webp"/>
 </details>
 <details>
 <summary>🌺 Macchiato</summary>
-<img src="/assets/macchiatobar.webp"/>
+<img src="assets/macchiatobar.webp"/>
 </details>
 <details>
 <summary>🌿 Mocha</summary>
-<img src="/assets/mochabar.webp"/>
+<img src="assets/mochabar.webp"/>
 </details>
 
 ## Usage
 
-Here is an example
+1. Copy the contents of your flavor of choice from [`themes/`](./themes/) to your [GlazeWM configuration file](https://github.com/glzr-io/glazewm#configuration), located at `C:\Users\<YOUR_USER>\.glaze-wm\config.yaml`.
+2. Then use the Catppuccin color variables in your configuration with `*<color>` (e.g. `*crust` or `*mauve`).
 
-1. copy `mocha.yaml` to `C:\Users\yourusername\.glaze-wm\config.yaml`
-2. replace hex color code in `bar:` with variables
+> [!TIP]
+> See [our example configuration](example.yaml) for more details on how this works!
 
-```
-background: *crust
-foreground: *mauve
-```
-3. save `config.yaml` and reload GlazeWM `shift+alt+r`
-
-[See example config.yaml](example-config.yaml)
-
-<!-- this section is optional -->
+3. Save your configuration file and reload GlazeWM with <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>r</kbd>.
 
 ## 🙋 FAQ
 

templates/example.tera

@@ -4,7 +4,7 @@ whiskers:
   filename: "example.yaml"
 ---
 # mocha.yaml
-{{ read_file(path="../mocha.yaml") }}
+{{ read_file(path="../themes/mocha.yaml") }}
 bar:
   height: "30px"
   position: "top"

templates/glazewm.tera

@@ -3,7 +3,7 @@ whiskers:
   version: "2.3.0"
   matrix:
     - flavor
-  filename: "{{ flavor.identifier }}.yaml"
+  filename: "themes/{{ flavor.identifier }}.yaml"
 ---
 
 {%- for _, color in flavor.colors %}