The following scenarios will be covered in this blog post:
- How to apply dark and light
modes to your APEX application
- Enable end users to dynamically
apply theme style to an application at runtime
Apply Dark and Light Modes
The development environment of APEX can be rendered with a darker color scheme, which reduces eye strain and is especially helpful for developing late into the night. To switch Dark Mode in the application builder, click the Account menu in the header region on the top-right, and click Dark Mode to toggle Dark Mode on or off. Turning on Dark Mode renders the Oracle Application Express development interface in an inverted color scheme with light-colored text and icons on a darker background.
In addition to switching dark and light modes in the development environment, now you can apply these modes to your applications, and this is what you will learn in this blog. Here’s a list of tasks you will perform in this exercise to enable end users to switch modes using the two icons – as illustrated in Figure-2.
- Create Dark and Light mode themes
using Theme Roller
- Create a new page template and
add two icons (moon and sun) that will allow end users to switch the two modes
- Set the new page template as the
default application template
- Add items and dynamic actions to Global Page enabling end users to change
modes dynamically
Execute the following steps to enable mode switching:
1. Open your application in the development environment, and run it.
2. In the application window, click the Theme Roller option in the developer toolbar.
3. In the Theme Roller window, click the Save As button, and save the current style as Light.
4.
Click the Save As button again to create another themed style named Dark. Set the following dark color
values in the Global Colors section for the page header and body elements and
save these changes.
|
Property |
Value |
|
Header Accent |
#323232 |
|
Body Accent |
#39393A |
5. Go to Shared Components | Templates.
6. Click the Copy Template icon (in the Copy column) representing the Standard page template, as shown in Figure-3, to make a copy of this template.
7.
On the Copy
Template page, enter a name for the new template – for
example, Standard Dark Light Modes.
Click the Copy button to complete
the process. The new page template will appear under the source template on the
Templates page.
8.
Click the name of the new page template to
modify its definitions. On the Edit Page
Template screen, click the Definition tab, and enter a piece of HTML code (between LOGO and NAVIGATION BAR div
elements) in the Header section, as highlighted in the following figure. The code is available in the HTML_Header.txt file in the \SourceCode\Themes folder. The code will
place two icons (fa-moon-o and fa-sun-o) in the navigation bar region.
9.
Go to Shared
Components | Themes
to make the new template your theme’s default page template. Click the name
of the current theme – Universal Theme - 42. On the Create/Edit Theme page, click the Component Defaults tab, set the Page
attribute to Standard Dark Light Modes,
and apply the change – see Figure-5 upper portion. The action sets the new
template as the default page template for your application. If you do not
explicitly choose a template (in Page Designer) then the Application Express
engine uses the template specified here. If you access the Templates page in
Shared Components at this stage, you will see that the new template has been
marked as the default template, as shown in the lower portion of Figure-5.
After this setting, every page you add to this application will use this
template (shown as Theme Default in Page Designer).
Open the Global Page of your application in Page Designer to add a couple of hidden items and dynamic actions. These page components will be used to switch the modes via the APEX_THEME package, which contains utility functions for working with themes and theme styles. If your Global Page is empty, then create a Content Body region (named Modes), set its Template to Blank with Attributes, and continue with the following steps.
1. Add two hidden items as follows to the Modes region on the Global Page:
|
Property |
Value |
|
Name |
P0_DARKMODE |
|
Type |
Hidden |
|
Region |
Modes |
|
Type (under Source) |
SQL
Query (return single value) |
|
SQL Query |
SELECT
s.theme_style_id FROM apex_application_theme_styles s, apex_application_themes t WHERE s.application_id = t.application_id and s.theme_number = t.theme_number and s.application_id
= :app_id and s.name = 'Dark' (see step
4) |
|
Type (under Server-side condition) |
Item
is NULL |
|
Item |
P0_DARKMODE |
|
Property |
Value |
|
Name |
P0_LIGHTMODE |
|
Type |
Hidden |
|
Region |
Modes |
|
Type (under Source) |
SQL
Query (return single value) |
|
SQL Query |
SELECT
s.theme_style_id FROM apex_application_theme_styles s, apex_application_themes t WHERE s.application_id = t.application_id
and s.theme_number = t.theme_number and s.application_id = :app_id and s.name = 'Light' (see step
3) |
|
Type (under Server-side condition) |
Item
is NULL |
|
Item |
P0_LIGHTMODE |
2.
Finally, add the following
dynamic actions. You
have to add a couple of true actions (Execute
PL/SQL Code and Submit Page) to
both dynamic actions. In these dynamic actions, you select jQuery Selectors to trigger the events. The two-page elements
(#dark and #light specified in step 8) are used to trigger the dynamic actions.
Here, you used the #DOMid jQuery Selector syntax to access the two-page
elements.
|
Property |
Value |
|
Name |
Dark
Mode |
|
Event |
Click |
|
Selection Type |
jQuery
Selector |
|
jQuery Selector |
#dark |
|
Action (1) |
Execute
PL/SQL Code |
|
PL/SQL Code |
DECLARE VthemeNumber number; BEGIN
select distinct t.theme_number into VthemeNumber from apex_application_theme_styles s, apex_application_themes
t where s.application_id = t.application_id
and s.application_id = :app_id; apex_theme.set_user_style(p_application_id
=> :app_id, p_user => :app_user, p_theme_number => VthemeNumber, p_id => :P0_DARKMODE); END; |
|
Items to Submit |
P0_DARKMODE |
|
Action (2) |
Submit
Page |
|
Property |
Value |
|
Name |
Light
Mode |
|
Event |
Click |
|
Selection Type |
jQuery
Selector |
|
jQuery Selector |
#light |
|
Action (1) |
Execute
PL/SQL Code |
|
PL/SQL Code |
DECLARE VthemeNumber number; BEGIN select distinct t.theme_number into VthemeNumber from apex_application_theme_styles s,
apex_application_themes t where s.application_id = t.application_id
and s.application_id
= :app_id; apex_theme.set_user_style(p_application_id
=> :app_id, p_user => :app_user, p_theme_number =>
VthemeNumber, p_id => :P0_LIGHTMODE); END; |
|
Items to Submit |
P0_LIGHTMODE |
|
Action (2) |
Submit
Page |
Save your work and run the application. Test the two modes using their respective icons appearing on the navigation bar.
