-
Notifications
You must be signed in to change notification settings - Fork 658
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
Is it possible to use color variables with gradients when specifying the theme #1059
Comments
Hello @KostasKgr, The way I got around this was to use interpolation inside export const colors = {
background: 'black',
secondary: '#F3801A',
secondaryDark: '#FF3614'
}
export const buttons = {
primary: {
background: `linear-gradient(90deg, ${colors.secondaryDark} 0%, ${colors.secondary]} 100%)`
}
}
export default {
lightTheme: {
colors,
buttons
}
} I tested this with rebass and was able to successfully render the linear-gradient. Hope this helps. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
We are trying to define some button variants in the base theme, which are using the colors defined in the theme. Different customers will have different colors, so we want to avoid duplicating the color values. Also our UI/UX team is using a lot of gradients so looking for a sustainable solution.
It seems that we cannot use gradients with references to colors.
I tried reproducing it here, so that it is easier to demonstrate: https://rebassjs.org/theming#demo
Replace the contents with:
The text was updated successfully, but these errors were encountered: