#Appshell/ Body styling with Paper components

4 messages · Page 1 of 1 (latest)

hybrid mango
#

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!

hybrid mango
bold storm