Universal Theme Reference
A sandbox environment in Oracle APEX is crucial for experimenting with its powerful, out-of-the-box components. Within the Gallery Sample Apps, search for “Universal Theme Reference” and install if it is not already. This is an app to introduce you to the Universal Theme by providing an easy way to browse through the various templates, template options, and theme styles. Even if you’re already familiar with the Universal Theme, it remains a valuable ongoing reference.
Running the Universal Theme Reference app will allow you to see everything visually in real time. The app navigation allows you to view the components and interact with them as a user would while adjusting template options / settings. There is also a full icon library to easily find a visual that pairs best with interactions or elements a user needs to scan and recognize quickly. While all this is great for those that are designing, everything within this app provides needed documentation for APEX developers to implement throughout the apps they are building.
Theme Roller
Oracle APEX applies consistent theme styling, where predefined CSS variables ensure cohesive design across the entire application. Example being making an adjustment to one color will change that color throughout the entire app automatically.
We can rapidly change the appearance of an application by adjusting the Theme Roller utility. While navigating throughout the UI of the Universal Theme Reference app open the Theme Roller utility by clicking “Customize” on the Runtime Developer toolbar displayed at the bottom of the page. The Theme Roller utility will appear over your screen and can be moved around as needed.
Set Up a Theme
First thing is to create a new theme to avoid adjusting any preset themes. Review each existing theme in the Select Theme dropdown to find the one closest to what you are wanting visually as your starting point. Clicking “Save As” at the bottom of the Theme Roller will allow you to enter a name for your new theme, copying all styles from the selected theme.
Updating a Theme
Working your way down the sections within the Theme Roller is easiest as everything cascades down. Changes made higher up in the Theme Roller can cascade down, affecting elements you’ve already adjusted.
As you adjust the appearance, and colors navigate throughout the Universal Theme Reference app and components to review how they were all affected. You can adjust as needed to find what works across the app or note what needs custom CSS to meet specific visual design needs.
Before saving your theme changes double check that the current theme is the one you want to be updated in the Select Theme section.
Move Theme to Any App
After working in the Universal Theme Reference app, you can easily apply your new theme to other APEX apps in just minutes.
Make sure the current theme in the Selected Theme section has all adjustments saved. Then click the 3 stacked dots next to the Save As button at the bottom of the Theme Roller utility. This will download a JSON file with the theme name as the file name. You can now run another APEX app and open the Theme Roller utility. Clicking the same 3 stacked dots next to the Save As button in the other app, you will be able to import the JSON file that was downloaded. This will add a new theme option in your select theme dropdown that contains all theme adjustments made previously in the Universal Theme Reference app.
If the file name matches the theme name in the APEX app you will be able to do multiple imports and update the existing theme if needed. This means you can continue to work in the sandbox of the Universal Theme Reference app to avoid a negative impact to others working in the same APEX app.
By utilizing Oracle APEX's powerful design tools, you can create dynamic, consistent, and visually engaging applications with ease. At Redstone, we're here to help guide you every step of the way—from sandbox experimentation to seamless implementation. Contact us to learn more about how we can help your team maximize the potential of Oracle APEX.