Para simplificar mi tematización, me gustaría hacer referencia a un color personalizado que definí y luego pasarlo a través de una función para obtener una variante más clara o más oscura.
Extiendo el tema de color predeterminado usando el siguiente código (parcial):
module.exports = { theme: { extend: { colors: { primary: { DEFAULT: '#325889', light: '#5aacbb', lighter: '#5ebebf', }, }, }, }, } Ahora mi objetivo es hacer referencia de alguna manera a colors.primary en otra variante de color personalizado para pasarlo a una función personalizada, algo como esto:
module.exports = { theme: { extend: { colors: { primary: { DEFAULT: '#325889', light: '#5aacbb', lighter: '#5ebebf', }, gradient: { '0\/3': this.theme.extend.colors.primary, '1\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 33.333), '2\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 66.666), '3\/3': this.theme.extend.colors.primary.lighter, } }, }, }, } Sin embargo, parece que no puedo hacer referencia al color primario de ninguna manera. this.colors.primary , this.theme.extend.colors.primary pero parece que no puedo ponerlo en marcha.
Cualquier pista sobre cómo hacer esto sería muy apreciada.
¡Salud!
Puede crear una nueva variable para mantener el valor de sus colores extendidos:
const primary = '#325889'; const primaryLight = '#5aacbb'; const primaryLighter = '#5ebebf'; module.exports = { theme: { extend: { colors: { primary: { DEFAULT: primary, light: primaryLight, lighter: primaryLighter, }, gradient: { '0\/3': primary, '1\/3': getGradientStop(primary, primaryLighter, 33.333), '2\/3': getGradientStop(primary, primaryLighter, 66.666), '3\/3': primaryLighter, } }, }, }, };