Using a custom theme in v37

[Nurou]

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.

Setup

I'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.

[Nurou]

Found this in the Primitives doc:

Note: legacy variables in Primer React from the theme object all resolve to CSS variables under the hood. While the new naming convention is not available as a JS object, you can continue using the legacy variables in your React components or switch to using CSS variables directly (recommended).

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.

[joshblack]

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:

@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 😄

[Nurou]

This is clear, thanks @joshblack