38 lines
1.2 KiB
Plaintext
38 lines
1.2 KiB
Plaintext
# 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.
|
|
|
|
:::warning
|
|
|
|
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](https://mantine.dev/styles/css-variables-list/) that can be overridden globally or per
|
|
board:
|
|
|
|
```css
|
|
:root {
|
|
--mantine-primary-color-filled: #ffbb00;
|
|
}
|
|
```
|
|
|
|
CSS changes presentation only; use widgets, integrations, permissions, or application code for behavior.
|