Customize APEX app colors

One of the limitations of Oracle APEX is that end-users are unable to create their own custom theme styles. This means that when we enable users to choose their preferred theme style, they are limited to selecting from a list of pre-defined default styles or those created by developers. While this is not a major issue for many users, it can be frustrating for those who want more control over the look of their applications.

In this blog post, I will demo how to set the application colors without utilizing theme styles.

When we inspect an APEX page using any browser dev tools, we will notice that there is a :root pseudo-class that contains some CSS variables. These variables are related to different CSS attributes and they can be manipulated to modify the appearance of the page. The :root pseudo-class is used to define global CSS variables that can be accessed and used throughout the page.

In this blog example, we will allow users to change only a few colors, but this can be expanded and some more variables can be added. Let’s start creating a table to store the custom colors, this will save different colors by users.

To let the users set their own style, we can create a form page with a color picker for each column.

Now that we have stored the custom colors, we will create a dynamic content region on page 0 to set the CSS variables. To make this region unnoticed, we can set the region template to blank with attributes.

DECLARE
l_return clob;

BEGIN

FOR i IN
(
select header_text,
       header_background,
       region_header_background,
       region_header_text,
       body_background,
       body_text,
       region_body_background,
       region_body_text
  from app_colors
 where app_user = :APP_USER 
)
LOOP
l_return := '<style>:root{';
  IF i.header_text IS NOT NULL
  THEN
     l_return := l_return||'--ut-header-text-color:'||i.header_text||'; ';
  END IF;
    IF i.header_background IS NOT NULL
  THEN
     l_return := l_return||'--ut-header-background-color:'||i.header_background||'; ';
  END IF;
    IF i.region_header_background IS NOT NULL
  THEN
     l_return := l_return||'--ut-region-header-background-color:'||i.region_header_background||'; ';
  END IF;
    IF i.region_header_text IS NOT NULL
  THEN
     l_return := l_return||'--ut-region-header-text-color:'||i.region_header_text||'; ';
  END IF;
    IF i.body_background IS NOT NULL
  THEN
     l_return := l_return||'--ut-body-background-color:'||i.body_background||'; ';
  END IF;
    IF i.body_text IS NOT NULL
  THEN
     l_return := l_return||'--ut-body-text-color:'||i.body_text||'; ';
  END IF;
    IF i.region_body_background IS NOT NULL
  THEN
     l_return := l_return||'--ut-region-background-color:'||i.region_body_background||'; ';
  END IF;
    IF i.region_body_text IS NOT NULL
  THEN
     l_return := l_return||'--ut-region-text-color:'||i.region_body_text||'; ';
  END IF;    

END LOOP;
l_return := l_return||'}</style>';
return l_return;
END;