Modus/docs/styling.md

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/shared/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/.

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).

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!