SOTFUL
Links
  • Home
  • About Us
    • Oracle APEX Experts
  • Software
    • Evermenu >
      • Your Ad in Evermenu
      • Privacy Policy
  • Oracle APEX Services
    • Rates for Clients
    • Rates for Vendors Request
    • Development Service Request
    • Sandro Ferreira's Resume
  • Blogs
    • Sandro's APEX Blog
    • Sandro's ClickUp 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: contact@sotful.com
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 contact@sotful.com or send your info on the SOTFUL Contact Us page, and I will gladly provide your credentials.

2 Comments
Dirk Strack link
2/25/2019 12:08:26 pm

Hi Sandro,
thank you for sharing this nice and stylish Theme. I used your method in a project and found some blind spots that needed some more css definitions to make the appearance fit. Here are my additions:

.t-Report-links {
background: #3b3b3b;
border-color: black;
}
td.t-Report-cell select {
background-color: rgba(167, 167, 167, 0.4);
}
.t-Button:not(.t-Button--simple).is-active {
background-color: rgba(141, 141, 141, 0.7);
}
.t-Tabs--pill .t-Tabs-item.is-active .t-Tabs-link {
background-color: rgba(80, 80, 80, 0.85) !important;
}
.t-Form-inputContainer select.yes_no {
color: black;
}
.t-Form-inputContainer select.selectlist {
background-color: rgba(167, 167, 167, 0.4);
}

div[id*='_ig'] > div {
background-color: #39393A;
color : white;
}

.a-GV-table tr.is-selected .a-GV-cell {
background-color: rgba(167, 167, 167, 0.3);
color : white;
}
div.a-TreeView-row.is-selected {
background-color: rgba(167, 167, 167, 0.3) !important;
}


Reply
John Kortman
8/22/2019 05:09:15 am

Great post!!

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    Picture

    Sandro Ferreira

    Hi there! I am an Oracle APEX Developer, Enterprise Application Architect and Founder at SOTFUL. I've worked as an Oracle Consultant for many years, on several Oracle APEX projects and I like to learn every day. I am passionate about RAD products and building Enterprise Applications.

    Archives

    October 2018
    March 2018
    November 2016
    October 2016

    Categories

    All
    Meetup
    Oracle APEX
    Print
    RAD

    RSS Feed

    View my profile on LinkedIn
    Follow @sandrogferr
Copyright © 2015 - 2023 SOTFUL. All rights reserved.​

We build with using

We build with love using Oracle APEX
Picture