You might also want to check out our web programming tutorial on Color Manipulation with JavaScript<\/a>.<\/p>\n A couple of good reasons for choosing a CSS preprocessor like Less (short for “Leaner Style Sheets”) is its support for custom variables and numerous functions like lighten()<\/strong> and darken()<\/strong>. These two features allow us to define some color properties like these in a .less<\/strong> file:<\/p>\n We can then reference our variables from our CSS rules like so:<\/p>\n This provides a simple mechanism for changing an app’s color theme by swapping out one variables.less file with another.<\/p>\n The two code snippets will be combined into the following CSS rules when compiled:<\/p>\n Our CSS tutorial, Working with CSS Variables<\/a>, goes into greater detail on how to use variables in CSS.<\/p>\n By default, Angular has an asset directory, located under the \/src<\/strong> folder at the root<\/strong> of your project, which is copied over to the build directory by Angular CLI during the build process. It is where you put all application resources – anything from images, videos, and .json files to styles and scripts. It is defined under the “assets<\/strong>” section of the angular.json<\/strong> file:<\/p>\n You can also add instructions to copy over files from a common library in the node_modules<\/strong> folder if you need to:<\/p>\n We will store our three color variables in the variables.less<\/strong> file, which we will create in the src\/assets<\/strong> folder of our project so that we can access them later:<\/p>\n <\/p>\n There are a few ways to read files in TypeScript\/JavaScript, but I would recommend Angular’s HttpClient<\/strong> class. It is specifically for communicating with a server over the HTTP protocol. To use it, we can import the HttpClient<\/strong> service class from @angular\/common\/http<\/strong> and inject it as a constructor argument. Its get()<\/strong> method takes two arguments: the endpoint URL from which to fetch, and an options object that is used to configure the request. If web developer do not specify any options, get()<\/strong> expects the response body to contain JSON data. Since that is not the case here, we need to specify a responseType<\/i><\/strong> of “text<\/strong>“.<\/p>\n The get()<\/strong> method returns an Observable that we can subscribe to and process the file contents:<\/p>\n Read:<\/strong> HTML, CSS, and JavaScript Tools and Libraries<\/a><\/p>\n Rather than try to parse the contents of the variables.less<\/strong> file ourselves, we can utilize less-vars-to-js<\/a> library to convert our variables to JavaScript (JS). Specifically designed for Less variables, it converts ours to the following JS object:<\/p>\n It can be invoked directly, without a constructor, as it only does one thing. We just need to pass in the Less variables string within the http.get’s<\/strong> subscribe callback:<\/p>\n If you look at the generated JS Object, you’ll notice that Less functions like lighten() are not compiled by the lessToJs()<\/strong> function. That’s because less-vars-to-js<\/a> is just a Less variable parser and not a Less processor. To compile Less functions into actual color values, we need to use the official, stable version of the Less npm JS library<\/a>. Its methods may be invoked from the command-line, or, as in our case, programmatically. The main entry point into less is the less.render()<\/strong> function, which takes the following formats:<\/p>\n We will be using the first syntax.<\/p>\n Although the options are not required, we will need to supply the modifyVars<\/strong> attribute in order to enable run-time modification of Less variables. It accepts a JS Object like the following:<\/p>\n The lessInput<\/strong> argument needs to be in the format of Less rules and not variable declarations. The last thing we want to do is go hunting through all of our stylesheets for rules that use the color variables. In fact, that would be counterproductive, because we are only interested in the compiled color values and nothing else. For that, we can just wrap them in some dummy rules:<\/p>\n Now we have got three valid CSS rules that incorporate the Less color variables:<\/p>\n The less render()<\/strong> method returns a Promise with an Object that contains, among other things, the compiled CSS string:<\/p>\n Upon encountering @HoverColor’s<\/strong> value of “lighten(@BackgroundColor, 20%)<\/strong>“, Less readily sets the value to lighten’s results:<\/p>\n Read:<\/strong> Introduction to CSS-in-JS<\/a><\/p>\n Recall that the goal of all this is to call the App Component’s existing setColors()<\/strong> method with the three theme color values. To do that, we’ve got one more conversion to do if we are to access the CSS rule values. Again, we should rely on a library rather than parse the CSS ourselves. A good CSS to JS converter is available to us from none other than American Express (as in the credit card). They have a few repos on GitHub, including one for the css-to-js<\/a> library. It takes CSS rules in a string format and converts them to a JS Object like this one:<\/p>\nCustomizing Theme Colors<\/h2>\n
@BackgroundColor: rgb(82, 172, 240);\r\n@HoverColor: lighten(@BackgroundColor, 20%);\r\n@FocusBorderColor: gray;\r\n<\/pre>\n
.background {\r\n background-color: @BackgroundColor;\r\n}\r\n\r\n.hover-background {\r\n background-color: @HoverColor;\r\n}\r\n\r\n.focus-border-background {\r\n background-color: @FocusBorderColor;\r\n}\r\n<\/pre>\n.background {\r\n background-color: #52acf0;\r\n}\r\n.hover-background {\r\n background-color: #b0d9f8;\r\n}\r\n.focus-border-background {\r\n background-color: gray;\r\n}<\/pre>\nReading Asset Files from an Angular Application<\/h2>\n
\"architect\": {\r\n \"build\": {\r\n \"builder\": \"@angular-devkit\/build-\"assets\": [\r\n \"src\/favicon.ico\",\r\n \"src\/assets\",\r\n {\r\n \"glob\": \"**\/*\",\r\n \"input\": \".\/node_modules\/@acme\/common-![\"CSS](\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2022\/06\/angular-assets-folder.jpg\")
<\/p>\nimport { HttpClient } from '@angular\/common\/http';\r\n\r\nexport class AppComponent {\r\n constructor(http: HttpClient) {\r\n http.get('.\/assets\/variables.Converting Less Variables to a JS Object<\/h2>\n
{\r\n @BackgroundColor: \"rgb(82, 172, 240)\"\r\n @FocusBorderColor: \"gray\"\r\n @HoverColor: \"lighten(@BackgroundColor, 20%)\"\r\n}\r\n<\/pre>\nimport lessToJs from 'less-vars-to-js';\r\n\r\n\/\/ ...\r\nvariables => {\r\n let vars: Object;\r\n try {\r\n vars = lessToJs(variables);\r\n } catch(err) {\r\n console.log(err);\r\n return;\r\n } \r\n<\/pre>\nSetting the CSS Values from the Less Variables Object<\/h2>\n
less.render(lessInput[, options])\r\n .then(function(output) {\r\n \/\/ output.css = string of css\r\n \/\/ output.map = string of sourcemap\r\n \/\/ output.imports = array of string filenames of the imports referenced\r\n },\r\n function(error) {\r\n });\r\n\/\/ or... less.render(css, options, function(error, output) {})\r\n<\/pre>\n{ '@buttonFace': '#5B83AD', '@buttonText': '#D9EEF2' }\r\n<\/pre>\nlet dummyCssRules = '', i = 0;\r\nfor (const [key, value] of Object.entries(vars)) {\r\n dummyCssRules += 'rule' + ++i + ' { color: ' + key + '; }\\n';\r\n}\r\n<\/pre>\nrule1 { color: @BackgroundColor; }\r\nrule2 { color: @HoverColor; }\r\nrule3 { color: @FocusBorderColor; }\r\n<\/pre>\nconst options = { modifyVars: vars };\r\nless.render(dummyCssRules, options)\r\n .then((cssObject) => {\r\n\t\/\/ set the theme colors...\r\n })\r\n .catch((reason) => console.error(reason));\r\n<\/pre>\nrule1: {color: '#52acf0'}\r\nrule2: {color: '#b0d9f8'}\r\nrule3: {color: 'gray'}<\/pre>\nAssigning the CSS Colors to Component Variables<\/h2>\n
{\r\n rule1: {\r\n color: \"#52acf0\"\r\n }\r\n rule2: {\r\n color: \"#b0d9f8\"\r\n }\r\n rule3: {\r\n color: \"gray\"\r\n }\r\n}\r\n<\/pre>\n