[Docs Request] Custom Themes with SCSS

[Vac1911]

Is your feature request related to a problem? Please describe. I was wondering if it was possible for users to make their own themes and/or could that be a thing? Like there is the 'Dark Dimmed' them, what if someone wanted to make a 'Solarized Dark' theme or even a 'Light Yellow' to match their branding (or they are a nut)?

Describe the solution you'd like A simple mixin line:

@add-theme(solarized_dark) {
    ...
}

Describe alternatives you've considered I couldn't find any mention of this in the docs, so as a temporary workaround I've copied _dark_dimmed.scss into a new file, changed some color variables and included that into my app.scss but that doesn't seem like a good solution as it always overwrites the theme and there is a lot of redundant css in the output.

Additional context This may already exist, and I'm just not smart enough to find it in the source code. If that is the them maybe a section on it should be added to the docs would be greatly appreciated.

[Vac1911]

JK, figured it out. Will update title to make this a docs request.

---

For other people, this is how I did it:

app.scss (assuming this is your main entrypoint)

@import '@primer/css/base/index.scss';
@import "./_theme.scss";

@include color-mode-theme(<theme_name>, true) {
    @include primer-colors-<theme_name>;
}

_theme.scss

@mixin primer-colors-<theme_name> {
    & {
        --color-bg-primary:  #1f6feb;
        ...
      }
 }

_replace <theme_name> with whatever you want your theme to be called_

[simurai]

The tricky part would be to define all the color variables (--color-bg-primary) for a custom theme. I think currently there are over 700. In the upcoming V2 for color modes it will be reduced and most variables names will change again. Making it harder to keep them up to date.

It depends a bit on the use case, but maybe once V2 is released, it might be easier to fork https://github.com/primer/primitives. Then add your own theme by duplicating an existing theme and only change the hex values. Then when building the themes all the variables for the custom theme should get generated and would probably also be easier to update to V3 at some point.

Anyways, once V2 is out we could add some docs to https://github.com/primer/primitives on how to generate your own theme. 👍