My angular 4 web application requires dynamic styling based on color values and image URLs received from the backend. While I have successfully set up the app to load images from the server, handling color values poses a greater challenge. The primary colors used throughout the app are defined as CSS variables in the styles.css file.
:root {
--grape: #4b286d;
--purple: #651f97;
--purp-button-on-hover: #6d4299;
--accessibility-green: #248700;
--green-button-on-hover: #36ad0a;
--telus-grey: #595859;
--text-grey: #54595f;
--bg-grey: #e2e2e2;
--secondary-bg: #f5f5f5;
--white: #fff;
--almost-white: #f3f3f3;
--footer-bg: #333333;
--footer-copyright: #595853;
--select-title: #4a4a4a;
--pale-grey: #f5f6f7;
--select-gradient: linear-gradient(to bottom, #f2f2f2, #d4d4d4);
--select-border: #979797;
--font-type: "Helvetica Neue", helvetica, arial, sans-serif;
--font-light: 300;
}
In TypeScript, I aim to dynamically update these values to reflect the data obtained from the server during the initial app load. The approaches I have come across involve manipulating HTMLElements to change their styles individually, which would be a tedious process. Is there a more efficient method to achieve this functionality? Thank you.