SOTFUL
Links
  • Home
  • About Us
    • Oracle APEX Experts
  • Software
    • Evermenu >
      • Help
      • Feedback
      • Version History
      • Your Ad In Evermenu
      • Privacy Policy
    • WhenWhere Live >
      • Version History
      • Feedback
      • Privacy Policy
  • Services
    • Oracle APEX Services >
      • Development Service Request
      • Sandro Ferreira's Resume
  • Blogs
    • APEX Blog
    • ClickUp Blog
    • Evermenu Blog
  • Career
  • Contact Us

Dark Mode on your APEX Application

10/6/2018

2 Comments

 
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.
Picture
Picture
Picture
First step is to create the Light and Dark theme styles


Run your APEX Application and click on Theme Roller
Picture
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.
Picture
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
Picture

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

    
Picture

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

    

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

​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.

2 Comments
    Picture
    Blog

    ​Sharing a few of my Oracle APEX solutions. To access the complete list of solutions please access the Knowbase platform.
    ​
    Picture

    Sandro Ferreira

    Sandro is the Oracle APEX Developer / Architect & Founder at SOTFUL. He has been working as an Oracle Developer since 1999, and on several Oracle APEX projects since 2010 through Oracle Corporation, and then from 2015 independently through SOTFUL. He has been working on envisioning, specifying, developing and managing the development of the Web and Mobile apps of the SOTFUL company. He is passioned about Rapid Application Development, Usability, and Efficiency, overall to improve company businesses and our lives.

    Archives

    March 2024
    October 2018
    March 2018
    November 2016
    October 2016

    Categories

    All
    Meetup
    Oracle APEX
    Print

    RSS Feed

    View my profile on LinkedIn
    Follow @sandrogferr


    ​​Our Blogs

    ​Oracle APEX Blog
    ClickUp Blog
    Evermenu Blog
    ​
Copyright © 2015 - 2024 SOTFUL. All rights reserved.​

We build with using:

We build with love using Oracle APEX
Picture
Picture