-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve theming docs #3370
Comments
Your hunch is correct, creating your own custom theme would require reproducing the set of variables/tokens that our Spectrum themes have and replacing the values with your own colors (e.g. you could set Since you are building your own app that has its own styling in place, it may be easier to create the components with the aria/stately hooks instead so that you have full control over the styling yourself |
I'd like to overwrite the primary blue to be some other colour - but that seems to be far more complex than initially indicated by the homepage saying I'd like to create some type of super set of the existing light and dark themes, only overriding one colour e.g "--spectrum-global-color-blue-400" export const spectrumTheme: Theme = {
...defaultTheme,
dark: {
spectrum: 'spectrum-global',
...defaultTheme.dark
},
light: {
spectrum: 'spectrum-global',
...defaultTheme.light
},
}
export const spectrumGlobalStyles = (theme : any) => ({
'.spectrum-global': {
"--spectrum-global-color-blue-400": "rgb(255,0,0)"
},
}) But this of course doesn't work because one completly overrides the other. Is there no other way than to copy all of the values into a new css-file? If there was a way to superset the existing dark and light themes, it would still be mostly maintained by the dependency, only with some changed values added on top. Any input would be much appreciated. |
Hello, I also would like to have a solution for this... |
I'd like to just reiterate that the preferable approach would be to use the aria/stately hooks to recreate the components you need so that you can have full control over the styling. I understand this may represent a lot more work but the spectrum tokens themselves have actually gone through several breaking changes over time that would've broken the "overriding variable" approach. Additionally, IMO having a hybrid of our Spectrum styles and user defined overrides is a bit dangerous since any changes to the Spectrum Design color choices could invalidate/conflict with your own overrides. |
@LFDanLu if I understand you correctly, does that mean that my components will always have the After struggling for some hours setting up Spectrum, I'm shocked that theming is |
🙋 Documentation Request
Hey folks, I'm struggling to understand how to customize the themes. The docs say
But it's very hard to find information on how to practically change how things look. Like, for example how do I change the default styles of the inputs?
It seems like the theme you pass to the provider points to the classes and then you need to make sure the classes are present in your CSS, but what do you actually put in these classes to start meaningfully customizing Spectrum's appearance? For example I'm using emotion, but I'd recon you can do this with any styling solution.
My app that has a lot of existing styling already.
I'd be down to make a PR if I figure out how to do it properly. Essentially, I'm trying to "normalize" spectrum so that its default styles behave with my styles.
The text was updated successfully, but these errors were encountered: