Dark Mode on your APEX Application

The just released macOS Mojave main new feature is the ability to enable the Dark Mode. Which is not only great for working on low ambient light or long hours, but it is also a design trend. We can easily implement this capability on our APEX Applications defining two Theme Styles.


After adapting what Rodrigo Mesquita shared in his blog we can create a Dark and Light Mode Switch, so users can set the Theme Style independently, in a pre-configured way.

First step is to create the Light and Dark theme styles


Run your APEX Application and click on Theme Roller

Click on ‘Save As’ to save your current Theme Style as the ‘Light’ one.


Then click on ‘Save As’ again and name the new Theme Style as ‘Dark’ and change these values as the ones suggested below.

Global Colors - Header Accent
#323232


Global Colors - Body Accent
#39393A


Save your new ‘Dark’ Theme Style.
​

On Shared Components - Templates


Copy the template Type ‘Page’ with Name ‘Standard’ and name it for example ‘Custom Standard’.


Then click on the name of the created template and on Definition - Header add the following HTML for the Light and Dark icons, just before the #NAVIGATION_BAR# tag.

For the new page template to be used, go on the pages that use the ‘Theme Default’ or ‘Standard’ template and change them to use the 'Custom Standard’ template that was just created.


Page - Appearance - Page Template - Change to ‘Custom Standard’ template.

​

On Page 0 create two hidden items with the code below as its source.​

Identification - Name: P0_DARK_MODE_ID
Identification - Type: Hidden
Source - Type: SQL Query (return single value)
Source - SQL Query: 

Server-side Condition - Type - Item is NULL
Server-side Condition - Item - P0_DARK_MODE_ID

Identification - Name: P0_LIGHT_MODE_ID
Identification - Type: Hidden
Source - Type: SQL Query (return single value)
Source - SQL Query:

Server-side Condition - Type - Item is NULL​

Server-side Condition - Item - P0_LIGHT_MODE_ID

Still on Page 0, create two Dynamic Actions that will run on click of the Sun and Moon icons.

• Click Moon - Dark Mode

• Click Sun - Light Mode

​Create two true actions, Execute PL/SQL Code with the code below and a Submit Page action.

​Create two true actions, Execute PL/SQL Code with the code below and a Submit Page action.

​All is done, and the users of your application should now be able to switch to Dark or Light mode.

​Demo Application
You can login and see this solution accessing the SOTFUL - APEX Examples application.

SOTFUL - APEX Examples
https://apex.oracle.com/pls/apex/f?p=sotful_examples
Username: [email protected]
Password: orclapex1

If you would like to login to the APEX Builder to see more details or export this demo application, please email me at [email protected] or send your info on the SOTFUL Contact Us page, and I will gladly provide your credentials.