September 5th, 2024

Implementing Dark Theme for your Oracle Apex application 


Hi all,

As a developer, I really appreciate when an application has the option for dark theme. Therefore, I always searched for the easiest way to implement a dark theme option in Oracle Apex.

Oracle Apex has a strong theme selection and customisation possibilites, therefore, implementing it is easier than you think. We will even make it easier to implement by using CSS filter property. Of course, you can implement further rules in your CSS file to achieve a better look. 

To start, I use Apex App Gallery - Sample Apps - Sample Cards app. 

This is how our sample cards app looks like initially:

As first step, we will create a custom theme using Theme Roller. It is simple as hitting the "Save As" button and renaming it to 'Custom Theme':

This will create a new CSS file for our app in our filesystem. You can check it by: "Shared Components", "Themes", "Universal Theme", "Files":

Now it is time to modify this CSS file to have a dark theme look. By simplicity and pace, I just add these 3 CSS rules. For me, the color schema that it creates is more than enough for a dark theme, but as mentioned, you can play around the values in the CSS filter in CSS file to your delight. 

These CSS rules are inverting and filtering the color schema of the application . Here is how our application now looks like:

Now that we have the Dark Theme CSS file is ready, we can implement a menu selection for users to navigate through the themes. For that, we need an application item and 2 application processes to set the theme by the user selection. First, I create an application item "APP_DARK_THEME":

And then we need the application processes:

The source for the process "SET_LIGHT_THEME" is:

With the Condition of type "Expression"

Then the source for the process "SET_DARK_THEME" is:

With the Condition of type "Expression"

Now we can add a new Navigation Bar item for theme selection by "Shared Components", "Navigation Bar List", "Desktop Navigation Bar" and "Create Entry". We need 3 new entries. 1 parent element "Theme" and 2 children "Dark Theme", "Light Theme":

This will result in our app's navigation bar 1 parent entry with 2 children. Users can switch between themes using these with an ease: