I am currently implementing a method to apply CSS colors and styles obtained from an API endpoint to HTML elements.
Although I have achieved this functionality, I believe there may be room for improvement in terms of best practices.
This is the current implementation. Do you have any suggestions on how to accomplish this in a more professional manner?
Here is my .ts file:
getColors(){
this.api.get("http://127.0.0.1:8000/colors").subscribe((res:any)=>{
this.colors = res.color
console.log(res)
document.documentElement.style.setProperty("--primary", this.colors)
})
}
and .html file:
<header class="header">
<div class="headerdiv">
<h1>Welcome to Overflow</h1>
</div>
</header>
<style>
.header{
background-color: var(--primary);
}
h3, h1{
color: var(--textcolor);
}
</style>