1. Set Up. Download the ZIP file on the Instructions page, unzip it, and run the 4 Yeoman commands shown on the Instructions page on that folder:
- When you run "yo oraclejet:add-sass" and you receive error messages about Python being needed, the simplest solution is to downgrade 'node' to v5.x, e.g., I have v5.9.1, i.e., when I was on v6x, I had all kinds of problems, e.g., needing Python and then something else, which I fixed by downgrading node. Doing this has not had adverse effects so far.
- When you run "yo oraclejet:add-theme mytheme", you populate "src\themes\mytheme" with content. Make sure that the name you specify is literally "mytheme", i.e., do not change it to something different. "mytheme" is the fixed name of the custom theme you'll be creating. After you've created your theme, i.e., a set of CSS files, you can name them whatever you like.
- When you run "grunt serve --themes=all:all", the browser will show the Theme Builder running locally, which is what you want to have happen so that you can start building your themes.
Now, look at the Palette in the left column, for example, notice the first color is "$interaction1Color". In "src/themes/mytheme/web", go to "_mytheme.web.settings.scss" and look for "$interaction1Color", which you'll see is listed as follows:
// $interaction1Color: #0572ce !default;Change the above to the below:
$interaction1Color: red !default;
When you make the change above and save it, automatically the CSS will be generated, and the browser will refresh, showing you the change you've made:
3. Usage. At some point, you'll want to see how the CSS files you're generating look in your own Oracle JET application. Follow the earlier blog entry, The Mechanics of Theming Oracle JET Applications, for details on how to set up theming support within your Oracle JET application. Once you've set that up, copy the CSS files that have been generated in "themes/mytheme/web", in this case, into the relevant theme folder in your own application.