Cambiar Entre Modo Claro y Oscuro en Oracle APEX: apex_theme.set_user

En el desarrollo de aplicaciones web, ofrecer la opción de alternar entre un modo oscuro y uno claro es una característica muy valorada por los usuarios. Con Oracle APEX, puedes implementar esta funcionalidad fácilmente utilizando el paquete apex_theme.set_user_style. En este artículo te mostraré cómo agregar un conmutador sencillo para alternar entre los estilos claro y oscuro en tu aplicación.

Paso1: Crear los temas usando el Acumulador de Temas.

Para acceder al acumulador de temas puede ejecutar la aplicacion desde el builder del APEX.

Al darle clic en Acumulador de Temas, nos apareceria la siguiente ventana, vemos que tenemos “Vita“ es el tema actual.

Ahi vamos a darle en Guadar como, y vamos a renombrar como “Light” y Guardamos.

Tambien seleccionaremos “Vita - Dark” y damos Guardar como y lo renombramos “Dark”.

Hay que tener en cuenta en la seccion de “Colores Globales” la opcion “Destacado Principal“ hay que cambiar por un color mas oscuro. se hace clic sobre el cuadrado Azul (o color que tenga) y se selecciona, despues se da guardar.

Renombramos y Guardamos.

Con eso tenemos dos nuevas opciones de Dark y Light.

Paso2: Modificar Templates.

Ingresamos a la aplicacion a la que queremos agregarle los modos vamos a componentes compartidos en la seccion de “User Interface” y la opcion de Templates

TuApplication>Shared Components>Templates

Ahi nos aparecera una lista de Templates que nosotros ya tenemos definid ahi vamos a buscar el template tipo “Page“ que este por “Default“.

Este Template lo vamos a editar dandole clic en el nombre del Template y vamos a la pestaña “Definicion” y vamos a modificar el “Header”.

En el Header, nos desplazamos hasta el DIV de “t-Header-logo“.

Despues de “#AFTER_LOGO#“ agregamos el siguiente codigo.


      <!-- Configurar íconos para los modos Oscuro y Claro -->  
        <div class="t-Header-navBar">
        <ul class="t-NavigationBar">
            <li id="dark" class="t-NavigationBar-item ">
                <a class="t-Button t-Button--icon t-Button--header t-Button--navBar">
                    <span class="t-Icon fa fa-moon-o"></span>
                </a>
            </li>
            <li id="light" class="t-NavigationBar-item ">
                <a class="t-Button t-Button--icon t-Button--header t-Button--navBar">
                    <span class="t-Icon fa fa-sun-o"></span>
                </a>
            </li>
        </ul>
        </div>

Asi quedaria en el Header.

Al “Aplicar Cambios” y ejecutar la aplicacion tendriamos algo similar a .

Paso3: Preparamos la Pagina Global

Para crear la funcionalidad, vamos a trabajar en la Pagina Global O

Creamos una region, le damos un “Name” para identificarlo y en “Appearance” usamos el Template “Blank with Attributes“.

A la region que acabamos de crear, le agregamos dos items P0_LIGHTMODE,P0_DARKMODE:

P0_LIGHTMODE: El “Type” debe ser “Hidden” , en la opcion de “Source” en “Type” seleccionamos “SQL Query(return single value)”

En el “SQL Query“ agregamos.

  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'/*este name debe ser igual al que 
                          renombramos en el acumulador de temas*/

Despues agregamos esto al “Server-side Condition”

P0_DARKMODE: El “Type” debe ser “Hidden” , en la opcion de “Source” en “Type” seleccionamos “SQL Query(return single value)”

En el “SQL Query“ agregamos.

  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'/*este name debe ser igual al que 
                          renombramos en el acumulador de temas*/

Despues agregamos esto al “Server-side Condition”

Paso4: Agregar las Acciones Dinamicas.

En la Pestaña de “Dynamic Actions”, agregaremos dos nuevas acciones.

Dark Mode: Esta accion dinamica la vamos a identificar como “Dark Mode“ en “Selection Type” usaremos el “jQuery Selector” y el jQuery Selector es #dark, este selector nosotros lo definimos en el Header.

Este evento tendra dos acciones, una de tipo “Execute Server-side Code” y la segunda sera “Submit Page” o Ejecutar, en la primera accion usaremos el siguiente codigo.

  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;

Ligth Mode: Esta accion dinamica la vamos a identificar como “Ligth Mode“ en “Selection Type” usaremos el “jQuery Selector” y el jQuery Selector es #light, este selector nosotros lo definimos en el Header.

Este evento tendra dos acciones, una de tipo “Execute Server-side Code” y la segunda sera “Submit Page” o Ejecutar, en la primera accion usaremos el siguiente codigo.

  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;

Al guardar y ejecutar la pagina tendriamos lo siguiente.

https://youtu.be/tzcx5YxPd_o

¿Por qué deberías agregar un modo oscuro a tus aplicaciones en Oracle APEX?

El modo oscuro ha dejado de ser solo una tendencia y se ha convertido en una funcionalidad clave para mejorar la experiencia del usuario en aplicaciones modernas. Si estás desarrollando en Oracle APEX, ofrecer un modo oscuro no solo puede mejorar la apariencia de tu aplicación, sino también la usabilidad y accesibilidad. Aquí te explico por qué deberías considerar esta opción para tus usuarios finales.

1. Comodidad Visual

El modo oscuro reduce el brillo de la pantalla, lo que disminuye la fatiga visual, especialmente en condiciones de poca luz. Muchos usuarios pasan largas horas frente a una pantalla, y un esquema de color más suave es más cómodo para la vista. En resumen, un entorno oscuro ayuda a evitar el cansancio ocular en sesiones prolongadas.

2. Ahorro de Batería

En dispositivos con pantallas OLED, como smartphones y laptops modernos, el modo oscuro consume menos energía. Los píxeles oscuros requieren menos energía en estas pantallas, lo que resulta en un ahorro significativo de batería, algo que los usuarios móviles aprecian.

3. Adaptación a las Preferencias del Usuario

No todos los usuarios prefieren los mismos estilos visuales. Al ofrecer tanto un modo claro como oscuro, le das a los usuarios la opción de adaptar la interfaz a su gusto personal. Algunos optan por el modo oscuro durante todo el día, mientras que otros prefieren alternar según la hora del día o el entorno en el que trabajan.

The best Dark Mode memes :) Memedroid

4. Tendencia y Expectativa

El modo oscuro se ha convertido en una funcionalidad ampliamente esperada. Gigantes tecnológicos como Google, Apple, Facebook y Twitter ya ofrecen esta opción. Tenerlo en tu aplicación de Oracle APEX posiciona tu trabajo al nivel de estas plataformas, mostrando que tu desarrollo sigue las tendencias actuales y las expectativas del mercado.

5. Mejora del Enfoque y la Productividad

Para muchos, trabajar con un entorno de colores oscuros ayuda a concentrarse mejor, ya que elimina el brillo excesivo y reduce las distracciones. Además, mejora la legibilidad del texto al proporcionar un mayor contraste entre el contenido y el fondo, especialmente en trabajos de programación o lectura intensiva.

6. Reducción de la Exposición a la Luz Azul

La luz azul que emiten las pantallas puede afectar negativamente el sueño y la salud ocular. El modo oscuro reduce esta exposición, lo que es especialmente beneficioso para aquellos que trabajan por la noche. Ofrecer esta opción no solo mejora la experiencia, sino que también cuida el bienestar de tus usuarios.

7. Estética Moderna

Más allá de las ventajas funcionales, el modo oscuro aporta un look elegante y sofisticado a la interfaz de la aplicación. Si quieres que tu aplicación en Oracle APEX tenga una apariencia moderna y profesional, el modo oscuro es una excelente opción de diseño.

Conclusión

Agregar un modo oscuro en Oracle APEX es una característica que mejora la experiencia del usuario, apoya la accesibilidad, y muestra que estás al día con las tendencias actuales de diseño. Al darle a los usuarios la posibilidad de elegir, no solo haces que la aplicación sea más amigable para los ojos, sino también más adaptable a diferentes situaciones de uso. ¡Es un pequeño cambio que puede tener un gran impacto en la satisfacción del usuario final!

Si estás buscando ofrecer una experiencia más personalizada y moderna a tus usuarios, implementar un modo oscuro es una excelente opción.

Cambiar Entre Modo Claro y Oscuro en Oracle APEX: apex_theme.set_user_style

Table of contents