Recently, I came across some generated code within the application that looks like this:
"PHcolour":"rgb(4, 31, 156)","Ctextcolour":"rgb(59, 214, 252)"I have successfully retrieved the data from the model using curly brackets {{CtextColour}},
My goal is to implement a button on the page that can alter the color scheme of the website. I have achieved similar functionality using ng-click for other features.
The current challenge I am facing is that CSS does not recognize the use of {{}}. My attempted approach was as follows:
<style media="screen">
.custom { background-color: #fff; }
.custom h1 { color: {{Ctextcolour}}; }
.custom h2 { color: {{Ctextcolour}}; }
.custom h3 { color: {{Ctextcolour}}; }
.custom h4 { color: {{Ctextcolour}}; }
.custom h5 { color: {{Ctextcolour}}; }
.custom h6 { color: {{Ctextcolour}}; }
.custom p { color: {{Ctextcolour}}; }
.custom th { background-color: #c3cced; color: {{Ctextcolour}};}
.custom.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #c3cced ) !important; color: {{Ctextcolour}} !important;}
</style>
This method did not work and even caused the rest of my HTML code to turn pink in my IDE (Atom).
Switching to the following structure removed the pink coloration, but still did not yield the desired result:
<ng-style media="screen">
.custom { background-color: #fff; }
.custom h1 { color: {{Ctextcolour}}; }
.custom h2 { color: {{Ctextcolour}}; }
.custom h3 { color: {{Ctextcolour}}; }
.custom h4 { color: {{Ctextcolour}}; }
.custom h5 { color: {{Ctextcolour}}; }
.custom h6 { color: {{Ctextcolour}}; }
.custom p { color: {{Ctextcolour}}; }
.custom th { background-color: #c3cced; color: {{Ctextcolour}};}
.custom.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #c3cced ) !important; color: {{Ctextcolour}} !important;}
</ng-style>
The HTML markup for the button is as follows:
<button type="button" class="btn btn-info" ng-click="colorScheme = 'custom'" ng-model="eventData.theme">Custom Theme
</button>
Upon inspecting the element, it was evident that no changes had been applied to the button. Furthermore, there were no JavaScript errors detected.
Thank you for your assistance.