I am\u00a0 using multiple themes and theme selection, using custom themes<\/p>\n
For interest I am loading the theme css as a static asset, in index.html:-<\/p>\n
<head>
\n<meta charset=”utf-8″>
\n<title>Microapp Fabric Prototype<\/title>
\n<base href=”\/”>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1″>
\n<link id=”theme-css” rel=”stylesheet” type=”text\/css” href=”assets\/resources\/themes\/salient\/theme.css”>
\n<\/head><\/p><\/blockquote>\nThen I am dynamically changing the href to switch themes:-<\/p>\n
export class ThemeSwitcher {
\n\/*
\n* Select the target theme
\n* this may be an external theme or an internal packaged one
\n* If the path contains a ‘\/’ the theme is assumed to be an external theme source
\n*\/
\nchangeTheme(theme: string) {
\nconst themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById(‘theme-css’);
\nthemeLink.href = theme.indexOf(‘\/’) >= 0 ? theme : ‘assets\/resources\/themes\/’ + theme + ‘\/theme.css’;
\n}
\n}<\/p><\/blockquote>\nA theme SCSS under the assets folder will be automatically compiled and included inline in the package only when a specific theme is referred to in the \u201cstyle\u201d section of angular.json. When dynamically switching multiple themes as above, the themes are kept as static assets and are not inlined in the package and so are removed from the \u201cstyle\u201d section. When this is done, the theme scss files for all the themes are not compiled to css automatically when an ng build<\/em> or ng serve<\/em> is done. This post here<\/strong><\/a> details how to manually install and build the scss using node-sass. It goes into other details which I haven\u2019t needed as I am using static assets, so only node-sass<\/em> is needed. If in the actual theme directory, the following commands will install\u00a0 node-sass and compile the scss for the theme and also create the source map:-<\/p>\n
npm install node-sass<\/p>\n
node-sass theme.scss theme.css \u2013\u2013source-map .<\/p><\/blockquote>\n
This can also be added to the scripts section of package.json to make an npm command:<\/p>\n
“scripts”: {
\n“ng”: “ng”,
\n“start”: “ng serve”,
\n“build”: “ng build”,
\n“test”: “ng test”,
\n“lint”: “ng lint”,
\n“e2e”: “ng e2e”,
\n“scss”: “cd src\/assets\/resources\/themes\/legacy-blue && node-sass theme.scss theme.css \u2013\u2013source-map .”
\n},<\/p><\/blockquote>\nThis can be run by simply using npm run scss<\/em><\/p>\n
Note as above that npm supports the cd command in the scripts section, both for linux and windows (as detailed here). The default directory is the root of the project, and this is consistent even if you run the npm command e.g. from a subdirectory. I did not manage to find a way to automate this via an ng build<\/em> or ng serve<\/em> command, so these would have to be run in conjunction with npm run scss<\/em> (with the latter running first).<\/p>\n","protected":false},"excerpt":{"rendered":"
I am\u00a0 using multiple themes and theme selection, using custom themes For interest I am loading the theme css as a static asset, in index.html:- <head> <meta charset=”utf-8″> <title>Microapp Fabric Prototype<\/title> <base href=”\/”> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link id=”theme-css” rel=”stylesheet” type=”text\/css” href=”assets\/resources\/themes\/salient\/theme.css”> <\/head> Then I am dynamically changing the href to switch themes:- export class […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[198,209],"tags":[16,15],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2228"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2228"}],"version-history":[{"count":13,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2228\/revisions"}],"predecessor-version":[{"id":2242,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2228\/revisions\/2242"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}