Runtime custom color theming

[kevinmitch14]

Hey!

We are currently developing a white label multi-tenant platform. The pre-selected radix colors cover a lot of ground, but down the line, clients may want to have their exact brand colors. I've been playing around with the custom palette generator which works well.

However I'm struggling to fully understand if my use-case is possible/feasible.

Context:

• I would like my clients to be able to pick their exact brand color which would be used to generate the color palette. (Mainly focused on the accent, as the grey and background will be fixed.)
• These values will be stored remotely in a DB or something similar.
• I want to fetch the theme values and inject them into the html via style={{--custom-1: #fcfcff, ...}}
• I currently have this working as expected, but only for either dark or light mode. I am not sure how to structure this so that it works like Radix Colors. ie. --red-3 changes based on dark or light theme.

Do you have any recommendations on how to get this fully working with dark/light mode colors? IS there a way to get this working nicely with Radix Themes using runtime css values?

Thanks

[kevinmitch14]

Made some progress on this.

Right now I'm

• Injecting a <style> tag instead of defining the values in the style property.

<style>
:root, .light, .light-theme {
  --gold-1: #f8fefc;
  --gold-2: #f1fcf8;
  ...
}
</style>

• Appending the vars with --gold and passing gold as the accentColor. I'm doing this so I can pass a valid value to Theme. I am not using gold colors anywhere in my app. I've tried appending something like --custom and passing "custom" as accentColor just to see if that will work too but it throws errors.

<Theme accentColor="gold">{children}</Theme>

• Extending Tailwind color palette with the custom css vars.

extend: {
  colors: {
    "custom-1": "var(--custom-1)",
    "custom-2": "var(--custom-2)",
  }
}  

Edit: I've just realised this is not really necessary, I am using https://github.com/viktorbonino/radix-themes-tw which gives me the ability to use className="bg-accent-9" which corresponds gold-9, which actually corresponds to my custom palette value.

[vladmoroz]

I guess it's a similar problem to how the color generator outputs the colors you are seeing when using it. See the source code of that page:
https://github.com/radix-ui/website/blob/main/pages/colors/custom.tsx

You can see how both problems of light/dark theme overrides and color variable naming are solved there.

We also have gone through a similar exercise with the AuthKit product, which can be branded using a couple reference colors, so it's all achievable.

[kevinmitch14]

Thanks, will look into this!

[thewebartisan7]

AuthKit looks promising!

[thewebartisan7]

I had similar things to solve a year ago, and I made unocss preset to handle this, see here https://github.com/primus-ui/unocss-preset-radix-palette