A lot of organizations have style guidelines for their browser apps. I.e., these style guidelines consist of colors, sizes, icons, etc, normally supported by CSS stylesheets. Wouldn't it be nice if there'd be a few customizable templates for quickly styling Oracle JET applications? Well, take a look here:
Welcome to the Oracle JET Theme Builder. It's been around for a while, though a bit hidden on the Oracle JET Examples page. The Oracle JET Theme Builder is an Oracle JET application that lets you create themes (i.e., CSS stylesheets), based on a set of existing themes, for your Oracle JET applications.
Click "Live Demo" and then click "Instructions" in the top right, which brings you here. Follow those steps and you'll literally have everything you need. Below I have summarized things a bit, though the Instructions speak for themselves.
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:
2. Theming. At this point you should see this and now you can choose a combination of different buttons on the left to get to the theme that you want to base your own theme off of. Below, notice I am working on "web" and "mytheme":
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:
When the above works for you, get the style guide that you're wanting to integrate into your Oracle JET application. Take note of the color codes and other styles and continue tweaking the SCSS files, using the Theme Builder, as described above, to check the changes you're making.
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.
Now, isn't this simply an awesome tool? Following the steps above, all the UI elements provided by Oracle JET can be restyled to match the style guidelines of your choice. Note that you do not have to use the "mytheme" theme as a starting point, there are other themes too, which might more closely resemble the end point you're trying to achieve. Pick the one that's closest to your intended theme and then start tweaking it as described in step 2 above.