Light & Dark Mode Toggle in Oracle APEX

Everything has a Light and Dark mode these days. But it is not just a gimmick or a temporary trend. The style of your application can bring many benefits to your users. Dark mode can for example, reduce eye strain in low light environments or even save some battery life on a laptop. Light mode can enhance readability and clarity of text.

If you like your application light or dark, that’s for everyone to decide. But if you want, you can give your application users a choice and let them decide which one they want to use with one click!

Oracle APEX possibilities

It may seem that to implement something like a style switch in APEX, you will need to do a lot of CSS scripting. But the opposite is true.

The styles and the mechanism that allows users to choose are already built in. You can also find APEX_THEME package, that handles the styles.

One step solution

To create multiple styles for your application, you can use built-in Theme Roller. I like Redwood, so I choose to use Redwood Light and Redwood Dark for this example. But you can use any theme you want.

Theme Roller is available in the Customize option in an APEX Developer Toolbar.

In the Theme Roller, I set my styles. The only thing I changed for the Dark theme is the Appearance, where I choose everything dark. After that I simply saved the themes. You can create as many options as you want.

When it comes to enabling users to choose the style, the easiest way to do it, is a simple switch "Enable End Users to choose Theme Style" in your Application Attributes.

If this is enabled, there will be automatically added "Customize" button in the bottom-left corner of your application. When a user clicks on it, it will open a pop-up where they can select a style and apply changes.

Custom button/switch implementation

If you want to have something different, you can leverage the APEX_THEME package. Implementing the style switch is very simple and it takes just a few steps.

I already had my themes saved, so next thing I had to do was create the buttons to switch them. I opted for simple buttons that submit the page. I placed them on Page 0 before the navigation bar.

Now, for the package to do the work, I need to know the IDs of my styles. To do it, I used this select statement.

select s.theme_style_id,
       t.theme_number,
       s.name
  from apex_application_theme_styles s,
       apex_application_themes t
 where s.application_id = 75224
   and t.application_id = s.application_id
   and t.theme_number   = s.theme_number
   and s.name like '%Redwood%';

--My results
THEME_STYLE_ID	THEME_NUMBER	NAME
158493136412453822237	42	Redwood Dark
2597873239612181258	42	Redwood Light

Next I created two application processes in Shared Components, one for the Light style and the other for the Dark style. Both use the APEX_THEME.SET_USER_STYLE procedure to set the style.

This is example of the Dark style process.

-- This is the code
APEX_THEME.SET_USER_STYLE (
    p_application_id  => :APP_ID,
    p_user            => :APP_USER,
    p_theme_number    => 42,
    p_id              => 158493136412453822237
);

It is possible that when you test it out, it will not work. Because of the Runtime Application changes. There is a security setting, Runtime API Usage in the Application Attributes. To enable this feature, you must enable Modify This Application. The security setting is there for a reason, so please be aware of this.

Then I had to add conditions on the buttons, so they are visible only if the schema is not selected.

These are the conditions for the Light and Dark buttons. For the dark button I added a condition for a case when the user has not saved any style yet.

--Light
154357270635247303930 != APEX_THEME.GET_USER_STYLE (
  p_application_id  => :APP_ID,
  p_user            => :APP_USER,
  p_theme_number    => 42
)
--Dark
158493136412453822237 != APEX_THEME.GET_USER_STYLE (
  p_application_id  => :APP_ID,
  p_user            => :APP_USER,
  p_theme_number    => 42
) or APEX_THEME.GET_USER_STYLE (
  p_application_id  => :APP_ID,
  p_user            => :APP_USER,
  p_theme_number    => 42
) is null

The last step is Authentication. In the Shared Components > Authentication I added a post_auth_theme procedure and used that name in the Post-Authentication Procedure Name.