What would be the best way to implement a custom accent color? #206
-
|
Our designer is not crazy about the idea of choosing from a pre-defined palette, and we already have an accent color that we use in every other medium outside of our website. Is it reasonable to be able to implement our own accent color, or is this discouraged for some reason? I was thinking we might be able to do this by choosing a pre-defined accent color that closes matches ours, and then overriding some tokens. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 8 replies
-
|
Hey, this is a great request. We actually plan to release a tool that would allow you to easily create branded color palettes that would seamlessly slot into how Radix Colors works. The public release will be after the holidays. For now yep, using the closest accent color and overriding the key tokens is the best way to go about it.
Could you share what that looks like? If you are down to try a preview version of the tool, I’ll post it within a couple days here. |
Beta Was this translation helpful? Give feedback.
-
|
I found this tool which does something similar which I am going to use for now, but as this has 11 colors vs 12 to radix, curious what the differences are https://uicolors.app/create |
Beta Was this translation helpful? Give feedback.
-
|
@vladmoroz I'd love to try out the preview of the branded color palette tool! |
Beta Was this translation helpful? Give feedback.
-
|
@vladmoroz would also be down to try a preview of the tool! we are going through a transition from shadcn to radix-themes because of the awesome figma resource you all have. the only piece missing is allowing us to define a palette to match our brand guidelines. |
Beta Was this translation helpful? Give feedback.
-
|
Going to humbly ping this in the hopes that the tool sees the light of day in the future. We are very grateful for work on this library in general, and the time it saves us. Being able to use custom colors would boost this tremendously, as coming up with a suitable palette has not proved that easy. thanks 🙏 |
Beta Was this translation helpful? Give feedback.
-
Good timing, we just released this! |
Beta Was this translation helpful? Give feedback.
-
|
It’s out 🫡 Let us know what you think |
Beta Was this translation helpful? Give feedback.
-
|
First impressions are that I really like the way it showcases the changes as you make them. However I am running into an immediate problem as I do not know what to pick for gray + surface. Most of our surfaces are flat white, so my instinct is to go with that, however gray, I have no idea.
|
Beta Was this translation helpful? Give feedback.
-
|
I think you want to switch from dark mode to light mode first, you seem to be using an #FFF background for dark mode palette
You don't have to use the generated gray color if you are happy with the default grays. Just copy the accent color definitions. If you use white background in light mode, no need to override that too. |
Beta Was this translation helpful? Give feedback.
-
|
Ah of course. The dark mode vs light mode problem did not occur to me.
Thanks for the tips!
…On Mon, Mar 25, 2024 at 9:45 PM Vlad Moroz ***@***.***> wrote:
I think you want to switch from dark mode to light mode first, you seem to
be using an #FFF background for dark mode palette
As I mentioned above, our brand color is #79DBC0. The Closest radix color
seems to be mint by my calculations. Mint uses "sage" as the gray according
to the docs, but I am unsure what that maps to. Sage-9 is #868e8b according
to the radix css, but selecting that gets me to this unusable palette.
You don't have to use the generated gray color if you are happy with the
default grays. Just copy the accent color definitions. If you use white
background in light mode, no need to override that too.
—
Reply to this email directly, view it on GitHub
<#206 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAD5JNSL5JLFZJ3ECQG5BWLY2CEGFAVCNFSM6AAAAABBBNUB3KVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSMBXGYZTE>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
It’s out 🫡
https://twitter.com/radix_ui/status/1771587676019269662
Let us know what you think