Cannot Access Colors in Globals.css in Mantine Components | Mantine | Page 1

#

html,
body,
:root {
height: 100%;
--color-background: #1c1f26;
--color-component: #16181d;
--color-primary: #1a73e8;
--color-secondary: #ff6f61;
--color-gray-500: #bbbbbb;
--color-gray-700: #444444;
}

hello! the above code is inside of a globals.css file to make sure that I have my websites color defined in one area. however im having a little bit of trouble accessing these classes in something like Appshell.Header. <AppShell.Header withBorder={false} style={{ backgroundColor: 'var(--color-background)' }}>
I tried doing something like the above in order to get the proper color from my globals.css file but it doesent work. Any div that I use is able to use these colors but im having a little trouble with the mantine way of doing things. Can anyone lead me to the right resources/directions to solve this issue? I know that mantine allows you to make custom themes however I would rather not define colors in two places and just have one file defining all the colors for me.

#

@import '@mantine/core/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

html,

:root {
height: 100%;
--color-background: #1c1f26;
--color-component: #16181d;
--color-primary: #1a73e8;
--color-secondary: #ff6f61;
--color-gray-500: #bbbbbb;
--color-gray-700: #444444;
}

body {
background-color: var(--color-background);
}

i have also changed having all bodies use this background color defined here but this doesent seem to work either

#

im sorry everyone i was just being a bit silly. the style background colors were too similair. my bad... just out of curiosity is there a better way to have all components use the same background color? I saw the globals.css section in mantine but through reading didint really understand which css variables you need to override in order to make all components use a certain color. any clarifications on this would be greatly appreciated!

#

For example I would like the website background instead of being gray to be a different color lets say purple for an example and then things like the header and then the sidebar that its a part of would be a different color

#

#Cannot Access Colors in Globals.css in Mantine Components