24 lines
1.4 KiB
Markdown
24 lines
1.4 KiB
Markdown
# Styling Guide
|
|
|
|
Modus handles styling dynamically using **Matugen**. This allows the shell to automatically match its color palette with your current wallpaper.
|
|
|
|
## How it works
|
|
|
|
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/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/styles/`.
|
|
|
|
### The CSS Hierarchy
|
|
|
|
- `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 appropriate subdirectory and then `@import` it in `main.css`. Modus will apply it the next time it restarts!
|