Блог

Для того, чтобы упростить мою тематику, я хотел бы сослаться на пользовательский цвет, который я определил, а затем передать его через функцию, чтобы получить более светлый или более темный вариант.

Я расширяю цветовую тему по умолчанию, используя следующий (частичный) код:

 module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    DEFAULT: '#325889',
                    light: '#5aacbb',
                    lighter: '#5ebebf',
                },
            },
        },
    },
}
 

Теперь моя цель состоит в том, чтобы каким-то образом ссылаться colors.primary на другой пользовательский вариант цвета, чтобы передать его в пользовательскую функцию, что-то вроде этого:

 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,
                }
            },
        },
    },
}
 

Тем не менее, я, кажется, никак не могу соотнести основной цвет. Я пытался this.colors.primary , this.theme.extend.colors.primary но, кажется, не могу заставить его работать.

Любые подсказки о том, как это сделать, были бы очень признательны.

Ура!

Вы можете создать новую переменную, чтобы сохранить значение ваших расширенных цветов:

 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,
                }
            },
        },
    },
};