-
Hi. $default: (
--primary: #ffda7c,
--secondary: #fe7375,
--success: #58dd4d,
--danger: #fe7375,
// contextual
--root-background: #fff,
--root-color: #000,
);
:root {
@each $var, $val in $default {
#{$var}: $val;
#{$var + '-rgb'}: hexToRGB($val); // tailwind requirements for opacity values
}
}
If I use external libs / tools with themeable settings, for example Tailwind, I've configure it like this const themeColorKeys = ["primary", "secondary", "success", "danger"]
// ...
colors: {
...colors, // keep support for default colors
...themeColorKeys.reduce((acc, curr) => {
return {
...acc,
[curr]: `rgba(var(--${curr}-rgb), <alpha-value>)`,
};
}, {}),
} With this kind of setup, it is possible to use third-party libs without any drawbacks. .bg-primary {
--tw-bg-opacity: 1 !important;
background-color: rgba(var(--primary-rgb), var(--tw-bg-opacity)) !important;
} As you can see, css variables is single source of truth, and I can make different themes just with some classNames that overrides :root variables, and use them on root html element, and on custom wrapper for some html area that needs other styles. It is possible to keep some workflow if I want to integrate Mantine in my app? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Mantine does not provide a way to override colors with CSS variables, this can only be done with theme object |
Beta Was this translation helpful? Give feedback.
Mantine does not provide a way to override colors with CSS variables, this can only be done with theme object