sankalp/Modus
1
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

docs(styling): fix CSS paths to match actual directory structure

Browse Source
This commit is contained in:
sankalp committed 2026-07-18 19:29:17 +05:45
1 parent f4bfb52ba6
commit 0b2f5be80e
1 file changed
+6 -6
Download Patch File Download Diff File Expand all files Collapse all files
docs/styling.md
+6 -6
View File
@@ -6,18 +6,18 @@ Modus handles styling dynamically using **Matugen**. This allows the shell to au
1. When a new wallpaper is set (or the shell starts), Matugen generates a color palette.
2. Modus uses a Matugen template located at `config/matugen/templates/modus.css`.
3. Matugen processes the template and outputs the final stylesheet to `src/shared/styles/colors.css`.
3. Matugen processes the template and outputs the final stylesheet to `src/styles/colors.css`.
4. Modus automatically hot-reloads the new CSS, instantly applying the colors to the panel, dock, widgets, and menus.
## Customizing the Look
If you want to manually tweak borders, padding, font sizes, or add custom CSS classes, you should modify the files in `src/shared/styles/`.
If you want to manually tweak borders, padding, font sizes, or add custom CSS classes, you should modify the files in `src/styles/`.
### The CSS Hierarchy
- `src/shared/styles/main.css`: The primary entry point. It imports all other CSS components.
- `src/shared/styles/colors.css`: **DO NOT EDIT THIS MANUALLY.** This is automatically generated by Matugen. If you want to change how colors are generated, edit the template at `config/matugen/templates/modus.css`.
- `src/shared/styles/components/`: Contains isolated CSS for specific widgets (e.g. `dock.css`, `notification.css`, `panel.css`).
- `src/styles/main.css`: The primary entry point. It imports all other CSS components.
- `src/styles/colors.css`: **DO NOT EDIT THIS MANUALLY.** This is automatically generated by Matugen. If you want to change how colors are generated, edit the template at `config/matugen/templates/modus.css`.
- `src/styles/window/`, `src/styles/widgets/`, `src/styles/notification/`, `src/styles/controlpanel/`: Contain isolated CSS for specific widget categories.
> [!TIP]
> If you create a custom widget or add a new component, you can add a `.css` file inside the `components` directory and then `@import` it in `main.css`. Modus will apply it the next time it restarts!
> If you create a custom widget or add a new component, you can add a `.css` file inside the appropriate subdirectory and then `@import` it in `main.css`. Modus will apply it the next time it restarts!