# 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!