Set Application Theme Automatically in Oracle APEX

One of the greatest UX improvements you can  have in  your application is  setting the application theme automatically.  To do so, is relatively easy.  The only prerequisite is you already have 2  themes  existing fo your application. The rest, is the combination of Javascript and PLSQL application process.

The first step, is to add a new entry to your navigation bar. As I already have the navigation bar list item "Theme", I just added a new entry for "Auto".

Now, we need a page item "P0_THEME_AUTO" on our Global Page. We will use this item's value as the client-side condition of our Page Load dynamic action. This let's us make sure that the auto theme set is not looping infinitely.

P0_THEME_AUTO is a text field item with custom attributes style="display:none;" so that it is not visible to end-users.

Now, we need a page load dynamic action on Global Page with an "Execute JavaScript Code" action with client-side Condition: "P0_THEME_AUTO" = "Y".

The Javascript code of this action is as follows. Depending on your need, you can uncomment the first option for setting the theme by the Date/Hour or in the current version, it is set conforming the OS theme preference.

As you see, this Javascript code calls a process named "SET_THEME_MODE". Now it's time to create an application process with process point "AJAX callback". The source code for this process is as follows.

With this setup, when user clicks "Auto" on navigation bar, it sets a global page item. Based on its value, a dynamic action fires on our global page and it sets a cookie and calls the application process for setting the correct theme. To make sure that when user selects any other option than 'Auto' in the navigation bar, it is also a good practice to revert the cookie by adding a new action to Global Page dynamic action: 'Execute Javascript code' but this time with the client-side condition "Item != Value" and Item: "P0_THEME_AUTO" , "Value: Y" and the Javascript code as follows.