1. Developing Applications with Oracle Visual Builder
  2. Use Cases & Troubleshooting
  3. Common Use Cases
  4. Style and Theme Visual Builder Applications

Style and Theme Visual Builder Applications

All styling in Visual Builder applications happens manually in CSS. There are no declarative features for changing the display of text or images. Because all Visual Builder applications are just JET applications, they use JET themes to style the applications.

Visual Builder applications created with version 20.10 or later, by default, use the Redwood theme. Redwood is the Oracle standard for application look and feel. It includes components such as Waterfall Layout and Action Cards that enrich user experience, besides a collection of icons that you can readily leverage in your apps.

Because Redwood achieves its look and feel through hundreds of custom properties (also called CSS variables), you can override these variables to customize the default look and feel for your requirements.

Note:

Styling applications is supported only for web applications that use the Redwood theme. If you’re styling applications that use the Alta theme, note that support for Alta themes has been deprecated since JET 10.

When you style your Visual Builder or JET applications, it's important to use theming correctly. Otherwise, you run the risk of finding that your re-styling breaks when you upgrade your platform versions. For more information about theming your application, see "Use CSS and Themes in Oracle JET Apps" in Developing Oracle JET Apps Using MVVM Architecture. To get the latest version, go to https://www.oracle.com/webfolder/technetwork/jet/index.html, click Help and Support, then scroll to the bottom and click Theming.

Transition a Web (or Mobile) App's Theme to Redwood

Visual Builder applications created with version 20.07 or earlier, by default, use JET's Alta theme as the base UI theme. If your app uses the Alta theme, we strongly urge you to transition your app to use the Redwood theme before support for the Alta theme ends.

For more information on Alta deprecation, see Deprecated Features.

To move your web (or mobile) app's theme from Alta to Redwood:

  1. Select the application node in the Navigator.
  2. Click Settings, then look for the Theme field in the General tab.
  3. If the Theme is set to Alta, you can switch to Redwood or Redwood Stable (recommended) as the base theme.

    Description of app-theme-dropdown.png follows
    Description of the illustration app-theme-dropdown.png

    Because component dimension and styling have changed, make sure you verify the look and feel. You may have to redesign the app if needed.

With the theme now set to Redwood, you can:

Customize a Web App's Appearance

Web apps, by default, display against a light background with dark text. For web apps created with version 24.07 or later, you can customize the app's theme to show its components against a dark background, even let your users choose between a Light and Dark theme. The application's UI automatically adjusts to the theme you (or your end-user) chooses.

You can also use CSS variables to override the app's default look and feel, which is based on the Redwood base theme. The Redwood theme provides the Oracle look and feel for your app and inherits future updates to the Redwood theme, but these changes can potentially bleed into an app's custom theme. When you use CSS overrides to customize the default theme, the base theme switches to Redwood Stable, which is meant to minimize changes bleeding into a custom theme. With this option, your app uses the Stable CSS file as the base theme, but you override some variables in a separate CSS file to customize the base theme's look and feel.

The advantage of overriding CSS variables in a separate file is that you won't need to rebuild your web app with each new version of JET. Whenever the default Redwood theme changes, those updates will be picked up by your application's CSS files without requiring changes.

  • Follow these steps to switch a web app's theme and optionally override CSS variables for apps created with version 24.07 or later:
    1. In the Navigator's Web Applications tab, select your application and click the Settings tab:
      Description of setting-app.png follows
      Description of the illustration setting-app.png

    2. Select a Theme under Appearance:
      • Select Dark to switch your app to a dark color display where components render against a dark background with light text.

      • Select User Choice to give your users the ability to set their preferred theme for the app, then select either Light or Dark as the default theme:
        Description of app-appearance.png follows
        Description of the illustration app-appearance.png

        When you choose this option, users will be able to change the app's theme from the Avatar menu: Light, Dark, or OS (to inherit the theme specified in their OS setting):
        Description of app-appearance-userchoice.png follows
        Description of the illustration app-appearance-userchoice.png

      • If you changed the default, select Light to switch your app back to a lighter background with dark text display.
    3. Preview your application to see what it looks like with your selected theme.
    4. Optional: Override the default Redwood look and feel using CSS variables. Choose this option if you want to add a limited number of app-specific overrides to the base theme.
      1. Click the Create Override link for your theme.
      2. When a link to the new redwood-overrides.css or redwood-overrides-dark.css file is created, click the file to open it:
        Description of app-appearance-override.png follows
        Description of the illustration app-appearance-override.png

      3. Specify the variables that you want to override. For a list of variables that can be changed, see JET documentation at https://www.oracle.com/webfolder/technetwork/jet/jsdocs/CssVariablesOverview.html.

        For example, to override the font used by the Redwood Dark theme for your application, add the --oj-html-font-family variable and change its values. Make sure you remove the /* and */ before and after the variable to uncomment it:
        Description of redwood-override-dark-change.png follows
        Description of the illustration redwood-override-dark-change.png

      4. Check your application and verify the changes.
  • Follow these steps to override CSS variables for apps created with version 24.01 or earlier that use the Redwood theme:
    1. In the Navigator's Web Applications tab, select your application and click the Settings tab.
    2. When the Theme is set to Redwood, click the Create Override link:

      Description of redwood-override-create.png follows
      Description of the illustration redwood-override-create.png

      When customizing the theme, we recommend you choose Redwood Stable to reduce the chances of your app being impacted by future updates. This way, you only override the variables you want to change while inheriting all other updates to the Redwood theme.

    3. When a link to the new redwood-overrides.css file is created, click the file under Theme Override to open it:
    4. Uncomment and change the values of the variables you want to change.

      To do this, remove the /* just before the variable and the */ after it, then update the variable's value. For example, to override the font used by the Redwood theme for your application, uncomment and change the --oj-html-font-family variable's values:
      Description of redwood-override-change.png follows
      Description of the illustration redwood-override-change.png

      You can also add variables that you want to override. For a list of variables that can be changed, see JET documentation at https://www.oracle.com/webfolder/technetwork/jet/jsdocs/CssVariablesOverview.html.

    5. Check your application and verify the changes.

Override the Redwood Theme for a Mobile Application

If you would like to override the Redwood theme in your mobile app, you need to create a new CSS file and update app-flow.json to include the new CSS.

Note:

Mobile applications have been deprecated in favor of PWAs. You can continue to use an existing mobile app by deploying it as a PWA until July 2024 when mobile apps, including PWA-enabled ones, reach End of Life (EOL). See Run Mobile Applications as PWAs.
  1. In your mobile app, expand the Resources node, and add a file named redwood-overrides.css to the css folder.
    Description of mobile-redwood-override-css.png follows
    Description of the illustration mobile-redwood-override-css.png

  2. In the Source view, select app-flow.json and to the "imports": { "css" section, add:
    Alternatively, you can import the CSS file to the mobile app settings. See Manage Custom Component, CSS, and Module Imports.

Add a Custom Style to a Component

When you want to customize the appearance of specific component instances, you create a style class and define the style in your app's stylesheet, then assign that class to the specific component instance you want to override.

Some style classes are predefined in the app and are automatically applied to components when you add them to a page. Specific predefined style classes are applied to many Oracle JET components to ensure they display correctly and consistently. For example, if you look at the HTML for a Header component in a page's Code editor, you might see the following style classes applied to an h1 element: oj-flex-item oj-sm-12 oj-md-12. Predefined style classes used by Oracle JET components are prepended with oj-.

Note:

As a general rule, you should not override or modify the predefined classes or remove them from components. When defining and adding a custom class to a component, you should exercise caution to ensure that your class does not conflict with the predefined classes already applied to the component.

You can define your custom style classes in the app.css stylesheet of your app. An empty app.css stylesheet is created in your app by default and the link included in the header of the app's pages. You can apply classes to components in the Properties pane in the Page Designer's Design view or in the page's Code editor.

To add a custom style to a component:

  1. Open the page in the Page Designer and locate the component that you want to modify with a custom class.
  2. Type the name of the custom class to apply it to the component.

    When you select the component in the Design view of the Page Designer, you can add the name of the custom class in the class property field, which is located in the All tab of the Properties pane. You can also add the name of the class to a component directly in the page's Code editor.


    Description of page-designer-inspector-styles.png follows
    Description of the illustration page-designer-inspector-styles.png

  3. In the Navigator, expand the css node in your app's resources folder and click app.css to open the stylesheet in the editor.
  4. Define the class in app.css.
Reload the page in the Page Designer to see the class applied to the component.