We have a requirement to have different themes for our Oracle JET application, "business" and "pleasure". The first will have images of serious business suits, the second will have party hats; the first will have grey/blue fonts and colors, the second will be polka dots or something. You want the themes to be able to be swapped in and out at build time. OK, that's the scenario.
1. Create the application. Let's imagine we start like this:
yo oraclejet myapp --template=basic
OK, we now have the "basic" template provided by the Oracle JET Yeoman generator and take note of the "themes" folder below, which is automatically available:
2. Install node-sass. In the "myapp" folder, we need to now run this to make the next steps possible, i.e., incorporate node-sass, a library that provides bindings for Node.js to LibSass, the C version of the popular Sass, enabling you to natively compile .scss files to css, at "incredible speed".
3. Create themes. Now, we run this in the "myapp" folder to create a new theme, note there are no quotes around the theme name:
yo oraclejet:add-theme business
We now have this, i.e., in the "src" folder, where you do all your coding work, there's now a "themes" folder, with placeholders for the "business" theme overrides on/changes to/extensions to the default "alta" theme:
And let's create another one:
yo oraclejet:add-theme pleasure
Now, we have two themes in our "src" folder:
4. Build themes. Let's now build the Oracle JET application with our "business" theme:
grunt build --theme=business
Now we have, as expected, a "web" folder, where our application is built into, which now includes our "business" theme, while both our themes are added to the "themes" folder, so that we can see the themes that are available in one place. You could see the "themes" folder as a staging area, while within the "web" folder only the theme that will actually be served is shown:
grunt build --theme=<themeName>:<themePlatform>--theme=business:android, will build the app with "business" custom theme extending the android alta
5. Serve up themed applications. Now, the time has come to serve up our themed application:
grunt serve --theme=<themeName>:<themePlatform> --platform=<web | android | ios |windows>
The above serves up the app using the <themeName>:<themePlatform> notation, comparable to described above for grunt build --theme=<themeName>:<themePlatform>.
That's all. Now, with the mechanics out of the way, read the following: