-
I upgraded from v36 to v37, and my custom theme stopped working. For instance, if use a Primer Button with variant set to default, it uses Primer's default colors. I know this is related to the move to CSS custom properties. SetupI've imported the necessary CSS files like so @import '@primer/primitives/dist/css/primitives.css';
@import '@primer/primitives/dist/css/functional/themes/light.css';
@import '@primer/primitives/dist/css/functional/themes/dark.css';
// rest of global styles I extend the custom theme from Primer like so: import { theme, themeGet, useTheme } from '@primer/react';
const themeOverrides = {
colorSchemes: {
light: {
btn: {
primary: {
bg: < some_custom_color >
}
}
}
}
// rest of overrides
}
const customTheme = deepmerge(theme, themeOverrides);
// then in root
<ThemeProvider theme={customTheme} colorMode="light"> And the button still renders with the default --button-primary-bgColor-rest (green). Am I missing something here? Is there a way I can use the old theming logic? Thanks. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
Found this in the Primitives doc:
That might explain it. So the JS theme seems to be considered legacy now and while you can still use them, they don't get mapped to the generated CSS variables, which likely explains why Primer components are not referencing them. If the above holds true, it'd be great to make this more clear in the theming docs. The migration guide/release notes should/could mention this as well. |
Beta Was this translation helpful? Give feedback.
-
Hi there, @Nurou! 👋 You're totally right, this is related to the move to CSS Custom properties and away from I believe the intended way to do custom theming is to set the values for these custom properties on the @import '@primer/primitives/dist/css/primitives.css';
@import '@primer/primitives/dist/css/functional/themes/light.css';
@import '@primer/primitives/dist/css/functional/themes/dark.css';
:root {
--button-primary-bgColor-rest: /* ... */;
} I created an issue to improve the docs and examples around this in: #6123, just wanted to say thanks so much for opening this discussion! Appreciate it and let me know if you have any additional questions or concerns 😄 |
Beta Was this translation helpful? Give feedback.
Hi there, @Nurou! 👋 You're totally right, this is related to the move to CSS Custom properties and away from
sx
and styled-components.I believe the intended way to do custom theming is to set the values for these custom properties on the
:root
selector in CSS. This should be done after the imports to@primer/primitives
. For example:I created an issue to improve the docs and examples around this in: #6123, just wanted to say thanks so much for openin…