I need to create a “Themes” object, which should contain all the themes with the colors I need for an app. I would like to use some of its variables to change its others. For example, having the “disabled” property set to the text color of the object + some opacity.
I tried to achieve this by using this.variableName in template literals strings but I get an error saying I can’t access it before initialization.
Is there any way to achieve this without having to copy-paste the text each time manually?
Code sample:
const Themes = {
Dark: {
isDark: true,
BackgroundColors: {
primary: '#622BFF',
page: '#080246',
floating: '#1C1A70',
error: '#FF004F',
warning: '#FCE35E',
success: '#2ACF58',
// I thought adding ${this.variableName} would have worked but unfortunately it doesn't
menu: `linear-gradient(180deg, ${this.Dark.BackgroundColors.floating} 0%,
rgba(242, 24, 155, 0.9) 12%, ${this.Dark.BackgroundColors.floating} 100%)`,
},
ContentColors: {
shared: '#622BFF',
text: '#FFFFFF',
//adding 99 for opacity
disabled: `${this.Dark.ContentColors.text}99`,
inverted: '${this.Dark.BackgroundColors.page}',
},
},
Light:{
......
}
}