Using Theme Styles

A theme style is a CSS that is added to the base CSS. Using the Theme Roller utility, developers can change the appearance of an application. Universal Theme - 42 includes theme styles.

About Theme Styles

A theme style is a CSS style sheet that is added to the base CSS to alter the look and feel of an application.

Newer themes such as Universal Theme - 42 can have a base CSS file plus the theme style CSS file. The theme style CSS file are referenced in the page template using the #THEME_STYLE_CSS# substitution string. The Oracle APEX engine replaces this substitution string with the CSS file references defined in the theme style attributes. Use theme styles to customize themes, to switch to a different color scheme, apply a flat look, or make a theme responsive. A theme can have multiple theme styles with one style set as active. You can modify a theme style CSS file using Theme Roller.

Selecting a Theme Style

Once defined, developers can select a theme style by:

• Editing the Theme Styles attribute when running the Create Application Wizard. See Understanding Page Types, Features, and Settings.

• Accessing the Create/Edit Theme page. See Editing a Theme Style.

• Select a new theme style on the application User Interface page. See Selecting a Theme Style on the User Interface Page.

Creating a Theme Style

Create a theme style by selecting an existing style and selecting Add Style.

To create a theme style:

1. Navigate to the Themes page:

   1. On the Workspace home page, click the App Builder icon.

   2. Select an application.

   3. Click Shared Components.

   4. Under User Interface, select Themes.

2. Select a theme and click the Styles tab.

   The Current Theme Style list displays the current Theme Style.

3. Click Add Style.

   The Theme Styles page appears.

4. For Settings:

   1. Name - Provide a short descriptive name for the theme style.

   2. Is Public - Select whether this style can be chosen by end users.

   3. Accessibility Tested - Specify if this Theme Style has been tested to the applicable accessibility guidelines. For Theme Styles created by Oracle, please see our product VPAT for the accessibility guidelines we follow..

   4. File URLs - Enter Cascading Style Sheet file URLs to be loaded on every page if the theme style is current. Each URL has to be written into a new line. If you provide a minified version of your file you can use the substitution string #MIN# to include .min or #MIN_DIRECTORY# to include minified/ in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You also have access to the substitution string #APP_VERSION# if you want to include the application’s version in the file URL. File URLs you enter here will replace the #THEME_STYLE_CSS# substitution string in the page template. See field-level Help to view examples.

   5. CSS Classes - Enter CSS classes to be appended to the #PAGE_CSS_CLASSES# substitution string and applied to every page of the application if this Theme Style is currently active.

5. For Theme Roller Attributes:

   1. Read Only - Select On to prevent any updates to the theme style. Select Off to allow the theme style to be edited and overwritten using Theme Roller.

   2. Input Parameter File URLs - Enter the LESS file URLs that will be used to generate this theme style when using Theme Roller.

   3. Output CSS File URL- Enter the URL for the CSS file that will be generated by Theme Roller for this theme style. .

   4. Theme Roller JSON Configuration, JSON Configuration - The JSON configuration is generated by Theme Roller when the theme style is saved.

      Oracle does not recommend manually updating the configuration. However, you can copy a JSON configuration from another theme style, such as a theme style in another application, to manually update the configuration.

6. For Comments - Enter any comments or notes here. These comments will never be displayed when running the application.

7. Click Create.

Editing a Theme Style

Edit a theme style from the Themes page.

To edit a theme style:

1. Navigate to the Themes page:

   1. On the Workspace home page, click the App Builder icon.

   2. Select an application.

   3. Click Shared Components.

   4. Under User Interface, select Themes.

2. Click the theme Name.

3. On Create / Edit Theme, click the Styles tab.

   The Styles tab displays the available theme styles.

4. Current Theme Style - Displays the current theme style. To change the current theme style, select another theme style from the list.

5. To edit a theme style:

   1. On the Styles tab, click the theme style Name.

   2. On the Theme Styles page, edit the appropriate attributes.

      To learn more about an attribute, see field-level help.

   3. To save your changes, click Apply Changes.

6. To delete a theme style, click Delete.

   1. On the Styles tab, click the theme style Name.

   2. On the Edit Theme Styles page, edit the appropriate attributes.

      To learn more about an attribute, see field-level help.

   3. Click Delete.

Selecting a Theme Style on the User Interface Page

Select a theme style on the application User Interface page.

To select a theme style from the User Interface page:

1. Navigate to the User Interface page:

   1. On the Workspace home page, click the App Builder icon.

   2. Select an application.

   3. Click Shared Components.

   4. Under User Interface, click User Interface Attributes.

      The User Interface page appears.

2. Attributes, Theme Style - Select a new theme style.

   The Theme Styles page appears.

3. Click Apply Changes.

Enabling Users to Select a Theme Style

Enable users to select a theme style in a running application.

Once enabled, a Customize link appears in the running application, typically in the lower left corner. When the user clicks the Customize link a pop-up displays listing available theme styles. When a user selects a theme style, the theme style is stored persistently as a user preference and will be retained during future sessions.

To enable users to select a theme style:

1. Create an application which has at least two theme styles.

2. Go to the application User Interface page:

   1. Click Shared Components.

   2. Under User Interface, click User Interface Attributes.

      The User Interface Attributes page appears..

3. Under Attributes, enable Enable End Users to choose Theme Style.

4. Click Apply Changes.