Custom Toggle Mode on Oracle APEX

What is a Custom Toggle Mode?

A Custom Toggle Mode is a user-controlled switch that changes the appearance or behavior of an Oracle APEX application. Common examples include:

• Light Mode / Dark Mode
• Compact / Comfortable View
• Grid View / List View
• Show / Hide Navigation
• Enable / Disable Animations

Unlike built-in theme options, a custom toggle allows developers to fully control the application's behavior and styling.

Why Use a Custom Toggle Mode?

Implementing a custom toggle provides several advantages:

• Improves user experience
• Supports accessibility preferences
• Offers personalized application settings
• Creates a modern application interface
• Reduces eye strain with Dark Mode
• Makes applications more interactive

Step # 01 : Create a Toggle Button

⟶ Shared Components
⟶ Navigation and Search
⟶ Navigation Bar List
⟶ Create List Entry
• Create List Entry : Dark Mode
• Icon : fa-moon-o
• Target type : URL
• URL Target : javascript:void(0);
➜ User Defined Attributes
• List Item CSS Classes : apex-dark-btn

Step # 02 : Create CSS Classes & Add JavaScript

1. Copy & Save below CSS code as : darkmode-toggle.css

:root {
  --canvas-bg: #f8fafc;
  --card-bg: #ffffff;
  --text-primary: #1e293b;
  --border-color: #e2e8f0;
}
body.dark-mode {
  --canvas-bg: #0f172a;
  --card-bg: #1e293b;
  --text-primary: #f8fafc;
  --border-color: #334155;
}
body {
  background-color: var(--canvas-bg) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .t-Region,
body.dark-mode .t-Card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .t-Region-title,
body.dark-mode .t-Card-title {
  color: var(--text-primary) !important;
}

2. Copy & Save below JavaScript code as : darkmode-toggle.js

if (localStorage.getItem('apex-dark-theme') === 'enabled') {
    document.body.classList.add('dark-mode');
}

3. Add saved CSS & JavaScript file : darkmode-toggle.css & darkmode-toggle.js both on Static Application Files
4. Go to Page 0: Global Page & Create a Region : Darkmode
   • Name : Darkmode
   • Type : Static Content
   • Copy & Past below code on Source ==> HTML Code :

     
     <script src="#APP_FILES#darkmode-toggle.js"></script>
     <link rel="stylesheet" href="#APP_FILES#darkmode-toggle.css">
     

   • Layout
     • Slot : Full Width Content
     • Row CSS Classes : u-hidden

Step # 03 : Create a Dynamic Actions on Page 0: Global Page

⟶ Dynamic Actions
• Name : Toggle Dark Mode
• Event Scope : Dynamic
➜ When
• Event : Click
• Selection Type : jQuery Selector
• jQuery Selector : .apex-dark-btn
➜ True Action
• Action : Execute JavaScript Code
• Code :

  
  const body = document.querySelector('body');
  body.classList.toggle('dark-mode');
  
  const isDark = body.classList.contains('dark-mode');
  localStorage.setItem('apex-dark-theme', isDark ? 'enabled' : 'disabled');
  

• Fire on Initialization : off

Demo Output