Necesito crear un objeto "Temas", que debe contener todos los temas con los colores que necesito para una aplicación. Me gustaría usar algunas de sus variables para cambiar sus otras. Por ejemplo, tener la propiedad "deshabilitada" establecida en el color del texto del objeto + algo de opacidad. Traté de lograr esto usando this.variableName en cadenas de literales de plantilla, pero aparece un error que dice que no puedo acceder antes de la inicialización. ¿Hay alguna forma de lograr esto sin tener que copiar y pegar el texto cada vez manualmente?
Ejemplo de código:
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 didn'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:{ ...... } }Puede lograrlo definiendo los colores fuera del objeto del tema.
const darkFloating = '#1C1A70' const Themes = { Dark: { isDark: true, BackgroundColors: { floating: darkFloating, menu: ` linear-gradient( 180deg, ${darkFloating} 0%, rgba(242, 24, 155, 0.9) 12%, ${darkFloating} 100% ) ` } } }En caso de que las "fórmulas" sean las mismas para todos los temas, le sugiero que use una función de creador, es decir
interface ThemeInput { isDark: boolean backgroundColors: { primary: string page: string floating: string error: string warning: string success: string } contentColors: { shared: string text: string } } interface Theme extends ThemeInput { backgroundColors: ThemeInput['backgroundColors'] & { menu: string } contentColors: ThemeInput['contentColors'] & { disabled: string inverted: string } } const createTheme = (input: ThemeInput): Theme => ({ ...input, backgroundColors: { ...input.backgroundColors, menu: ` linear-gradient( 180deg, ${input.backgroundColors.floating} 0%, rgba(242, 24, 155, 0.9) 12%, ${input.backgroundColors.floating} 100% ) ` }, contentColors: { ...input.contentColors, //adding 99 for opacity disabled: `${input.contentColors.text}99`, inverted: input.backgroundColors.page }, }) const Themes = { Dark: createTheme({ isDark: true, backgroundColors: { primary: '#622BFF', page: '#080246', floating: '#1C1A70', error: '#FF004F', warning: '#FCE35E', success: '#2ACF58' }, contentColors: { shared: '#622BFF', text: '#FFFFFF' } }), Light: createTheme({ ... }) }