Redwood is the new UI design language for Oracle, and the Redwood look and feel is the default one used for new applications developed with Oracle Visual Builder. However, sometimes customers want to change the default look and feel to match specific UI designs they want to implement. With release 10 of Oracle JET (which is available starting with Visual Builder 21.07) you can now override the Redwood theme to adopt it to match your needs. In this blog and the video below we'll show you how.
Override App Wide Settings
If the change that you are looking to do should apply globally across an application, you'll want to create a css file that will override the default Redwood styles. Visual Builder makes this very simple – just go to your web app setting and click the create link next to the Redwood theme. VB will generate a css file that lists all the variables that you can overwrite. By default we comment all the entries – you'll want to pick the specific entries you plan to overwrite, and move them out of the commented area.
To learn more about the various CSS variables and how to use them – check out the theming section in the Oracle JET cookbook and the various samples included in it.
One thing to keep in mind – As Redwood evolves, Oracle might decide to switch values of various variables in the future. If you overwrite the base Redwood theme, some of the variables you didn't override might change their value in the future – and you might need to modify the theme you created to adopt for those changes in future versions of Oracle JET. We are planning on introducing a "stable theme" that would let you override things more safely in a future version of Oracle JET.
Update [Dec 2021] – In the newly released version 22.01 of Visual Builder we now support JET 11 and the Stable Theme. We recommend that if you are going to change the default look and feel of your application you'll switch the application to use the stable theme, and then overwrite that stable theme. This will give you a layer of protection from future changes Oracle might introduce in the core Redwood themer. Read the Oracle JET documentation about themes for more information. Here is an updated video showing modifying the stable theme.
Update [Oct 2024] – Currently neither the new Oracle JET core components (oj-c-*) and the Redwood design components (oj-sp-*) support theming. If your application requires theming, stick with the non-core Oracle JET components.
Component Override
The next point that the video below demonstrates is the ability to use the CSS variables to overwrite specific instances of components. To do that – simply create a class entry in your css file with a specific name and a set of CSS variables you want to overwrite. Then assign that class to the specific component instance you want to overwrite. Again there are many examples in the component styling section of the JET cookbook.
Dark Mode
One of the new features added to JET 10 for Redwood in the recent releases is support for rendering some of the components in inverted color scheme. This is meant for situations where the UI uses a dark background in some areas. In these cases, you'll want to invert the colors that the components use since you'll want to keep the contrast in place for easier readability. Oracle JET simplifies this switch using the built-in class oj-color-invert, which you can assign to various components. One cool feature is that if you'll assign it to a container components such as oj-form-layout, the components inside the container will inherit this style. You can see a list of the components that currently support the inverted mode here.
With these tools in your disposal you can now create your own look and feel for your Visual Builder apps with ease.
Theming Redwood is an evolving area and we expect various enhancements showing up in Oracle JET 11 and beyond. One thing to consider is that Oracle itself is standardizing our Cloud Apps UI on Redwood. If you are planning for your app to be embedded inside Oracle SaaS, you should probably keep the default Redwood theme as it is without modifications.
If you create a cool looking theme for your app we would love to see it – you can post a screenshot of your new look and feel on our forum.