Styling
Homarr uses Mantine and supports custom CSS at two scopes:
- Global: Management → Settings → Instance branding → Custom CSS.
- Board: Board settings → Custom CSS. Board CSS loads after the global stylesheet and can override it.
Both editors accept direct CSS and Workshop imports.
Custom CSS can break after updates and is not an authorization boundary. Hidden controls remain accessible to users who have permission to use them.
Target elements
Use browser developer tools to inspect the element and test a selector. Prefer stable semantic or Mantine class names;
avoid generated classes such as mantine-Card-x2fske, which change between builds.
To target one widget, add a custom class under Edit item → Advanced options and use that class in the board CSS.
Use !important only when the existing cascade requires it.
Theme variables
Mantine exposes CSS variables that can be overridden globally or per board:
:root {
--mantine-primary-color-filled: #ffbb00;
}CSS changes presentation only; use widgets, integrations, permissions, or application code for behavior.