Search for a command to run...
See how APEX stores a configuration of your Theme Roller changes and how to move them across applications 🎨
Creating apps built with ❤️ using Oracle APEX. PL/SQL dev. Exploring the AI and ML world. Keen on front-end, visual arts and new technologies. Love travel, sports, photography.
Excellent article as always...
The only missing part is the JavaScript function that allows you to do that
apex.utr.config();
Thanks a lot for pointing that out! As a matter of fact, your post is just 2 months old but I have still forgot about it, among all the other great stuff you share!
BTW, I believe that the APEX team will soon make user being able to do some of that mapping between the JSON variables and the CSS variables that get changed underneath. So we will stay tuned.
Impressions from APEX Alpe Adria 2026
The Use Case Oracle APEX has a special template for Dialog Pages, called Drawer. This template is also available for any Region on you Page (this time called Inline Drawer). 💡 A Drawer is an overlay
The Use case (and the issue) What you see on this screenshot is a pretty common requirement in an APEX application - A form, where you have some text item or dropdown menu, followed by a button or som
The power of Claude Code - offline, free, secure
Using a REST Media Resource as an image source
In this blog post I have summarized the steps you'd need in order to copy a Theme Style from one application to another. See how APEX translates your Theme Roller changes into CSS variables and applies them to your app 🎨 How and where a configuration is saved and how to use it ⚙️
Let us first build a custom style in one of our APEX applications. While being logged into the APEX Builder, run you app. Then from the Developer Toolbar, select Customize / Theme Roller. Now we will start editing the Vita style from scratch.
Note that the Theme Roller changes are only illustrative and I encourage you to use your own, matching your vision or brand guidelines.
I have changed some of the Global Colors, as seen from the pictures. Their hex codes are as follows: #b6aa00, #fafafa, #857c00, #ecdd00.
I also changed some border radiuses, like the Container Border Radius and Buttons Border Radius.
Finally, I added some Custom CSS. I will not go into much details about the APEX CSS variables, but will mention that the ones prefixed with --pm are my own vars, while the --ut ones will overwrite already existing ones in the APEX Universal Theme. They better be put in the :root pseudo-class so they are accessible everywhere.
Once done with the changes, click on
Saveand give your Theme Style a name. I have chosen "Demo Style" for this example.
:root {
--pm-title-font-size: 14px;
--pm-disabled-color: #efefef;
--pm-footer-text-color: #cccccc;
--ut-footer-background-color: #f2f2f2;
--ut-footer-border-color: rgba(0, 0, 0, 0.10);
}
.t-Footer {
color: var(--pm-footer-text-color);
}
Now that we have new Theme Style saved, let's take a look behind the scenes.
Go to Shared Components \ Themes \ Universal Theme - 42
Scroll down to the Styles section and select the newly created Theme Style (in my case "Demo Style")
Navigate to the Theme Roller Attributes. What we see here is that APEX has created:
A new Output CSS File URL : #THEME_DB_FILES#20087395096429179666.css
It is based on the Vita style, so Input Parameter File URLs is #THEME_FILES#less/theme/Vita.less.
The JSON Configuration is generated based on my changes in the Theme Roller, so the number of variables is exactly the same as the number of my changes.
{
"classes":[],
"vars":{
"@g_Accent-BG":"#b6aa00",
"@g_Accent-OG":"#fafafa",
"@g_Link-Base":"#857c00",
"@g_Focus":"#ecdd00",
"@g_Container-BorderRadius":"20px",
"@g_Button-BorderRadius":"14px"
},
"customCSS":":root {\n --pm-title-font-size: 14px;\n --pm-disabled-color: #efefef;\n --pm-footer-text-color: #cccccc;\n --ut-footer-background-color: #f2f2f2;\n --ut-footer-border-color: rgba(0, 0, 0, 0.10);\n}\n\n.t-Footer {\n color: var(--pm-footer-text-color);\n}\n\n\n",
"useCustomLess":"N"
}
The essence of the whole process is the JSON Configuration from the previous steps. Here are the steps to make use of it and copy your custom Theme Style to another application.
An your new application, create a new Theme Style. The steps are exactly the same as when creating you original theme style. While being logged into the APEX Builder, run you app. Then from the Developer Toolbar, select Customize / Theme Roller. Select the Vita style. Once loaded click on Save and give your Theme Style a name.
Go to Shared Components \ Themes \ Universal Theme - 42
Scroll down to the Styles section and select the newly created Theme Style
Navigate to the Theme Roller Attributes \ JSON Configuration
Paste the JSON Configuration of the custom Theme Style in your original application
Done! You have a brand new Theme Style, a complete copy of the one you created in your first application.
Thanks to Louis Moreaux and Maxime Tremblay who pointed me to their posts, describing the alternative way of getting and applying the configuration JSON.
apex.utr.config();
Copy the generated JSON from the console. It will start like that: apex.utr.config({"classes":[],"vars":{"@...});
Open the destination app and open Theme Roller
Paste the JSON in the console tab of the browser dev tools
Changes will now be reflected into the Theme Style you have currently opened
Save the Theme Style
🔗 Link to Maxime Tramblay's blog post: Copy Theme Roller Theme From One Application to Another
🔗 Link to Louis Moreaux's Twitter thread: JavaScript function to get and set the Theme Roller properties
With the release of APEX 23.1 all of the above methods become obsolete. We now have declarative, out-of-the-box
Export/Importfunctionality, available in Theme Roller 🌟
To use your custom Theme style in another application, put it into version control or simply make a backup of it, simply select the three dots in the bottom right corner of Theme Roller and select Export. As simple as that.
What APEX will generate is the same JSON file, as we managed to get using the previous two approaches. To apply the Theme to another app, simply use the Import option and select the previously exported file.
A small feature some may say, but I think it's a big one - especially for new APEX developers and people who have not explored APEX as much. It's now very obvious and easy to use it in the same place where you'd done your Theme style changes. 💡
Like that post? Follow me on Twitter and LinkedIn!
🔷 @plamen_9 on Twitter
🔷 Plamen Mushkov on LinkedIn