I am using App shell with Main/Header/Footer subcomponents. I want to change the fill(?) color of the Main to pink (and maybe header and footer but mainly just wanting to see a solution that works first)
I have found a solution online that sets the entire Appshell to pink, however this is also changing the color of my Paper components
/* For light mode */
:root[data-mantine-color-scheme="light"] {
--mantine-color-body: var(--mantine-color-pink-1) !important;
}
/* For dark mode */
:root[data-mantine-color-scheme="dark"] {
--mantine-color-body: #282827 !important;
}
My question is, how can I change the fill/foreground color of my website to pink, but make my Paper components stay as the normal light/dark mode colors from Mantine?
Happy to provide more context if required!